Open second form of two-step form in iframe

  • rubyt
    Asked on June 19, 2015 at 2:34 AM

    Hi there,

    I am trying to create a two-step form by following these instructions and I want the second form to open in an i-frame when I press submit. FYI, I have my first form embedded in my landing page and I would like my second form to open in an i-frame on my landing page. I tried these instructions but it didn't work. Specifically, the form opens in the page rather than in an iframe. Please help! 

    Thank you!

    Ruby

  • Chriistian Jotform Support
    Replied on June 19, 2015 at 4:21 AM

    Hi rubyt, 

    Thanks for contacting us.

     

    Can you provide to us the link or name of the form in question? And also you mentioned that you have already embedded your form into your website, can you also give to us the exact URL where you have embedded the form? So we can further check this issue. 

     

    We will wait for your response.

     

    Regards.

  • rubyt
    Replied on June 19, 2015 at 4:33 AM

    Hi Chriistian,

    Sorry my landing page can only be accessed via the backend right now.. but will my jotform link be sufficient? 

    First form: http://form.jotform.me/form/51684791128463?

    Second form: http://form.jotform.me/form/51670987739473 

     

    Thank you!

  • dogus
    Replied on June 19, 2015 at 4:40 AM

    Hi rubyt,

    Did you try using 'Thank You' field? You can show a second form after your current form submission. To show a second form please select "Thank You message" from "Thank You Page Wizard" then select "Next" to go to wysiwyg editor.

    Open second form of two step form in iframe Image 1 Screenshot 20

    On top right of the editor, please select "html" and go into html code view. Then paste your iFrame embed code into that area.

    You can change some attributes of iframe element. You can make it borderless or not scrollable. Or you can create your own iframe.

    For example please paste below code to html content on editor:

     <iframe src="//form.jotform.me/form/51670987739473" width="350" height="350" borderless/>

     

    This code will open your second form after your first form submission with a new iframe inside your current embedding iframe. 

     

    We are looking forward for your response.

     

    Regards.

  • rubyt
    Replied on June 19, 2015 at 4:59 AM

    Ah I see, that works but could it open on top of my previous form and with a cross at the top right-hand corner? For example:

    Open second form of two step form in iframe Image 1 Screenshot 20 

  • rubyt
    Replied on June 19, 2015 at 5:04 AM

    Should I be using a lightbox instead? If so, is it possible to make it scrollable rather than having it resize based on my content?

    Thank you!

  • dogus
    Replied on June 19, 2015 at 7:14 AM

    Hi rubyt,

    You can use lightbox available on "Embed Form Wizard"

    Open second form of two step form in iframe Image 1 Screenshot 20

     

    To make an iframe have static width and height and scrollable inside, set width and height values for both attribute and style properties of iframe. Then set "scrolling" attribute of iframe as "yes". This will make your iframe's content scrollable inside the area with specific width and height.

    If you want to embed your forms as iframes and want to show your second form outside of your first form, you have to write some codes for catching the submission of the first form and then you can embed your second form.

     

    Regards. 

  • rubyt
    Replied on June 19, 2015 at 10:58 PM

    I guess lightbox is the better option if I want to open my second form outside/on top of my first form? 

    If so, what code do I paste into my html editor? I tried this, but it doesn't work:

    <script src="//d2g9qbzl5h49rh.cloudfront.net/static/feedback2.js?3.3.7577" type="text/javascript">

    var JFL_51670987739473 = new JotformFeedback({

    formId:'51670987739473',

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

    windowTitle:'Mankind',

    background:'#FFA500',

    fontColor:'#FFFFFF',

    type:1,

    height:500,

    width:700,

    openOnLoad:false

    });

    </script>

     

  • rubyt
    Replied on June 19, 2015 at 11:47 PM

    A

    lso, is it possible to make the lightbox scroll, please?

    Thank you

    . 
  • Ben
    Replied on June 20, 2015 at 12:08 PM

    I guess lightbox is the better option if I want to open my second form outside/on top of my first form?

    Yes, if you are looking to show one form above the other instead of after the submission - on a thank you page - you would need to add the lightbox code for the second form.

    Now since your issue with the lightbox form is a different issue than what you have asked about here I have moved it for you to a new thread here: http://www.jotform.com/answers/592755 where we will help you inspect the form and help you resolve the issue.

    For the same reasons as above I have moved your other question to a new thread as well so we will help you on this thread: http://www.jotform.com/answers/592757 with your question about making the lightbox scrollable.