Overview

Gravity Forms is one of the best form plugins if you consider the functionality it offers. However, the aesthetics of a form is as important as functionality when it comes to conversions. Borders of the form container and field inputs help it to stand out from the rest of the page and help drive more conversions.

By the end of this tutorial, you will be able to

• Set border color for form container, input fields, textarea fields, and dropdown fields
• Set border width for form container, input fields, textarea fields, and dropdown fields
• Set border style for form container, input fields, textarea fields, and dropdown fields
• Set border radius for form container, input fields, textarea fields, and dropdown fields
• Highlight the border when an input, dropdown, or textarea field is clicked

Set Border for Gravity Forms

Border constitutes mainly four properties viz. Border color, border radius, border with, and border style. Here is an introduction to each of these properties.

• border-width: This is the width of the border for all four sides of the form. Its values can be in px, em, or % or they can be set to thin, medium, or thick.
• border-style: This is the type of border. It can be set to solid, dashed, dotted, ridge, groove, inherit, double, or outset.
• border-color: The value of this attribute defines the color of the border.
• border-radius: This attribute defines the curvature for the border corner. Its value can be in px, em, or %.

Each of these properties can be set up using a free WordPress plugin or with custom CSS. You will learn both these techniques and choose the one which fits your needs.

Steps to Set Border for Gravity Forms with Plugin

• Install and activate the Gravity Booster plugin.
• From your website’s backend go to Forms -> Booster. 
• Select the form for which you want to set border properties. The page will reload when you select the form. It will show all the form settings on the left sidebar and the preview in the right content area.
• Go to the Form Wrapper section under the Styler panel. Here you will see the border control with an input to set width. If you click on the left of the input then it opens up the controls for setting up the border color and style as well.
• There is also an additional control to set the border width of the form container.
• Similarly, there are sections for input fields, text area fields, and dropdown fields with similar border properties as form wrappers. You can set borders for these fields from there.
• After you have set up the border then click on the Save button to make your changes live.

Steps to Set Border for Gravity Forms with CSS

If you plan to use custom CSS for setting up the border properties of form container, input, textarea, and dropdown fields then you can use the following code. I have added comments in the CSS code itself so, that you can understand which selector is targeting which element of the form.

Code Explanation

In the above code replace FORMID with the actual id of the form.

We are adding the border width, border color, border style, and border-radius properties on all the different elements of the form.
You can remove the! important from the above code if you want. It is there to make sure that your theme or any other plugin doesn’t overwrite this custom CSS code.

Highlight Gravity Form Field Border on Click/Focus

Highlighting a field that is focused gives a clear visual cue about the active field. This becomes very important when someone is navigating between fields using a keyboard. The highlight or change effect can be achieved using both the help of plugins as well as Custom CSS. Below you will find details for both methods.

Highlight Field Border Using Bootstrap Design Addon

Bootstrap for Gravity Forms is an addon that will automatically add the highlight to all form fields including inputs, textarea, and dropdown fields. It is easy to use and you can also change the border highlight color. Using the addon will not only add border highlight but it will also add cohesive design to all the form elements.

You can check the demo form below to see what a form with a Bootstrap design addon looks like.

Bootstrap design demo form

To explore more features of the addon you can check the Gravity Forms Bootstrap addon detailed guide.

Highlight Field Border Using Material Design Addon

Material Design for Gravity Forms addon also automatically adds the focus and click effect to highlight the field borders. It also adds a cool animation as well for the field label. The color for the material design border highlight can also be changed using a color picker, hex, RGB, or HSL code.

It offers two different types of styles for field borders which you can check in the below demo forms.

• Outline design demo form
• Filled design demo form

To learn more about the addon you can use the Gravity Forms Material Design guide.

Highlight Field Border Using Custom CSS

The custom CSS method is recommended only for users who have some experience using it in the past. If you are not comfortable in doing custom code on your website then you should use the above no-code solutions. 

Below is the custom CSS for highlighting/changing the border color and other properties of input, textarea, and dropdown fields in focus mode.

Code Explanation

Replace the FORMID with the actual form ID.

In the above code, we are setting the CSS border and box-shadow properties for inputs, textarea, and dropdown fields when they are in focus mode.

You can change both the border-color as well and box shadow values to match the brand colors of your website. The value of border width, style, and radius can also be set if you want them to be different in focus mode.