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

    Thank You page keeps losing its color while on Form Designer.

    Asked by Tellmemore on May 12, 2016 at 10:58 PM
    Also, my Thank You page keeps losing its color--in fact, it currently changed itself to white.  It should match the colors of the form.

     

  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 13, 2016 at 12:04 AM

    I'm not sure how are you changing the background color of your thank you page, it has the default color and I cannot find the custom CSS code to change its background, but try injecting this CSS code: 

    Changes the background color of the thank you message container.

    #stage.form-all{

        background: green;

    }

    Changes the background color of all the thank you message, the full background. 

    .thankyou{

        background: red;

    Replace the highlighted value with the color that you want to have in our thank you page, here is my cloned form of yours where I did apply this CSS code take a look to see the difference of each code: https://form.jotform.com/61329017829964 

    Follow the steps on the guide below to inject the code to your form: 

    How-to-Inject-Custom-CSS-Codes

     

  • Profile Image

    Answered by Tellmemore on May 13, 2016 at 03:48 AM

    Is your form supposed to be white?  Also, **I** am not changing the color of the Thank You page--it is changing itself.

  • Profile Image

    Answered by Tellmemore on May 13, 2016 at 04:15 AM

    Well, that CSS code didn't quite work ... the Thank You page should match the form exactly, and so should look like my jpg--but in these colors: #468966 for the border area behind the form (like the purple in my jpg); and #FFF1CA for the form (like in my jpg sample----see the Thank You for form 60955865896175 as an example). 

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 13, 2016 at 04:55 AM

    I have now updated the custom css to show the colors that you have provided. Please remove the previous css and replace it with the one below.

    .thankyou {

        background: #468966 !important;

    }

    #stage.form-all {

        background: #FFF1CA !important;

    }

    If you need further assistance, please let us know.

     

  • Profile Image

    Answered by Tellmemore on May 13, 2016 at 04:28 PM

    I did that already before I sent you my last message.  The issue is that the background color, the #468966, is not surrounding the form.  If you Submit my other form, #60955865896175, you'll see that the purple background is around all 4 sides of the form.
    But on my form 60965885817171, the green background on the Thank You card is only at the bottom of the form.

    So, how do I get the green background around all 4 side of the form? (See it in action on my site: https://sites.google.com/site/tc2wedd/recpt)

  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 13, 2016 at 05:36 PM

    I have tested your form and I was able to see the same, the background color is only showing at the bottom of your form. 

    This is happening only when the form is embedded, when the form is being submitted using the standalone version then it is displaying the background color around all the thank you page, I would suggest you to increase the width of your form in order to show the background color completely, currently the width of the form is set to be dynamic and it will fit the width of the element where the form is being embedded, try to set a fixed width, embed the form using the code below: 

    <iframe

          id="JotFormIFrame"

          onload="window.parent.scrollTo(0,0)"

          allowtransparency="true"

          src="https://form.jotform.com/60965885817171"

          frameborder="0"

          style="width:800px;

          height:539px;

          border:none;"

          scrolling="no">

        </iframe>

        <script type="text/javascript">

          window.handleIFrameMessage = function(e) {

            var args = e.data.split(":");

            var iframe = document.getElementById("JotFormIFrame");

            if (!iframe)

              return;

            switch (args[0]) {

              case "scrollIntoView":

                iframe.scrollIntoView();

                break;

              case "setHeight":

                iframe.style.height = args[1] + "px";

                break;

              case "collapseErrorPage":

                if (iframe.clientHeight > window.innerHeight) {

                  iframe.style.height = window.innerHeight + "px";

                }

                break;

              case "reloadPage":

                window.location.reload();

                break;

            }

            var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false;

            if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) {

              var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)};

              iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*");

            }

          };

          if (window.addEventListener) {

            window.addEventListener("message", handleIFrameMessage, false);

          } else if (window.attachEvent) {

            window.attachEvent("onmessage", handleIFrameMessage);

          }

          if(window.location.href && window.location.href.indexOf("?") > -1) {

            var ifr = document.getElementById("JotFormIFrame");

            var get = window.location.href.substr(window.location.href.indexOf("?") + 1);

            if(ifr && get.length > 0) {

              var src = ifr.src;

              src = src.indexOf("?") > -1 ? src + "&" + get : src  + "?" + get;

              ifr.src = src;

            }

          }

          </script>

    If after embedding the form with the width value fixed it is not displaying correctly I would suggest you to check the code and style of your website, it seems like you are embedding the form using a widget/plugin since it is being added within an iFrame, this iFrame has less width than the needed to display your form properly, please check this style and also make sure all the HTML elements where the form is being embedded have the proper width. 

    This is the class that will help you to identify the element that contains the form: sites-embed-content sites-embed-type-ggs-gadget

    You will need to set the width using a CSS code similar to this: 

    .sites-embed-content .sites-embed-type-ggs-gadget{

    width: 800px;

    }

    Also, the iFrame where the form is being embedded, the iFrame code generated by your website, needs the width to be set to 800px, here is a screencast about how should be the result of modifying the width of the HTML elements:

    Otherwise your form will show the background color only at the bottom.

    Hope this helps.