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

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.

 

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

 

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

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). 

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.

 

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)

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"

      onDISABLEDload="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.