What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
How to create lightbox form without get duplicated the form in one page?Asked by zaovu on December 06, 2016 at 09:01 PM
The button works if the embedded lightbox link is inserted into only one button.
More than one button, my form seem to be duplicated and form's information also disappear when I press on one of them.
May I have you guys advice to avoid?
At the moment I use has the form embedded in these two buttons.
I have checked your website and your form.
I have seen that your second BOOK NOW button does not trigger the lightbox as the following screen:
And, your first BOOK NOW button, opens double lightboxes as the following screenshot below:
I have seen that you did not give any IDs to the buttons. If you trigger the buttons with a class name, only the first one works and second does not. I recommend you to give IDs to the buttons from the HTML codes of your website and trigger them separately.
There is no problem with your forms. You only have problem with triggering the buttons.
Please check and if you need more assistance, let us know.
Thanks for advice.
May I ask how to trigger button?
I gave them id but seem not enough to work.
Could you please try following:
1. Remove the div tag where your script for Lightbox is embedded:
2. And then try to paste this code instead:
<a class="btn lightbox-63401987247462" style="cursor:pointer;
font: 12px Arial;
padding: 2px 6px 2px 6px;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF; "> BOOK NOW </a>
Lightbox should work anywhere in your code as long as it is between body tags.
You can also check it here before you paste in your code: https://jsfiddle.net/t9zys9z4/1/
Please try and let us know if it is working for you.
We'll wait for your response.
Thanks for your reply.
The problem is if I use the same code for others different buttons. they are still duplicated even I open click one button.
If we dont have solution for that now, I'm also fine to use the pop-up form instead and here is a few questions I wonder if we can do:
1. is there anyway that I can remove section of url link (https://form.jotform.me/63401987247462) appear in the pop-up form?
2. At current, it automatically appears at the top left corner:
Can we set auto the pop-up form auto center aligned with current open page? Like this?
Thank you in advance for your help!
Let us first address your lightbox issue and then if the issue persists and you want to show popup window, we will help you with it.
I did check your webpage where you have embedded your lightbox form. I see that you are loading the same form on click of each "Book Now" button. Please note that you do not have to copy the complete lightbox embed code multiple times. That is the reason when you click on the button, it triggers multiple lightbox window.
The script part of the lightbox code should be copied only once in webpage and the anchor tag "<a>" should be placed where ever you want the book now button to be displayed.
<a class="btn lightbox-63401987247462 btn-white-outline">BOOK NOW</a>
The code which I have copied above in red background should be copied only once in webpage and the code with green background should be copied in all location where you want the button to be displayed.
I would suggest you to edit your webpage and delete all the light script code code you have added except the first one. You should retain the "<a class=...</a>" part of the code. Please check the screenshot below:
Do try out and get back to us if the issue persists.
Thanks so much for your instruction.
After remove all script code in other sections. they works perfectly :).
Can you also help answering on the pop-up form? Just want to know in case.
Thanks in advance!
Hello again Dear Zao Vu,
We are very glad to see that your lightboxes work perfectly.
Please check the following document to check how pop-up form works: https://www.jotform.com/help/203-How-to-Auto-popup-a-Lightbox-Form
If you apply a pop-up form into your website and in the case of you need any help, please do not hesitate to contact us. We will be glad to help and we will try to do our best.
Thank you for using JotForm.