How to change the background color of thank you message?

  • Profile Image
    leonardomitchell
    Asked on March 28, 2016 at 11:40 AM

    Hi there,

    This happens when I use a template form, on the Thank You page, it doesn't let me change the background colours that the default template form came with. It doesn't allow you to do it even on the source code. How do you go about amending this?

    Thanks

  • Profile Image
    ashwin_d
    Answered on March 28, 2016 at 01:02 PM

    Hello leonardomitchell,

    Do you want to change the background color of your form's thank you message?

    Please inject the following custom css code in your form and that should solve your problem:

    body.thankyou {

        background-color: rebeccapurple; /*Change to any color of your choice*/

    }

    The following guide should help you how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image
    leonardomitchell
    Answered on March 28, 2016 at 02:15 PM

    Hi there,

    I followed your instruction as per above to no avail. Help.

    Regards

  • Profile Image
    ashwin_d
    Answered on March 28, 2016 at 03:16 PM

    Hello leonardomitchell,

    This is strange. On which form you applied the custom css code. I did check your last edited form "Enrolment Form" and it does no have the injected css code. 

    I cloned your form and the injected custom css code deos work as expected. Please check the screenshot below:

     

    Do let us know the form with which you are having this issue with and we will take a look.

    We will wait for your response.

    Thank you!

  • Profile Image
    leonardomitchell
    Answered on April 15, 2016 at 02:08 PM

    Hello!

    Apologies for the very late reply. I can change backgrounds with forms that i've created from scratch but this doesn't seem to wok with 'template' forms despite amending the CSS as per your instructions. Would be great if you could look into this. Use the form 'Sign me up for English (ESOL) t1' to have a look, obviously cloning it etc.

    Thanks

  • Profile Image
    Ben
    Answered on April 15, 2016 at 03:57 PM

    I see what you mean.

    The best way to do this that would work for all cases is to do the following:

    1. Go to your thank you page (for editing)

    2. Click on change text

    3. click on view source button

    4. Add this code before all other code:

    <div style="background-color: orange; position: fixed; height: 100%; width: 100%; top:0; left:0">

    5. Add this code after all the other code:

    </div>

    - This is how it should look after adding the codes

    6. Save and test

    The bold is the color, and you can change that as much as you wish, but changing other style attributes will make it not work the same (depending on the change made).

    You can see how the clone of your form looks with the same:

    https://form.jotform.com/61055627033954

    * As mentioned this should work for all setups of the thank you pages. My colleagues code will work on all new forms.

  • Profile Image
    trickynek
    Answered on January 26, 2017 at 01:17 PM

    Hi, this solution is not viable for me because I need to change the body color. I have tried many ways to override the background color of body.thankyou  - is there any way to control that ?
  • Profile Image
    ashwin_d
    Answered on January 26, 2017 at 01:34 PM

    Hello trickynek,

    I have moved your question to a new thread so that we can address your issue separately. You will be answered here:  https://www.jotform.com/answers/1047650

    Thank you!