Gravity Forms: Custom Styling and Formatting Complete Tutorial

By Neil on May 8, 2014

This guide / tutorial shows you how to style Gravity Forms. Each individual field in the form is targeted via CSS and styled. The field names are also placed in to the placeholder text areas and styled, and the form is mobile responsive.

You can see the default (un-formatted form) here and the final formatted form here. Normally when you embed a Gravity Form is has very basic formatting that is picked up from the WordPress theme you are using. This may be ok but sometimes the forms do not fit in with your overall website design or the form is not quite formatted correctly and looks pretty bad. Luckily you can target every single element of a Gravity Form and style it exactly how you like with a little CSS.

Step-by-step tutorial for Formatting Gravity Forms

Step 1:Create a new form. In your WordPress dashboard hover your mouse cursor over the ‘Forms’ tab on the left-hand side and click on ‘New Form’. Give your form a title and then click ‘Create Form’. In the Form Editor page create three ‘Single Line Text’ fields, one ‘Website’ field, one ‘Drop Down’ field, and one ‘Paragraph Text’ field. Watch this video if you need more information about creating a Gravity Form.

Give the three ‘Single Line Text’ fields a title (or Field Label) of First name, Last name, and Email respectively, and check the box specifying that they are required fields. Put a Field Label of ‘Your website (optional)’ for the website field, and ‘Extra details about help needed’ for the Paragraph Text field.

Edit the Drop Down field and remove the Field Label. For this particular field we do not want to show a Label in the form, and instead we will add several selection options for the user to choose from. The first selection option will be shown in the field placeholder area. This is different from the other fields which will use their Field Labels in their placeholder areas.

Edit the Drop Down field and under the Choices area fill out the different selection options. Make the first choice say ‘Select package or topic *’ because this is what will show by default in the form, and therefore acts as a prompt to the user to make a selection. Add ‘Genesis install package’, ‘Types & Views install package’, ‘ WordPress help’, ‘Genesis help’, ‘Gravity Forms help’, ‘Types & Views help’, and ‘Other’ into the other choices areas. To add more choices click on the ‘+’ icon to the right of the choice fields. See Figure 1.

Figure 1 Editing a Drop Down field in Gravity Forms.

Step 2:Embed the Gravity Form into a page or post. Open up your Edit Page or Edit Post and click on the Add Form tab. Select the correct form and un-check the Display form title and Display form description boxes and click the Insert Form button. Save your updates and view your page/post. You will see your newly embedded Gravity Form (note that the exact formatting of this form may vary with the WordPress theme you are using). Figure 2 shows the un-formatted Gravity Form placed in the Parallax Pro theme by StudioPress.Figure 2 Un-formatted Gravity Form embedded into a WordPress page.

Step 3:Configuring key Gravity Forms settings. Gravity Forms comes with some pre-defined styling, and you need to alter the default settings to allow you to override these settings. In the Forms tab in the WordPress dashboard select Settings from the list. Set the CSS Output settings to ‘No’ and the HTML Output to ‘Yes’. Save settings.

Step 4:Configure the placeholder text. By default the Field Labels are above the respective fields, however we need the Field Labels to be within the field areas. To do this we use a plugin called ‘Gravity Forms – Placeholder add-on’. Search in your dashboards Plugins area for this plugin and install/activate it. Once activated you need to navigate to your form and click on Form Settings (not the general settings but the individual form settings). In the field ‘CSS Class Name’ input the word ‘gplaceholder’. Remember to update your form settings. Now when you refresh your page with the form on the Field Labels will be within the field areas.

***Note that more recent versions of Gravity Forms may not be compatible with this plugin. You can search the WordPress plugins via your dashboard for a new plugin, or read this as it may help solve this issue without using a plugin at all: https://www.gravityhelp.com/gravity-forms-v1-9-placeholders/***

You can control how this placeholder text is formatted by adding some CSS styling code. In the WordPress dashboard go to the Appearance tab and click on Editor. This opens the style.css Stylesheet for your theme. Scroll to the bottom you this style.css Stylesheet and input the following code. After you enter this code and save the updates, refresh your form page to see how the form has changed.

