Table of Contents
Overview
Placeholder text is useful to let users tell what type of information should be filled in the field like an email field can have a placeholder ‘yourid@gmail.com’. If you have hidden labels or sub-labels for your fields then placeholders can be used as an alternative to labels.
If you are using Gravity Forms then you should have noticed that the default styling of placeholders doesn’t look good. Sometimes the themes also mess up placeholder design resulting in a bad experience for users which can ultimately hurt form conversion.
Methods to Style Gravity Forms Placeholder Text
There are two methods with which you can regain full control over your placeholder styling.
- Using Gravity Booster plugin
- With Custom CSS
Both methods come with their own set of advantages. I will guide you to use both of them in this tutorial.
Style Gravity Forms Placeholder with Gravity Booster
Booster for Gravity Forms is the best solution for those who don’t want to use CSS classes or add code in their theme files to design the form. It lets you create a beautiful and responsive design with easy to use settings and controls.
Steps to Style Placeholder text with Gravity Booster
- Install and activate Gravity Booster from the official WordPress plugin repository.
- Now go to Forms -> Booster.
- Select the form that you want to design and the page will automatically reload.
- Once the page is reloaded then navigate to the Placeholders section.
Here you have the following settings.
- Font Style: This setting lets you make placeholders bold, italic, uppercase, and underline. All you have to do is to click on the appropriate button and the changes will be previewed to you instantly.
- Font Size: This setting lets you enlarge or decrease the size of the placeholder text. There are separate columns for desktop, tablet, and mobile font sizes. To preview how the placeholders look on different devices, you can click on the desktop, tablet, and mobile icons under the font size setting.
- Font Color: This setting lets you change the color of placeholders. You can use the color picker to select the color or input the hex code.
Styling placeholders are fairly simple using Gravity Booster but it only has the above settings. If you want to change any other property of placeholders then you have to use custom CSS for that.
Style Gravity Forms Placeholders with Custom CSS
If you plan to use custom CSS then it can be added under Customizer -> Additional CSS. Below I have given the CSS classes that you should target for styling placeholders in Gravity Forms.
Code Explanation
The above code contains #gform_wrapper_1, where 1 is the form ID which we want to target. You should replace the 1 with your form ID.
We have used the color:pink; in all the CSS selectors. This will change the text color of placeholders to pink color.
You can add as many CSS properties as font-size, font-weight, margin, padding etc in the selector to style the placeholder text as you need.
Complement Placeholder Text with Icons & Tooltips
Placeholder text is great for giving small instructions like showing the pattern of how the field should be filled. You can further complement the instructions with field icons and tooltips. Both these things will make you form visually more attractive as well provide helpful visual cues to users for filling out the fields.
Icons for Gravity Forms Inputs
Icons for Gravity Forms inputs can give visual cues regarding the field. Let’s say you have an email field then showing an icon with an email icon will not only make it look better but also it also make it immediately clear about the kind of data that should be filled here.
You can check the demo form for Icons for Gravity Forms below:
You can also checkout the detailed guide for adding icons in Gravity Forms fields.
Tooltips for Gravity Form Fields
Similar to placeholder text, tooltips can also be used to give information about what kind of data should be filled in the inputs. However, with tooltips you have the advantage of including different types of data like videos, images, tables, links etc.
Tooltips for Gravity Forms let you not only add tooltips to input fields but also the checkbox and radio options. You should get this add-on if you want to improve your form conversion by giving clear and detailed instructions. The addon also lets you customize the look and feel of tooltip icons as well as instructions.
This worked great on my form. Thanks for the css code. The only issue I have is that the formatting for the placeholder didn’t take on the textfield (where they write their message on the contact form). All the other input fields worked.
Any idea on how to change only the placeholder asterisk? In Sweden there should not be a space between the last letter and * (should be: and*)
Thanks for that all works great except the Paragraph text field any idea how to colour that one
I was able to get the paragraph placeholder text to change color using this:
.gform_wrapper .gform_body .gform_fields .gfield textarea::-webkit-input-placeholder {
color: #ffffff;
}
change #ffffff (white) to whatever color you need.
Thank you so much. You’re the best!