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

    Possible to have lightbox contact form open when page loads?

    Asked by miatalewis on November 28, 2010 at 06:35 PM

    Hi,

    Im using the lightbox form as our contact form.

    Is it possible to add the lightbox form and have it open when the website loads? instead of having to click on it (click on the word contact)?

     

    the sample page i am testing on is http://bfreepaparazzi.com/mailus.html

  • Profile Image
    JotForm Support

    Answered by seyhuns on December 16, 2010 at 09:47 AM

    Hello,

    You can use our new lightbox. We will publish it  in a few days. Here is the script:

    <script src="//www.jotform.com/min/g=feedback" type="text/javascript">
    new JotformFeedback({
    formId:'33******',
    base:'http://www.jotform.com/',
    windowTitle:'FORM TITLE',
    background:'#FFA500',
    fontColor:'#FFFFFF',
    type:false,
    height:500,
    width:700,
    openOnLoad:true
    });
    </script>
    <a id="lightbox-33******" style="cursor:pointer;color:blue;text-decoration:underline;">Test link</a>

    Please do not forget to change "33******" with your form id and "FORM TITLE" with the title you want.

    Thank you.

  • Profile Image

    Answered by webmastertdf on December 22, 2011 at 06:51 PM

    Is it possible to have the same on-page-load light box  have an element that require a submition in order to close the lightbox.

    I want to  require my  visitors to give me an email address before closing the light box..

     

    is this possible?

  • Profile Image
    JotForm Support

    Answered by abajan on December 23, 2011 at 05:53 AM

    There are two (2) solutions that presently come to mind - neither of which involves altering the lighbox code provided by seyhuns:

    Solution 1: Make the email field a required one

    1. Load the form into the form builder, click the email field and click "Required":


    You can edit the messages users who fail to complete the field will see. The screenshot below shows how to change the default message that is displayed next to the submission button:


    (The same can be done for the "This field is required." and "Enter a valid email address" messages.)

    2. Save the form

    Solution 2: Setup a condition to show the submission button only if the email address has been entered

    1. Load the form into the form builder and while on the "Setup & Embed" tab, click Conditions > Next and set the following rule:

    (Substitute the name of your form's email field for the one above if it's different.)

    2. Save the form

    Here's a sample lightbox with the second solution.

  • Profile Image
    JotForm Support

    Answered by abajan on December 24, 2011 at 05:49 AM

    Actually, the functionality you want requires a bit more work because with the above solution users are still able to close the lightbox without completing the form. Here's a better way that involves the use of two almost identical pages.

    So, how was it done?

    1. Setup a condition to only show the submit button when an email address is entered (as illustrated in my last post)

    2. Copy the lightbox code from the Embed Form Wizard, customizing it as you wish (I've used Type 2 for this example)

    3. Paste the code at the end of the web page's content and remove the link to the lightbox. (It's unnecessary since the lighbox will load automatically)

    4. Include an "openOnLoad:true" parameter in the lightbox script, as described by seyhuns

    5. Place the following CSS (enclosed in style tags) in the page's head to hide the lightbox's "Close" button:

    div div div img {
    display:none;
    }

    6. Create a duplicate page and remove the lightbox script along with the CSS rule that hides its "Close" button

    7. Return to the form builder and while on the "Setup & Embed" tab, click the "Thank You" button, select "Custom URL", enter the address of the duplicate page, click "Finish" and save the form

    (Viewing the source of both the page containing the lightbox and the Thank You page will help to clarify the above.)

    If you need further assitance with this, please let us know.

  • Profile Image
    JotForm Support

    Answered by abajan on December 24, 2011 at 05:55 AM

    Oops! I forgot to mention that if you want a thank you message to pop-up on the thank you page, you would need to include a JavaScript alert in the said page. (See the page's source.)

  • Profile Image

    Answered by webmastertdf on December 28, 2011 at 02:30 PM

    AMAZING !!!! THANKS SO MUCH FOR YOU HELP!

    Check out my finished product- thanks you!

    http://www.ticketdefenselaw.com/ebookhtml.html

  • Profile Image
    JotForm Support

    Answered by idarktech on December 28, 2011 at 09:18 PM

    @ webmastertdf,

    Nice one, everything works great! I'm glad that my colleague has helped you with this. If you have any other questions or concerns, please let us know. Thank you for using JotForm!