If you are here reading this, we presume that you are acquainted with Ninja Forms and what is the meaning of a placeholder. Still, let us give you a short description about these.
What is Ninja Forms?
Ninja Forms is a well known form builder plugin for WordPress.
What is a placeholder /placeholder text?
Placeholder text is a text inside a form field that tell users what type of information to be filled inside the field. It disappears the moment the user clicks inside the field.
Styling Ninja Forms Placeholder Text
There are two methods through which you can have complete command on your placeholder text styling :
- Using Styler for Ninja Forms
- With Custom CSS
By using Styler for Ninja Forms
- Install and activate “Styler for Ninja Forms” from the official WordPress plugin repository.
- Now go to the WordPress dashboard and navigate to Ninja Forms in the admin dashboard and select your desired form to edit.
- In the form editor you will notice an option for “Styler” in the menu bar, click on it and it will open all the styling sections of the form in the sidebar.
- Navigate to Placeholders section in the sidebar, and it will give you all the options to style the placeholders.
Details for Placeholders Section Settings
- Font Size : This setting lets you increase or decrease the size of the placeholder text. There are separate columns to change the font size for desktop, tablet and mobile. To preview how the placeholders look in different devices, you can click on the desktop, tablet and mobile icons under the font size setting.
- Font Style : This setting lets you change the style of the font. You can make the placeholders bold, italic, uppercase and underline. All you have to do is to click on the appropriate button and the changes will be previewed immediately.
- Font Color : This setting lets you change the color of placeholder. To do so, you can use the color picker or input the hex code for your desired color.
Style Ninja Forms Placeholders with Custom CSS
If you plan to use custom CSS for styling of your placeholders it can be done under Customizer -> Additional CSS. Below I have given the CSS classes that you should target for styling placeholders in Ninja Forms.