[Oxley-2014Participant]

Hello,
I would like to have a button at the bottom of any page of my site and the purpose of this button is to open a pop-up window with a contact form in it.
Though the forum I have found the following code:

<div id="my-content" style="display: none;">
    [contact-form-7, etc”]
</div>

<div class="x-btn-circle-wrap x-btn-regular x-btn-block">
  <a href="#my-content" class="x-btn x-btn-rounded x-btn-regular x-btn-block lightbox-selector" title="Clic here" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="to open a contact a contact form" data-type="inline">Contact </a>
</div>

[lightbox selector=".lightbox-selector"] 

That is what I wish but I had to make some little modifications because I wanted to change the type of the button.
Here is the result:

<div id="my-content" style="display: none;">
    [contact-form-7, etc“]
</div>

<div class=" x-btn-regular ">
  <a href="#my-content" class="x-btn x-btn-rounded x-btn-regular  lightbox-selector" title="Clic here" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="to open a contact a contact form" data-type="inline">Contact </a>
</div>

[lightbox selector=".lightbox-selector"]

This works but does this look correct to you?

Actually I would like to have a “3D pill” button instead of the regular style that is showing.
I am not sure how to “mix” the above code with the specific code of a 3d button that is:

[button type=”real” shape=”pill” size=”x-large” href=”#example” title=”Example”][icon type=”folder-open”]Pill Button[/button]

I am confused because I don’t see a “x-btn-3d” or something like this in the specific code for a pill button. Could you show me how to do it?

Second question:
I have placed the code in the Footer Content. May be I will have to use widgets in the footer later but at the moment I would like to avoid this. Is it then correct to place the code in the Footer Content? I mean it works but is there a reason not to do so?

Third question:
Also on a smartphone (iPhone 6s plus for the test) the lightbox (then the Contact Form) does not show.
What should I do in order to do so?

Thank you in advance for your help.

Regards,
Oxley

[Oxley-2014Participant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

#1 Please update your code to :

<div class=" x-btn-regular ">
  <a href="#my-content" class="x-btn x-btn-red x-btn-real x-btn-pill x-btn-small lightbox-selector" title="Clic here" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="to open a contact a contact form" data-type="inline">Contact </a>
</div>

#2 It’s working correctly and you can keep the code if you want.

#3 Please try convert plug plugin https://community.theme.co/kb/integrated-plugins-convertplug/, it displays modal on all screen sizes unless you disable it from options.

Hope it helps.

[Oxley-2014Participant]

Hello,
Thank you for your answers but I don’t see the connection between your answers 2 and 3 and my questions.

Question 2:
Is it ok to place such a code in the “Footer Content”?

Question 3:
What is the code to add/modify in order that what works on a computer works also on a smartphone. In another words the contact form does not appear on a smartphone. How to fix this?
Thanks in advance.

Regards,
Oxley

[ChristianModerator]

Hey Oxley,

#2. Footer Content accepts HTML so it should work. Widgets is not accepted.

#3. We currently do not support HTML content for the lightbox. It is technically possible to achieve it however, that would require custom development which falls outside the scope of our support. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/

Thank you for understanding.

[Oxley-2014Participant]

Hello,
Guys, are you kidding me?!

Question 2:
I said the code works. But I asked if it is ok to let this code in The Footer content. May be this code should be placed somewhere else. I don’t know. I am asking. You are vsupposed to know better than me.
Christopher said the code works and Christian said it should works.
Is it some kind of joke?! Is my question too complex to be processed? I am not asking if it works since I said it works and you can check by yourself that it works. I am asking about the best “place” where to put the code. If the best place is the Footer content just say it CLEARLY. If there is a better place just say CLEARLY where to up this code. Can you do this, please?

Question3:
I found on this very forum a piece of code that works great. It does exactly what it is supposed to do. But only on computers. It does not work on a smartphone. I guess it requires some piece of CSS code starting with @media.
And the answer is that you don’t support html for lightbox…
Is it some kind of joke?

Please guys, could you show me some dedication and added value coming from you?

Regards,
Oxley

[JoaoModerator]

Hi Oxley,

First of I would to assure that none of my colleague are joking with you and we are doing the best we can to help you and every customer to achieve their goals. As Christian mentioned Lightbox is not designed for this purpose, you achieve a design that work on desktop but on mobile once you touch the screen it fails to respond well.

I would like to suggest you something different instead of the lightbox which I believe will bring you a very similar result with more stability.

Have you consider using Convertplug with Contactform addon and launching the form using a class? Convertplug works and responds really well on mobile.

https://docs.brainstormforce.com/how-to-collect-leads-through-contact-form-7-using-convertplug/

This video might help you as well – Yes I understand you are not using Cornerstone.

Let us know your thoughts,

Kind Regards,

Joao

[Oxley-2014Participant]

Joao,
Hello,

Thank you for your answer.

At least there is an explanation and above all there is a suggestion for another solution.
You have proven to be proactive and this is what we like about this support team.
May your colleagues be inspired by your way of handling the requests.

I will look at what you suggested.
Thanks again.

Regards,
Oxley

[JoaoModerator]

Hi Oxley,

Thanks for the kind words.

Let us know if you need help with anything else.

Joao

[Oxley-2014Participant]

Joao,

Thanks for your suggestion but in order to use Convertplug with Contactform we have to install the Contactform add-on for Convertplug.
This add-on can be only installed with a paid license of Convertplug even if Convertplug is part of the “X” extensions offer.

If there was a little “something” to pay such as $8 or even $10 I would understand but we have to pay the full license. This is frustrating because we have the product for free but finally we have to pay the full price. I know this is a debatable topic and I am not starting the debate.

So finally I am going in another direction.

I have added a page link in the footer that is positioned under the Contact button. This link opens a classic Contact Form page.
The idea is that if someone visits the site with a computer he/she can see and then click the big blue button at the bottom of the page in order to contact us. Then a lightbox shows a Contact form and we are ready to receive the message.

If someone visits the site with a mobile (and a table I guess) he/she can see and then click the link at the bottom of the page in order to contact us. Then a classic Contact form page opens and we are ready to receive the message.

Then my question is how to hide the Button (that opens the lightbox) when someone visits the site with a mobile (and a table I guess) and let only the page link visible in that case?

And on the opposite case how to hide the page link (that opens a classic Contact Form page) when someone visits the site with a computer and let only the big blue button that opens a lightbox visible in that case?

Just in order to be clear:
The “big blue button” consists of a code placed in the Footer content.
The page link is a page in the Footer menu.

I dont know if I have to use the shortcode named “Visibility” or a “@media” trick in the CSS code. Actually I am not sure at all how to proceed…
So could you help me, please?

Thanks in advance!

To tell the truth I don’t get why using Safari on a computer allows the lightbox to show a Contact Form and why when using Safari on an iPhone the lightbox does not show. I made a test with an iPhone 6s Plus then I dont think it is a problem of resolution since the screen is 1920-by-1080-pixel. I guess also (since I could not test it) a tablet would behave the same as a smartphone.
If you can explain why 2 different behaviors that would be really great!

Again thanks in advance for your help.

Regards,
Oxley

[JoaoModerator]

Hi Oxley,

Sorry about my confusion, I had no idea you had to pay for this addon, we mostly use ConverPlug to collects e-mails and almost all addons are free.

As it is a really cool functionality you are looking for and I want to help you achieve it, I took some time reasearched and tested another solution.

Without using the Contact Foer addon ConverPlug offers you the ability of any adding a Custom Form.

This Custom Form can be a Contact Form Shortcode, I tested and it works fine, and it is really easy to setup.

So Please do the following if you are still intersted.

To launch the form on the button using class you can follow the post I did before where you launch it based on class.

To use contact form inside ConvertPlug, do the following, check this link and follow the step by step:

https://docs.brainstormforce.com/embed-custom-form-in-convertplug/

You will go to your contact form and copy it´s shortcode and paste on the Custom Form Field. Please see imgs attached.

This will work fine on desktop and mobiles, in case you don´t like the solution we can try to help you with the other issues.

Let us know how it goes.

Joao

[Oxley-2014Participant]

Joao,
Hello,

Thank you very much for your suggestion!

May be this could help somebody:
Instead of creating a button on a page that would open a Popup window as suggested in the video I have created a button in the Footer Content.
Then in ConvertPlug I have chosen a Modal Popup model.
As a behavior I have chosen “Manual Display” and then I have pasted the name of the class (from the Footer Content) in the “Launch with CSS Class” field.

As you suggested in “Submission/Collect Leads Using” I have selected “Custom Form” and then pasted the “Contact Form 7” shortcode.

So the button in the Footer opens a ConvertPlug Popup that contains the desired Contact Form. Exactly what I was looking for.
It works both on computer and mobile phone.

This is GREAT!

Can I renew my last question? In case the answer is yes, here it is:
I don’t get why using Safari on a computer allows the Lightbox to show a Contact Form and why when using Safari on an iPhone the lightbox does not show. I made a test with an iPhone 6s Plus then I dont think it is a problem of resolution since the screen is 1920-by-1080-pixel. I guess also (since I could not test it) a tablet would behave the same as a smartphone.
Could you explain why 2 different behaviors?

Thanks in advance.

Regards,
Oxley

[RadModerator]

Hi there,

There could be many possible reasons.

And mobile isn’t just about resolution but also related to features that make them a mobile. Mobile has viewport scaling, it’s not the device’s actual resolution that is being followed, but the declared scaling. Example, even if it’s 1080px, it still 414px (portrait).

But the lightbox should work on both desktop and mobile unless there are intentional settings that hide them. I just checked on iPhone 6s Plus and it’s working, but, had to click it twice. The first tap will open the tooltip, the second will open the popup. Not sure what’s the reason behind that, but please try adding this code to Admin > Appearance > Customizer > Custom > Javascript.

jQuery ( function( $ ) {

$(document).ready( function() {

setTimeout( function() {

$( 'a.my-contact-form-popup' ).off('touchstart touchend');

}, 300 );

} );

} );

That will unbind the touch event for mobile.

Thanks!

[Oxley-2014Participant]

Rad,
Hello,

Thank you for your explanation.

Actually the reason of my request was the Lightbox not working on mobile (but working on computer).
So Joao introduced the idea of using ConvertPlug with the Contact Form 7 add-on.
Unfortunately in order to use this add-on we have to pay for the full license of ConvertPlug.
Then Joao suggested to go with a Custom Form allowing the use a Contact Form 7 shortcode.

Your suggestion would have saved time to all of us but I had the opportunity to discover ConvertPlug and it seems to be a great tool!

Anyway thanks again for your input.

I have also to click twice when using ConvertPlug. The button I implemented has a popover so first tap the popover appears above the button showing a message and then second tap the Contact Form appears.

Does your code would work with the ConvertPlug/Popover button I finally use?

Regards,
Oxley

[RadModerator]

Hi there,

There is no guarantee, but touch event also works as the click event. That will narrow our search and troubleshooting.

My other guest is the pop over blocks the click event propagation when it’s not yet displayed, hence, works on the second click. Have you tried it on a normal link with class name?

Thanks!

[Author]

Posts