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.


  • Profile Image

    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:
    <script src="//max.jotfor.ms/static/feedback2.js?3.2.2041" type="text/javascript">

    new JotformFeedback({

    formId:'32907023783152',

    base:'http://jotform.us/',

    windowTitle:'Client Patient Information',

    background:'#080807',

    fontColor:'#FFFFFF',

    type:2,

    height:500,

    width:700

    });

    </script>

    <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>

    Page URL:
    http://yourpc411.com/clients/avrec/?page_id=5318

    registration form JotForm style size
  • Profile Image
    JotForm Support

    Answered by BDAVID on May 28, 2014 at 11:48 AM

    To use a button, just simply use the lightbox class from your lightbox embed code on your buttons code. Example:

     <script src="//max.jotfor.ms/min/g=feedback2" type="text/javascript">

    new JotformFeedback({

    formId:'30452332860952',

    base:'http://jotformpro.com/',

    windowTitle:'Title Me',

    background:'#FFA500',

    fontColor:'#FFFFFF',

    type:false,

    height:500,

    width:700

    });

    </script>

    <input class="lightbox-30452332860952" type="button" value="Click Here" />

    Hope this helps you, Let us know if you need further assistance.

  • Profile Image

    Answered by smcwilliams on May 28, 2014 at 11:59 AM

    That did work thank you, but is there any way to customize those buttons for my websites? 

  • Profile Image
    JotForm Support

    Answered by ashwin_d on May 28, 2014 at 01:05 PM

    Hello smcwilliams,

    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.

    Thank you!

  • Profile Image

    Answered by smcwilliams on May 28, 2014 at 01:14 PM

    Thank you!