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 do you add lightbox to a button?Asked by smcwilliams on May 28, 2014 at 10:26 AM
I am using wordpress and i am trying to add the lightbox feature to a button to display the form i created on JotForm. Can you help?
The "Complete Registration Form Here" Button here: http://yourpc411.com/clients/avrec/?page_id=5318
This is the button shortcode: [aio_button align="left" animation="none" color="blue" size="small" icon="none" text="Complete Registration Form" relationship="dofollow" url="http://form.jotform.us/form/32907023783152"]
This is what put in wordpress but it didnt work:
windowTitle:'Client Patient Information',
<a class="lightbox-32907023783152" style="cursor:pointer;">[aio_button align="left" animation="none" color="blue" size="small" icon="none" text="Complete Registration Form" relationship="dofollow" url="http://form.jotform.us/form/32907023783152"]</a>
registration form JotForm style size
To use a button, just simply use the lightbox class from your lightbox embed code on your buttons code. Example:
<input class="lightbox-30452332860952" type="button" value="Click Here" />
Hope this helps you, Let us know if you need further assistance.
That did work thank you, but is there any way to customize those buttons for my websites?
Yes is is possible to customize your button. You can add style attribute in your button code. Example:
<input class="lightbox-30452332860952" type="button" value="Click Here" style="cursor: pointer; border-radius: .5em; padding: 8px 18px; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; text-shadow: -1px -1px 0px #a60000; border: 1px solid #a60000;" />
I just added few sample codes to customize the look of the button. You can add any style information of your choice.
Hope this helps.
Do get back to us if you have any questions.