If you use the default Thank You Page with Formstack the appearance settings are the same as the Section settings. This means the background color, text color, text size, spacing and font family are all the same as the Section settings for the form. However, if this is not ideal, you can use CSS to edit just the Thank You Page to avoid this.
If you are not familiar with CSS on Formstack forms, please get started here!
First, you will want to figure out what you want to edit, the Default Thank You Page is shown below and each section that is normally edited is labeled with a number.
These are the four main options you can edit:
1. The Submission Checkmark
??(#fsSubmissionCheckmark)
The most common edits for this are to remove it or change the color.
Remove the checkmark:
#fsSubmissionCheckmark{
display: none;
?}
Change the color:
Unfortunately, the checkmark is an image so you can't change the color but you can replace the checkmark with another image. All you need is the URL of the image you want to replace the checkmark with and you can then enter it into the CSS below where it says, "ENTER URL HERE"
#fsSubmissionCheckmark {
background-image: url("ENTER URL HERE");
}
Once you have the image replaced, you may need to edit the size of the image, check out the CSS below for how to do this:
?#fsSubmissionCheckmark {
margin: 10px 0; < ---- Adjusts the spacing around the image
padding-top: 200px; <----- If your image is taller than ours, you can use this to make the space where the image was entered larger.
background-image: url("ENTER URL HERE");
background-size: 417px; <--- You can use CSS with background-size to adjust the size of the image.
}
If you don't want to adjust the image with CSS, you can also use the "Custom Message" option and add an image with the editor there. This does not require any Custom CSS.
More information on making a Custom Message can be found here!
2. Thank you page heading text
??(.fsBody .fsForm .fsTable .fsSectionHeading)
This is the "Thank You" text on the Default Message. The most common requests to change here are color and alignment.
To change the color of the text to blue*:
.fsBody .fsForm .fsTable .fsSectionHeading{
color: blue;
}
To change the alignment of the text:
.fsBody .fsForm .fsTable .fsSectionHeading{
text-align: left;
}
3. Thank you page paragraph text
??(.fsBody .fsForm .fsTable .fsSectionText)
This is the text that says, "The form was submitted successfully". The most common edits for this are text size and space around the text.
To change the font-size:
??.fsBody .fsForm .fsTable .fsSectionText{
font-size: 20px;
}
To change the spacing around the text:
??.fsBody .fsForm .fsTable .fsSectionText{
line-height: 30px;
}
4. The message background
??(.fsBody .fsForm .fsTable .fsSectionHeader)
This is the grey background that you see in the picture above. It's the background for the Thank You Message. The most common edits for this are to have it gone or to change the color.
To remove the background:
.fsBody .fsForm .fsTable .fsSectionHeader{
background-color: transparent;
}
To change the color to blue*:
.fsBody .fsForm .fsTable .fsSectionHeader{
background-color: blue;
}
If you don't want the color to be blue, you can enter whatever color you need using a hex code. You can use this site to help find the hex code for the specific color you would like.