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 change width and background color of Thank You page

    Asked by dr770 on August 26, 2015 at 11:02 AM

    Hello,

    i need to change how thank you page looks, especially "max-width:100px" of #stage makes problems:

     

    http://i.imgur.com/mrtCibE.png

     

    where can i attach css for #stage ?

    thank width
  • Profile Image
    JotForm Support

    Answered by BJoanna on August 26, 2015 at 12:53 PM

    Is this the form you are working on https://www.jotform.com/form/51954882138364?

    I have checked mentioned form and you have set width of your form to be 100px. Because of that your thank you page is also 100px wide. 

    If you increase width of your form you will also increase width of your thank you page. You can increase width of your form inside of Form Designer.

    I have cloned your form and change the width of my cloned form to 1000px. Thank you page on my clone form looks like this. 

    Here is my cloned form: http://form.jotformpro.com/form/52374782930966? 

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image

    Answered by dr770 on August 26, 2015 at 01:13 PM

    Thank you very much for your helpfull answer!

    only last thing, how can i apply another background color to "Thank you" page?

  • Profile Image
    JotForm Support

    Answered by BJoanna on August 26, 2015 at 02:41 PM

    You can change background color of Thank You page by adding CSS code inside of Thank You page Wizard.

    You need to add this code:

    <div style="width: 100%; height: 100%; background-color: red; text-align: center;">

    Current code is here. 

    </div>

    1. Open the "Thank You Page Wizard".

    2. Click on Edit Page button.

    3. Then click on Source Code option. 

    4. Add mentioned code inside of Source Code window and click on OK.

    5. Save Changes.

    I have used background-color: red; but you can replace it with any other color.

    After you add this code your Thank You Page will look like this. 

    Here is my demo form: http://www.jotform.com//?formID=52374782930966 

    Feel free to clone it.

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image

    Answered by dr770 on August 27, 2015 at 04:29 AM

    Thank you again, but i meant the background of the whole page.

    Its defined with #stage { backround-color: #fff ...  }

    And i need #f8f8f8, like the rest of the page where i embed it:

    http://www.belgianbuttoncompany.be/pins_fr/base

     

    Thank you for your help

  • Profile Image

    Answered by dr770 on August 27, 2015 at 04:51 AM

    it looks like this: http://i.imgur.com/RMdhiCe.png

    I need to change this styles for thank you page:

    @media screen and (max-width: 1000px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape)
     
    background-color: #FFFFFF;
    }
    and this:
    #stage {background-color: #FFFFFF; ...
  • Profile Image
    JotForm Support

    Answered by Kiran on August 27, 2015 at 10:25 AM

    I've tried searching our forum and found this thread with a script provided by Abajan, one of our colleagues that helped in changing the background of Thank you page.

    Please try replacing the Thank you page HTML code using the following code:

    <div style="background: #f8f8f8; width: 100%; height: 100%; text-align: center; position: absolute; top: -8px; left: -8px;">

    <div style="background: #f8f8f8; width: 100%; height: 100%; text-align: center; position: absolute; top: 8px; left: 8px;">

    <h1>MERCI !</h1>

    <div style="text-align: center;">&nbsp;</div>

    <div style="text-align: center;">

    <div><span style="font-size: medium;">Nous avons bien re&ccedil;u votre demande de prix.</span></div>

    <div style="font-size: medium; font-family: Verdana;">Si vous &ecirc;tes int&eacute;ress&eacute;s dans nos autres produits,&nbsp;<a target="_blank" href="http://form.jotformeu.com/form/51924482317356" rel="nofollow">cliquez ici</a> svp.</div>

    </div>

    </div>

    </div>

    The thank you page should be displayed as below by replacing the code with the above.

    Let us know if you need any further assistance. We will be happy to help.