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 ‘email@example.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 with placeholder design resulting in bad experience for users which can ultimately hurt form conversion.
There are two methods with which you can regain full control over your placeholder styling.
- Using Gravity Forms Styler 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 Free Plugin
Styles & Layouts 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 beautiful and responsive style with easy to use settings and controls.
Step by Step Tutorial
- Install and activate Styles & Layouts for Gravity Forms from the official WordPress plugin repository.
- Now go to the page where you have added the form. Make sure you are logged in else the admin bar won’t be visible to you. Open customizer from the admin bar.
- You will notice ‘Style & Layouts for GF’ panel there. Click on it and then it will give you the option to select the form.
- Once you have selected the form then navigate to ‘Placeholders’ section.
Details For Placeholder Section 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 to enlarge or decrease the size of placeholders. There are separate columns for desktop, tablets and mobiles font size. To preview how the placeholders look in different devices, you can click on the desktop, tablet and mobile icons under 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 Styles & Layouts 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.
If you need help for any of the above methods then feel free to leave a comment and I will help you resolve your issue.