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

    Can I have a form auto-pop up on website?

    Asked by angiehills on February 19, 2014 at 09:24 AM

    Can I have a form (image with link to FB) to pop up on website after 30 seconds or so to invite them to join us & like us on FB for a chance to win?

     

    I see a lightbox embed code & a popup one - but looks like popup is linked to a text or button link? And I'm not sure about lightbox - can either of these, or another method be used & setup to auto-popup and have an option to click link or close?

     

    Thanks!

    FB thanks button link and
  • Profile Image
    JotForm Support

    Answered by BDAVID on February 19, 2014 at 10:10 AM

    Hi, you can embed your form using the lightbox code, and make it Auto-pop up, please look a this guide to accomplish that.

    If you need to add a image link, to redirect them to your Facebook page, you can:

    1) Add the Image field under Form Tools

    2) Click on the Image Link icon, and the URL to you Facebook page.

    If you want the user to open or close the link to the form, I would recommend you to embed your form with the feedback embedded method. 

    This is a site I have just for testing porpuses, you can check how it looks the Feedback embedded method. Let us know if you have more questions.

  • Profile Image

    Answered by angiehills on February 19, 2014 at 11:29 AM

    Awesome! :) I've done it - but seem to have something wrong. Like a blank light box opening in front of or something???? Is there something wrong with my code? Or something on my website?

    Also - how can I get the sizing to be accurate & not have to have scroll bars?

    Also - i don't need the Title Me link at the top left - Can I remove that without messing up the code? If so - what all do I remove out of the code?

    Thanks!

  • Profile Image

    Answered by EliezerN on February 19, 2014 at 11:50 AM

    Hi,

    Could you please share with us the URL of your webpage where your form is embedded? That way we can further investigate and provide the proper assistance to solve the issue.

    We will wait for your reply.

    Thanks

  • Profile Image

    Answered by angiehills on February 19, 2014 at 11:52 AM

    Sorry - I meant to share that. Here it is:

    http://www.plexus-health-and-wellness.com/

  • Profile Image
    JotForm Support

    Answered by EltonCris on February 19, 2014 at 01:10 PM

    Hi,

    Please replace your codes with the following, this should resolved the first and third issues. Bolded part are the ones changed.

    <script src="//cdn.jotfor.ms/static/feedback.js?3.2.606" type="text/javascript">

    new JotformFeedback({

    formId:'40493393031147',

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

    windowTitle:'',

    background:'#FFFFFF',

    fontColor:'#FFFFFF',

    type:1,

    height:630,

    width:900

    });

    </script>

    <a id="lightboxdelay" class="lightbox-40493393031147" style="cursor:pointer;color:blue;text-decoration:underline;display:none;">Title Me</a>

    <script language="JavaScript">

    var delayseconds = 5;

        function pause() {

        myTimer = setTimeout('whatToDo()', delayseconds * 1000)

        }

       function whatToDo() {

    document.getElementById('lightboxdelay').click();

        }

    window.onload = pause;

    </script>

    And then inject this CSS codes to your form after that to removed the scrollbars.

    .form-all{margin:0 !important;}

    Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Feel free to let us know here should you need further assistance.

    Regads!

  • Profile Image

    Answered by angiehills on February 19, 2014 at 01:56 PM

    FANTASTIC!

    Jotform & Support staff is AWESOME! 

    Thanks so much!

  • Profile Image

    Answered by angiehills on February 20, 2014 at 11:06 PM

    I uploaded a smaller size photo & tried editing the size in the code above for the light box - but the image still doesn't sit center in the light box & has a scroll bar.

    Can you please advise how to adjust the code to center the image inside the lightbotx & remove the scrollbar?

    Also - I'm testing this website on my mobile divice (full layout of website & testing responsive) and I don't see this pop up on either. Should it pop up on mobile - I would like it to & would like it to redice size for mobile device.

    Thanks in advance!

  • Profile Image
    JotForm Support

    Answered by ashwin_d on February 21, 2014 at 01:06 AM

    Hello angiehills,

    I have injected the following custom css in your form and the lightbox seems to appear correctly in your web page:

    .form-all {padding-left:-20px;margin-left:-33px;

    margin-right:-64px;}

    Please take a look at the screenshot below:

    Do check and get back to us if you need any other changes.

    Thank you!

  • Profile Image

    Answered by angiehills on February 21, 2014 at 10:40 AM

    The sizing & placement is perfect! Thank-You!

     

    But I'm checking on my mobile & it doesn't seem to pop up at all? I would like it to show on mobile as well & re-size for mobile.

     

    Thanks!

  • Profile Image

    Answered by pinoytech on February 21, 2014 at 11:26 AM

    Hi,

    Your form is working fine on my end upon checking. Please take a look at this video: http://www.screencast.com/t/3Nrq34Xyr

    I would like it to show on mobile as well & re-size for mobile.

    Inject this custom css in to your form to do the trick.

    @media only screen

    and (min-device-width : 320px)

    and (max-device-width : 480px) {

    /* Styles */

    .form-image {

    margin-left: -95px !important;

    }

    }

    If you need further assistance, please let us know.