Overview

A confirmation message is shown to the user when they submit the form. Gravity Forms supports three different types of confirmation type

• Text: The text message is shown on the same page after form submission. The default value for this text is “Thanks for contacting us! We will get in touch with you shortly.”.
• Page: Using this method you can redirect users to another website page.
• Redirect: It can redirect users to another website after form submission.

In this article, we will learn how to style confirmation text. This can be done using the free Gravity Booster plugin as well as custom CSS. By the end of this tutorial you will be able to:

• Set width, border, background color, and padding for confirmation message container
• Set font alignment, font style, font size, line height, and font color confirmation text.

Styling Gravity Forms Confirmation Message

Styling the confirmation message is usually ignored by most of the webmasters, the reason being that it displays after form confirmation and it doesn’t affect the form conversions. However, a badly designed confirmation message can be bad because if the text is not readable or visible then the users won’t be able to understand what should be done.

To better understand the case let’s take the example of an e-commerce booking form where you tell the customer to check their email for booking details however, if the text is not visible or readable then they won’t know how to get the booking details. If your form notification email unfortunately lands in spam then there is no chance they will know about it.

To avoid such scenarios let’s check out the ways to style Gravity Forms confirmation messages.

Style Confirmation Message with Gravity Booster

Gravity Booster is a free plugin to style different parts of the form with a live preview of all the changes. It supports styling field labels, checkbox & radio inputs, dropdowns, and a lot more.

• Install and activate the Gravity Booster plugin directly from the official WordPress plugin repository.
• From your website’s backend navigate to Forms -> Booster.
• Select the form for which you want to design the confirmation message. Now the page will reload with all Gravity Booster design settings on the left sidebar and form preview on the right.
• Just above the form preview click on the edit icon next to the Selected Page label. Here from the dropdown select the Confirmation Page option. This will immediately load the confirmation message in the preview screen.
• Now from the settings sidebar navigate to the Confirmation Message section.

Here you will get the following styling controls

• Width: This sets the width of the confirmation message container. You can set different widths for desktop, tablet, and mobile.
• Font Alignment: You can align the confirmation message text to the left, center, right, or justify in the container.
• Font Style: This allows you to set the font style of message text to bold, italic, uppercase, or underlined.
• Font Size: The font size of confirmation text can be set in different units like px, em, rem, vh, and vw. You can set separate values for separate devices as well.
• Line Height: Usually confirmation messages are multi-line. This setting will control the space between multiple lines.
• Font Color: With this color picker control you can set any color for the confirmation message text.
• Border: This control affects the confirmation message container. You can set the border width, color, and type.
• Background Color: It sets the background color for the container. There should be sufficient contrast between text and background color so, that the message is easily readable.
• Padding: It controls the space between text and container border. You can change it from here for all sides ( top, right, bottom, and left ).

All the styling changes you make are live previewed and after making the changes don’t forget to click on the Save button at the top right corner.

Style Confirmation Message with Custom CSS

If you want to try the custom CSS message please note that you will need to add the following code in the style.css file of your child theme or use a custom CSS plugin.

Code Explanation:

In the above code replace FORMID with the actual ID of your form.

We are setting the container width and border, background color inside the body #gform_confirmation_message_FORMID selector. You can any other CSS properties you want inside the selector and they will get applied to the confirmation message.