How to change width and background color of Thank You page

  • Profile Image
    dr770
    Asked 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 ?

  • Profile Image
    BJoanna
    Answered 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
    dr770
    Answered 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
    BJoanna
    Answered 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
    dr770
    Answered 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
    dr770
    Answered 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
    Kiran
    Answered 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 noopener">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.