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

    FYI: About lightbox option for forms - adding custom styling class

    Asked by AA_C on July 09, 2016 at 01:37 PM

    Hi,

    I have used the "lightbox" option for posting forms with great success but for one thing.

    We use a specified css color coding for our links. The "lightbox" code, as given, will not allow the option for this.

    I have found a workaround that works nicely.

    For example the following script:

    <script src="https://form.jotform.com/static/feedback2.js?3.3.REV" type="text/javascript"> var JFL_60917387727973 = new JotformFeedback({ formId: '60917387727973', base: 'https://form.jotform.com/', windowTitle: 'Junior Handler - Jeunes conducteurs', background: '#cc0000', fontColor: '#FFFFFF', type: '1', height: 550, width: 610, openOnLoad: false }); </script> <a class="btn lightbox-60917387727973" style="margin-top: 16px"> Junior Handler ID Card </a>

    Will not allow for our class for links which is "class=redLink10" 

    In order to accomplish this I use a <div> like so and add our class:

     
    <div class="lightbox-60917387727973">
    <script src="https://form.jotform.com/static/feedback2.js?3.3.REV" type="text/javascript"> var JFL_60917387727973 = new JotformFeedback({ formId: '60917387727973', base: 'https://form.jotform.com/', windowTitle: 'Junior Handler - Jeunes conducteurs', background: '#cc0000', fontColor: '#FFFFFF', type: '1', height: 550, width: 610, openOnLoad: false }); </script> <a class="redLink11"  target="_blank" href="#" style="margin-top: 16px"> Junior Handler ID Card </a> 
    </div>

    Note that the href for the link with a hash (#) sign must be added for it to work. 

    I just wanted to post this as it may be helpful to some other users.

    If anyone can find this helpful or issues with this please let me know.

     

    Regards,

    Robert

    To view the results use the link below and select the junior Handler ID Card (On line) option.

    Page URL:
    http://www.aac.ca/en/forms/main/#misc

    lightbox styling lightbox class
  • Profile Image
    JotForm Support

    Answered by Mike on July 09, 2016 at 05:32 PM

    Thank you for sharing, Robert. Great example!