How to make thank you message replace form on submission

  • rpmnational
    Asked on May 28, 2015 at 3:45 PM

    Hi there,

    I tried to embed the form on http://speedy.smcnational.info/test-page-1/. Any ideas?

    Thank you,

    Luke Baird

  • Mike_G JotForm Support
    Replied on May 28, 2015 at 5:57 PM

    Could you try to embed the <iFrame> code on the website: http://speedy.smcnational.info// but do not include the <script> section of it to avoid conflict with your web site's <script>. 

    So instead of you getting the whole <iframe> code and the <script> included with it.

    How to make thank you message replace form on submission Image 1 Screenshot 30

    You will just copy the <iframe> section: 

    How to make thank you message replace form on submission Image 2 Screenshot 41

    and embed it to you website.

    I would recommend for you to use the iFrame section if you would like to have the Thank You Message appear same place as the form after submission as this might not work really using the source code of the form. 

    Let us know how this solution works for you. Thank you. 

  • wjkirby287
    Replied on May 29, 2015 at 3:42 PM

     

    The problem with using the iFrame is it doesn't look right. Here's what i want it to look like:

    How to make thank you message replace form on submission Image 1 Screenshot 30

     

    Here's what it looks like with the iFrame:

    How to make thank you message replace form on submission Image 2 Screenshot 41

    I removed the javascript as you said.

    Thank you for your help.

  • Mike_G JotForm Support
    Replied on May 29, 2015 at 6:39 PM

    I would like to apologize if my previous answer didn't work. I understand that this is what you would like to happen. 

    How to make thank you message replace form on submission Image 1 Screenshot 50

    In order for you to accomplish that, you need to, first, change where your iframe code is located on your web page. 

    I have replicated your website and placed the iframe here: 

    How to make thank you message replace form on submission Image 2 Screenshot 61

    Notice that I've added an "id" attribute on <p> so we may be able to add custom CSS to it later on. Then, I have updated the style="width:100%; height:360px; border:none; border-radius:10px !important;"

    Then, add this CSS codes on your website, inside <style>

    How to make thank you message replace form on submission Image 3 Screenshot 72

    Here's the code: 

    #formcontainer{

    padding:0px !important;

    width: 380px !important;

    margin-left: 0px !important;

    margin-top:-20px !important;

    height: 360px !important;

    border-radius: 10px !important;

    }

    After all those, we need now to edit the form by adding Custom CSS to it using this guide.

    How to make thank you message replace form on submission Image 4 Screenshot 83

    Here's the code: 

    .form-all {

    padding:0px !important;

    margin:0px !important;

    height: 360px !important;

    padding-top:30px !important;

    }

    .jotform-form{

    padding:0px !important;

    width:380px !important;

    height: 360px !important;

    }

    .form-input{

    width: 200px !important;

    }

    .form-label{

    float: left !important;

    text-align: right !important;

    width:100px !important;

    }

    .form-line{

    padding: 0px 19px !important;

    }

    #input_2{

    height:50px !important;

     

    }

    That's it. I hope this helps. Let us know if you need further assistance and/or clarifications and we will be glad to help you. Thank you.