The first part is a label/comment so you know what this code does when you refer back to it at a later date. The code is repeated to make sure it is compatible with different versions of web browsers.

Here we are styling the font colour and size.

Step 5:Formatting the Gravity Form Fields. You can target each individual field to control the formatting of your Gravity Form. To do this you need to take note of your form ID, the ID’s of each field, and the type of field (e.g. single line text field, website field etc.). You can get all this information from the Form Editor page of your form. See Figure 3.

Figure 3 Form editor highlighting the (1) form ID, (2) field type, and (3) field ID.

You have the option to apply formatting to all forms at once, individual forms, field types, and individual form fields. Here we will target the individual form fields. The CSS code to target individual Gravity Form fields is show below:

input[type=text] specifies that you are targeting a single line text field. Other field types targeted in this tutorial are:

select – use for drop down field types.textarea – use for paragraph text field types.input[type=url] – use for website field types.

The formatting below is for the form on Neilcurtis.me. Your ID’s will probably be different.

Step 5.1 – Styling the First name field.
Our goal is to set a position, width, height, margin-bottom, margin-right, and a border colour. This field has an ID of 1 and is a Single Line Text field. See the CSS styling below.

*Note the use of the !important in the width line. This is because Gravity Forms default styling was still taking effect, and the use of !important here overrides this default code and uses the formatting defined here. The use of the !important is not always viewed as the best way to code in CSS, but for situations such as this where we are targeting only single styling elements it is acceptable.

Step 5.2 – Styling the Last name field.
Our goal is to set a position, width, height, margin-bottom, and a border colour. This field has an ID of 2 and is a Single Line Text field. See the CSS styling below.

Step 5.3 – Styling the Email field.
Our goal is to set a position, width, height, margin-bottom, and a border colour. This field has an ID of 7 and is a Single Line Text field. See the CSS styling below.

*Note that I have kept the float: left styling, but to ensure the email field is always on it’s own line I have included a clear:both element. This stops any other elements being positioned to the left or to the right of this email field.

Step 5.4 – Styling the Website field.
Our goal is to set a position, width, height, margin-bottom, and a border colour. This field has an ID of 3 and is a URL field. See the CSS styling below.

*Note that here we need to assign a font-size and a color to style the text in this field. This is because we do not use the Field Label as the placeholder text like we do for all other fields (remember we did not assign a Field Label for this field – see Step 1).

Step 5.6 – Styling the Paragraph field.
Our goal is to set a position, width, height, margin-bottom, and a border colour. This field has an ID of 4 and is a Text Area field. See the CSS styling below.

*Note that this field has a greater height because the user will likely write more when completing this field. Also the width is set as a % because this field will be wide but it will shrink as the screen size shrinks (e.g. when viewed on a tablet or smartphone). Because the % width is less than 100%, there is the potential for this field to become too small, and therefore a min-width: 270px has also been included so that the field width is never less than 270px.

Step 5.7 – Formatting the Submit button.
In addition to the input fields we need to target the submit button. The following CSS code does this:

Step 5.8 – Creating a DIV around the form.
Because the fields are a set width they do not stretch across the full screen. To allow us to align the form centrally we can create a DIV around the Gravity Form to control the forms position on the page. Here a DIV called ‘consultantholder’ is created and the form is placed in this DIV.

*Note that margin: 0 auto; aligns a DIV that is less than 100% centrally. A margin-top and padding-top is also included to space the form out correctly and a border-top is included to show a line above the form.

Step 5.8 – Changing the submit button text.
In the theme used in this tutorial the default word on the form submit button is ‘GO’. This can easily be changed to whatever you want in the Form Setting area of your Form Editor page. There is a Form Button area and a field for Button text. Here we use ‘Get in touch >>’.

Summary

It is very easy to set-up and embed a Gravity Form on to your website, but sometimes you want to style these forms to fit in with your website design better. This step-by-step tutorial and video show you how to fully customise a Gravity Form from start to finish.

If you have any comments or questions about this Gravity Forms tutorial please leave a comment below.

