Are you looking to easily change the font size in your WordPress form? Maybe you are wondering if there is an easy way to change the font family or font color on your form. Luckily, you can customize WordPress forms without mastering CSS using the Layout and Styles add-on!
In this blog post, we will teach you how to do font customizations of your WordPress forms. You’ll learn how to change the font family on your form, you’ll learn how to globally change the font in WordPress across all form fields, selected fields only, and per entire form. We will also show you how to change font color or font size. As a bonus, we will explain how to add font awesome to your form labels. Ready? Let’s go!
Table of contents
- Change the font size of your WordPress form
- Change the Font Family in your form
- Change text color in your forms
- Change font in your email confirmation
- Form styling tip you must know
- Bonus: Adding font awesome to labels
1. Change the font size of your WordPress form
When it comes to font customizations of your WordPress form, you want to ask yourself a question if you want to make changes across all forms or if you want to make changes on the individual form.
If you want to make changes across all your forms, you want to use Styling settings under the Ninja Forms menu. Any font styling changes you make here will affect all your existing forms and any future forms you’ll create. You also want to make sure that Opinionated Styles are set to None under the Ninja Forms > Settings.
If you want to make styling changes on a specific form, you do that by navigating to Ninja Forms Dashboard and selecting the specific form you want to style. We will come back to this later in this post.
Change font size for all form field labels across all forms
If you want to change the font size of the labels of all form fields, you are globally changing the font size. This can be done by navigating to Ninja Forms > Styling > Default Field Styles > Label Styles > Font Size. This will apply the change to your font size to all form field labels. It does not affect the form title or other elements on the forms that are not fields.
Change font size for selected form field labels across all forms
Want to make text large for specific form field labels than for the rest of the form field labels? Then, you want to navigate to Ninja Forms > Styling > Field Typ Styles > Select a Field Type > Label > Font Size.
Change the font size of form labels for a specific form
The Styling settings we showed above are used if you would like to make changes globally, across all the forms. However, if you want to make changes to the individual form, navigate to your Ninja Forms Dashboard and select the form you wish to make the font customizations. Select the specific form field and open the Style settings > Label Styles > Font Size.
Here, you can also change the color of the text, and more. If you don’t find more styling options, you can always turn on Show Advanced CSS Properties and write your own CSS rules!
Change the font size of the form title on your form
If you want to make any font changes on your form title, navigate to the Advanced tab on your form builder and select Styles > Title Styles. Here, you can change the font size, font color, and other elements of your form title.
2. Change the Font Family in your form
Are you looking for a simple way to change the font family on your form? Layout and Styles add-on saves you the hassle and lets you do the change in a matter of a few minutes using the Styling settings.
First, make sure you enable Developer Mode by navigating to Ninja Forms > Settings > Advanced Settings > click ‘Dev Mode’. Enabling this feature will give you access to advanced settings within Ninja Forms. Next, navigate to Ninja Forms > Styling > Default Styles > Element > click ‘Advanced CSS’ and insert font-family: <whateverTheFontFamilyIsCalled>;
That’s it! You’ve just changed the font family of your WordPress forms and learned how to change the font size of your contact form! Didn’t think would be that easy, did you?
3. Change the text color in your forms
Your method of changing the text color on your form will vary based on if you want to make changes globally across all your forms or if you want to make changes on the specific WordPress form.
Changing text color on a specific form
If you have the Layout & Styles add-on installed on your WordPress form, all styling changes are made within your form builder.
Some styling rules can be set by navigating to the Advanced tab of your form > Styles. Here, you’ll find more generic styling settings.
To change the text color of specific form field labels, you’ll want to navigate to that field and open Styles. To change the text color of the form label, you select Label Styles.
Changing text color across all forms
You can change the text colors of your form fields in WordPress forms by navigating to Ninja Forms > Styling.
Depending on if you want to change the color of the text on all forms at once or only specific form fields on all forms, you’ll select the Default Field Styles (global) or Field Type Styles.
Please note that if you don’t find the styling settings, you can always enable the Advance CSS and write your own CSS rules for further customizations.
4. Change font in your email confirmation
For any font customization including font size or text color, you’ll want to use the same HTML/Source button. To learn about how to easily customize your email, check our article Learn How to Easily Customize Your Ninja Forms Email!
That’s it! If you followed the steps above, you can now change the font of your confirmation message.
5. Form styling tip you must know!
You don’t need to have coding skills or be a developer to make styling changes on your form. However, it is always helpful to know the definition of Label Styles, Wrap Styles, and Element Styles. Rather than talk about it, we created a simple picture that will be very useful to you when applying any styling rules to your form!
Wrap Styles – styling space surrounding the Label
Label Styles – styling Label (identification of field) only
Element Styles – styling of a field where you insert a text
6. Bonus: Adding font awesome to labels
Sometimes you want to add little extra something to attract a visitor’s eye or spruce things up for your regular guests. Font Awesome for Ninja Forms is the perfect way to add a bit of visual flair to your form fields!
Note: The following steps assume that you have opinionated styles activated, or a solution enqueuing Font Awesome. For easy documentation on how to activate opinionated styles, please see the Styling Your Forms.
You can add Font Awesome icons to any field label that exists in Ninja Forms. As an example, we will show you how to insert the envelope icon into the email form label. Keep in mind, that each Font Awesome icon has a bit of code contained within the <i> tag. For this specific envelope icon, our <i> tag is:
<i class='fa fa-envelope' aria-hidden='true'></i>
Here’s our Email field settings window:
See the big red arrow? That’s where we’re going to be pasting the Font Awesome code snippet. Just click to place your mouse cursor to the left of the word Email, and paste. I’d probably place a space in there too, just for the front-end aesthetic.
That’s quite literally all there is to it. Here’s what we have on the front-end view as users will see it:
That’s it! Font Awesome icons are easily styleable if you know any CSS at all. If you don’t head over to their website and take a look at their getting started material and documentation. It’s really not that hard at all!
Please note, at this time our form buttons or form fields do not include Font Awesome capability and you can only add Font Awesome icons to your form labels. If you want to read more about Font Awesome and Ninja Forms, make sure to check our article Simple Steps to Unlock Font Awesome for Ninja Forms!
Congratulations! You’ve just become a master of font styling on your WordPress forms!
As you can see, you don’t need to be a coding genius or learn how to write CSS to make font customizations in your WordPress forms. All you need is our Layout and Styles add-on that lets you make all font styling adjustments and any other customizations with ease!
If you want to explore the possibilities of customizing your WordPress forms further, make sure you check our excellent post on How to Style Your WordPress Forms. This guide offers practical but easy examples you can apply to your forms. It has proven quick tips to style your forms. We specifically show you how to customize your Submit button or how to apply the style across all y our forms. We talk about styling your forms to match your WordPress theme and changing the layout of your WordPress forms. It is packed with a great amount of information that should leave you inspired and ready to turn your form into a beautiful swan without mastering CSS!
Don’t wait and give the Layout and Styles add-on a go. A good-looking form equals a high conversion form, and you don’t want to miss the opportunity to make your forms more attractive.
We offer a 14-day money-back guarantee no question asked, so if you are not happy with this add-on, we give you a full refund. Unlike our competitors, you can purchase Layout and Styles individually for 1, 5, or 20 sites. You don’t need a membership plan. Isn’t that great? So what are you waiting for? Style your forms further with this great WordPress styling extension!
