How to change width and background color of Thank You page

  • 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 ?

  • BJoanna
    Replied 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.

    How to change width and background color of Thank You page Image 1 Screenshot 30

    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. 

    How to change width and background color of Thank You page Image 2 Screenshot 41

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

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

  • dr770
    Replied on August 26, 2015 at 1:13 PM

    Thank you very much for your helpfull answer!

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

  • BJoanna
    Replied on August 26, 2015 at 2: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.

    How to change width and background color of Thank You page Image 1 Screenshot 40

    3. Then click on Source Code option. 

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

    5. Save Changes.

    How to change width and background color of Thank You page Image 2 Screenshot 51

    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. 

    How to change width and background color of Thank You page Image 3 Screenshot 62

    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. 

  • dr770
    Replied on August 27, 2015 at 4: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

  • dr770
    Replied on August 27, 2015 at 4: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; ...
  • Kiran Support Team Lead
    Replied 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:

    How to change width and background color of Thank You page Image 1 Screenshot 30

    <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 href="http://form.jotformeu.com/form/51924482317356">cliquez ici</a> svp.</div>

    </div>

    </div>

    </div>

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

    How to change width and background color of Thank You page Image 2 Screenshot 41

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