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

    Background color on Thank you window

    Asked by JORGE_GARCIA on October 11, 2015 at 02:08 AM

    Hi. I want to change the background color of the window Thank you. I thought going into Preferences>Form styles could change the color setting

    .supernova {
    background-color: #eef0d0;
    background-color: #eef0d0;
    }

    but it has not been possible. Can you help me?.

    http://www.jotform.com//?formID=52753916338362

    thank JotForm www background-color
  • Profile Image

    Answered by grade4pagasa on October 11, 2015 at 04:03 AM

    hi Jorge

    to change the background color, you need to edit the Thank You template.

    the JotForm Support Team could have an alternative solution that may suit your needs better. hope this helps for the meantime. i used a blank form for this example.

    once the form is open, 

    1. click the Thank You icon

    2. click the Edit Text button

    3. click the Source Code icon

    4. enter this code as the 1st line: <div style="background-color: #eef0d0;">

    5. type this at the bottom of the page: </div> 

    6. click OK then Save Changes. 

    7. click the Save icon for the changes to take effect.

    - Randy 

  • Profile Image

    Answered by JORGE_GARCIA on October 11, 2015 at 05:02 AM

    Hi Randy. This is the result. As you can see the entire window is not filled with the new color.

  • Profile Image

    Answered by grade4pagasa on October 11, 2015 at 12:59 PM

    hi again, Jorge

    i apologize for my confusion. i thought you just wanted to change the background color of the Thank You template from the menu bar (fig. 1). i'm not familiar with the end-result of the screenshot you gave. i also haven't seen the widget (and the page it shows after you click it) you used for the Preview button (fig. 2). 

    i'm not sure if we used the same approach. i was supposed to import your form so i can try to help but it gave me an error message saying: Unauthorized request. You do not have access to this form.

    what i did for this live form example is i used the condition to Change the Thank You message after submission (fig. 3). then i created a table so i can easily manipulate the contents (name, email, message ...). i also inserted a background image for the table and noted the dimensions so that when i created the table, i know what to put for the width and height (you'll be needing the expertise of the JotForm Support Team since i only know very basic). when you click the source code button, that's also where you can change the background color. 

    you can see the end-result of the example i made on fig. 4.

    - Randy

     

    fig. 1

     

     

    fig. 2

     

     

    fig. 3

     

     

    fig. 4

  • Profile Image
    JotForm Support

    Answered by Charlie on October 12, 2015 at 03:10 AM

    Hi,

    For the thank you page, you can use this class elements:

    /* background color or image of the thank you page at the back */

    .thankyou {

        background-color : #eef0d0 !important;

    }

    /* the element that covers or wraps the thank you */

    #stage {

        max-width: 700px !important;

        background-color: #eef0d0 !important;

    }

    You can paste that CSS code under the CSS tab in your Form Designer Tool, you can also add further styling on the classes I shared above depending on how you would like it to appear:

     

    In my end, this is how it looks like:

     

    Note: Please do make sure that you do not have any errors in your current CSS code, if you do, please correct them so that the changes will be applied correctly.

    Let us know how you would like to design the thank you page and we'll be more than to assist you.

  • Profile Image

    Answered by JORGE_GARCIA on October 13, 2015 at 03:57 PM

    For grade4pagasa

    Hi, Randy. Very grateful for your interest. I guess you use the preview is a plugin widget. Right?

    I have resolved the issue differently, because I wanted the user could change the message, seeing as aesthetically was on the postcard.
    You can check the result here.

    http://charmingpostcards.blogspot.com.es/2015/08/acacia-a.html


    The only thing I need is to put a 'Go back' button in the 'Thank you' page draft, but I can not use JS, as it only supports HTML.
    If you know of some way, I'd appreciate tell me. A greeting. Jorge.
  • Profile Image

    Answered by Carina on October 13, 2015 at 06:05 PM

    I moved your last question to a new thread as it is a different situation and we aim at having only one question per thread. You can find it here:

    http://www.jotform.com/answers/680727 

    Let us know if we can assist you further.