LIKE WHAT YOU’VE READ?

I publish new tutorials all the time so it would be great let you know when something is ready for you to check out. I also have lots more to share with you about how to easily customize and style your WordPress website, so why not join my gang.

No problem Peter. I spent many hours trying to do exactly what you wanted to do (float 2 fields next to each other) but no matter what I tried it wouldn’t work. Then I discovered this Output CSS setting and it made my live much easier.

I have a similar issue in the gravity form, I tried to increase thickness of the border for the input boxes(eg. textboxes). I updated the code and also I turned the output css setting to NO and the HTML to Yes, but all the alignment of the form was all over the place. If i set it viceversa, no difference in the border style. Any assistance?

Neil – when I turn off output css and turn on output html5 – I lose all styling for my drop-down selector. In your tutorial, your drop-down seems to retain styling (mine has the options all listed under the box). Any suggestions?

Hey Neil. Of course it’s my theme (always the last thing I check). I’m using Pagelines DMS. I’ve managed to get the styling I want with both css and html5 turned on. Thanks for the tut – set me on my way!

Hey Neil,
I watched several of your videos today to figure out several Gravity Forms styling issues that I’ve been having for a while. Excellent videos and taught me exactly what I needed to know. With one exception. I noticed one viewer had left a comment that he had to turn off W3 Total Cache to work on his code. I had to do the same thing. But when I turn it back on, all my styling disappears. Help! What did I do wrong? Here’s the link to the page in question. Total Cache is off and the form looks horrible.http://www.theurldr.com/mini-webinars/registration-how-to-do-keyword-research/

Hi Kim, if the styling works when you turn off the cache plugin then it seem like it must be this that is causing the problems. Did you clear all cache etc from the plugin in your WordPress dashboard, as it may be still remembering an old cached view.

Although, if you say the W3 Total Cache is off now and I see the un-styled form it is a bit strange.

Wondering if you could help me out with this one. I am using reCaptcha with my form. Following is the target CSS taken directly from the Gravity Forms website, but it doesn’t seem to actually be targeting that field/container/whatever you call it. 🙂 I want to change the width of the entire container, and move the left margin over.

My form is a work in progress at pamblackmanonline.com/business-review

your tutorial is really good, and even as a newbie I managed to follow it and slightly adapt it to create a Donate form for the charity I work. However, I’ve run into a couple of small problems which I can’t seem to solve (I’ve spent the better part of a day looking for answers on the web, and tried quite a few bits of css code, but with no success). The two problems are:

1) The “Email” field stays stubbornly alongside the First and Last name field, and refuses to be formatted like the others (i.e. blue borders, etc). Why is that? I’m using the exact same code you’ve put, both the Form and the Field IDs are correct, the rest of the boxes all display correctly. What am I doing wrong?

2) How do I get rid of the red asterisk which appears by default in the “Field Label” of any Gravity Form whenever you tick the “Required” checkbox under “Rules”?

Never mind! I finally managed to solve problem #1!!! It was simply a question of changing the CSS code of section 5.3 above: I changed the bit with “.gfield input[type=text]” to “.gfield input[type=email]” and now it works!

I still haven’t found a way of solving problem #2 though, so if anybody has any suggestion, please let me know.

I really appreciate your help. May I abuse it a bit longer? The drop-down field I’m using (which displays amounts for suggested monthly donations) has an “Other” field, which when selected displays a “Number” field where potential donors can put their own amount for a one-off donation. I have two remaining problems with this:

1) I can’t get the “Number” field to have the same formatting as the rest (i.e. blue border, etc). The code I’m using (without success!) is an adaptation of the those you’ve presented above:

The only thing that change is the field type, which is “number”. And yet it’s not working.

2) Another less urgent problem is: if I were to switch from a dropdown menu to a radio button menu, how do I amend the CSS to make sure that the radio button field is formatted in a way similar to the other text fields? I mean with a blue border, etc? I’ve tried to create a new radio field, and then used the following code:

Hi Luca, unfortunately I don’t have a lot of time to run extra tests and I have not looked at modifying a “Number” field. Like I suggested to Pam above perhaps the Gravity Forms Support can help?http://www.gravityhelp.com/support/

