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

    How to make thank you message replace form on submission

    Asked by rpmnational on May 28, 2015 at 03:45 PM

    Hi there,

    I tried to embed the form on http://speedy.smcnational.info into the slider on the home page using the source code. For some reason, it wasn't working at all. I removed the javascript associated with the jotform and then it worked fine, except that it links out to the thank you message instead of replacing the form with it. When I use an iFrame, the form doesn't look so good. What's funny is that everything works fine on http://speedy.smcnational.info/test-page-1/. Any ideas?

    Thank you,

    Luke Baird

    Page URL:
    http://speedy.smcnational.info

    Thank You message iframe script
  • Profile Image
    JotForm Support

    Answered by Mike_G on May 28, 2015 at 05: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.

    You will just copy the <iframe> section: 

    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. 

  • Profile Image

    Answered by wjkirby287 on May 29, 2015 at 03:42 PM

     

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

     

    Here's what it looks like with the iFrame:

    I removed the javascript as you said.

    Thank you for your help.

  • Profile Image
    JotForm Support

    Answered by Mike_G on May 29, 2015 at 06: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. 

    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: 

    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>

    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.

    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.