As for the radio buttons, I cover formatting these in quite a bit of detail in this video (skip to about 32mins for the radio button formatting.

Great tutorials, thanks very much. I am new to Gravity Forms and found your site when searching how to remove the asterisk. I love this advanced styling and have tried to implement parts of it, but I’m really struggling to change the height of the field boxes.
I want all the boxes to be the same height as the select boxes.
Can you see where I’m going wrong?http://dj-hire-london.co.uk/test3/

Hi Michelle,
did you target the select fields and the text fields separately? In the video (on this page) you see I use “type=text” to target the single line text fields and the “select” for the select fields.

Also sometimes you need to put “!important” (without the quotes) in the CSS to overwrite the default GF styling.

Hi Neil,
I love and appreciate all your wonderful tutorials, they are really great and a life saver. Now I have been using GF for a while and I have my own CSS that I use to all forms. I have followed through your tutorials and installed the place holder plugin which has worked fine but noticed GF “Anti-spam honeypot” fields are now showing at the bottom of the forms. I have searched and looked for ways on how I can make the fields hide to no avail. Could you be so kind to help us on this issue.

This is not something I have worked on before. If I get a chance I will look into it, although time is scarce at the moment. Hopefully you will find an answer somewhere or someone else can jump in here.

Hi Neil,
I hope you could help me. I’m trying to create a submit post form with gravity forms. I followed the instruction from gravity site, but i realized that apart the body text field, neither image or custom text field are shown to new post. The image for example are uploaded to database but not showing in the post.
Thnx for your help!

1. Is the Float – I can only get the fields to line up side by side if I do the gravity CSS “GF_lefthalf” etc. Struggling with the float.
2. Can’t seem to override the button CSS either. I just have the standard button.

Firstly, I followed your instructions and for the “contact” form everything worked perfectly expect I cant seem to get the submit button to center or at least align with the rest of the form. I tried putting a div around the form and centering but it had no effect.

Secondly, the “drop fat get fit” form I can get the “Last Name” and “email” to format but whatever I do the “first name” wont change, strangely the submit button has centered, even though I did exactly the same thing as for the “contact” form, i put a div around the form and centered it and the submit button centered.

I created a duplicate form in the same way to see if I could get the first name to work but the exact same thing happened. First Name would not format. I have copied and pasted the exact same code that I used for “last name” and “email” which have worked so there is no mistake with the code, it makes me think that the ID for “first name” is incorrect. But on the form creator it definitely says ID 1 and that is what i have used.

Hi Neil, great tutorial and it ‘mostly’ worked for me. All my input[text] fields are formatted as desired, but I have an input[textarea] field that refuses to play by the new rules.

My code follows. Note I ‘trimmed’ string to field ID in the course of my experimentation but this did not affect final output in any way. Nor did re-inserting the full string to the errant field (#field_10_5)

I seem to be missing a step however- as the styling is fine when im entering in the data, then when the person submits the form and downloads it all the styling is removed and the PDF is just the bare basic text.

Do I have to copy the styling into one of the template.php files to retain the look that was created and the layout of the fields?

Hi Neil, great tutorial. The only thing I can’t seem to figure out is how to change the gray color text color on my field description. I’d like make it black, I’ve tried literally everything and can’t seem to figure out.

Great tutorial. I am having a problem locating the code to change the color and font of my placeholder names text that is gray after I add the plugin Gravity Forms – Placeholders add-on. You say to change the .css code in my style.css, but I am using a child theme and it does not show this code in my style.css. I am using the Armada Theme.

Hi Neil, im really new to this but keen to learn what you have showed and is obviously working for others but not me.

I realise that this is an old post and i hope you get this. But i am stuck right back on step . . . Step 4: Configure the placeholder text. . . . i followed this to the letter but nothing changed. Also i noticed that in the editor page, for this line of code – font-family: @font-primary; it had a red x beside all 4 sets of code as in an error. Why would this be?

I did save it though and refreshed my page but nothing changed at all.