Styling a Ninja Forms contact form

Main styling sections

Adding Columns
Designing the form
Adding Fontawesome icons
Ninja Forms – Layout & Style add-on


To style a Ninja Forms one first needs to enable Developer Mode.

Open one of the Ninja Forms you want to style. In the Form Fields section click a field. On the right side we see the properties/settings for the selected field. There it says “For more technical features, enable Developer Mode.” Clicking “enable Developer Mode” takes one to Ninja Forms -> Settings – Advanced Settings.

Ninja Forms WordPress plugin. Contact Me - Form Fields. Name selected - Enable Developer Mode to gain access to styling the form.
Ninja Forms WordPress plugin. Contact Me – Form Fields. Name selected – Enable Developer Mode to gain access to styling the form.

Ninja Form Settings

As one clicks the link “enable Developer Mode” one is taken to the Ninja Forms Settings -> Advanced Settings. Click Form Builder “Dev Mode” to enable the developer mode. I also clicked to Disable Admin Notices.

Ninja Forms WordPress plugin. Settings - > Advanced Settings. I checked the Disable Admin Notices and the Form Builder "Dev Mode".
Ninja Forms WordPress plugin. Settings – > Advanced Settings. I checked the Disable Admin Notices and the Form Builder “Dev Mode”.

Adding columns to a Ninja Forms form field.

Go back to Ninja Forms -> Dashboard -> Click the form you want to adjust.
Then click the field you want to style. In the following screenshot inside the Display section in the Container field I added the one-half first. I also added a new CSS class which I named name-field. Just in case I plan on adding additional CSS.

Style Ninja Forms WordPress plugin. Contact Me -> Form Fields -> Name field add CSS to create a column.
Style Ninja Forms WordPress plugin. Contact Me -> Form Fields -> Name field add CSS to create a column.

Next I selected the Email field. In the Display section. I added a one-half second css. Like so:

Style Ninja Forms WordPress plugin Contact Me -> Form Fields -> Email field add column.
Style Ninja Forms WordPress plugin Contact Me -> Form Fields -> Email field add column.

Clicking Done and Publish.

Result having two columns

Styled Ninja Forms WordPress plugin. Contact Me - Frontend containing two columns.
Styled Ninja Forms WordPress plugin. Contact Me – Frontend containing two columns.

Column Style information

Styling fields in rows.

first – This class should be used in the first field in a group of fields that will be displayed side by side.
second – This class should be used in the second field in a group of fields that will be displayed side by side.
one-half
one-third
two-thirds
one-fourth
two-fourths
three-fourths
one-sixth
etc.

List item columns

For checkboxes or radio list items into neatly formatted columns.

two-col-list
three-col-list
four-col-list
five-col-list
six-col-list

Information came from this documentation: https://ninjaforms.com/docs/styling-your-forms/

3 columns in a row.

Moving the Subject field into the first line along with Name and Email fields.

Name field CSS container: one-third first
Email field CSS container: one-third second
Subject field CSS container: one-third third

The result:

Styled Ninja Forms WordPress plugin. Contact Me - 3 columns in one row on the Frontend.
Styled Ninja Forms WordPress plugin. Contact Me – 3 columns in one row on the Frontend.

Designing – (styling) the Ninja forms form.

Let’s say that I want a background color and rounded corners. By right clicking the form on the frontend of the web site and selecting Inspect (element) in the browser we will be able to see the HTML and CSS used. By moving the cursor in html view the selection will change in the frontend/preview window. I located the full form named #nf-form-1-cont and added CSS ID and code to the customizer. A background, additional padding and a border radius. Below is the CSS I added.

/* Ninja Forms: Full form. */
#nf-form-1-cont {
    padding: 15px; 
    max-width: 1000px;
    margin: 0 auto;
    background: #5c7fb1a1;
    border-radius: 9px;
}
Style Design Ninja Forms WordPress plugin. Contact Me: Inspect in browser.
Style Design Ninja Forms WordPress plugin. Contact Me: Inspect in browser.

Adding the CSS to the style.css of the child theme was slow going and I wondered if it actually worked. The customizer worked better for this specific Ninja Forms CSS.

Styling the Submit button.

Similar to finding the CSS class for the full form we will again right click the form (submit button) and find the CSS. I noticed it uses the nf-field-4 ID. I added the following CSS to the customizer.

/* Ninja Forms: Submit button */
#nf-field-4 {
	background: green;
	border-radius: 5px;
}
Style Design Ninja Forms WordPress plugin. Contact Me form. Customizer submit button.
Style Design Ninja Forms WordPress plugin. Contact Me form. Customizer submit button.

Additional styling.

Styling a divider field.

hr {
 border: 0;
 border-collapse: collapse;
 border-top: 1px solid #eee;
 clear: both;
 margin: 1em 0;
 }

Using Media Queries

The following is an older example.

What I usually do is resize the browser and see how the form looks. Then add some random widths with a background color to see the changes. Adjusting break points where needed.

@media only screen and (max-width: 780px) {
/* Name field */
#ninja_forms_field_1_div_wrap,
 #ninja_forms_field_1 {
 width: 15%;
 min-width: 110px;
 float: left;
 background-color: red; 
 margin: 0 5px; 
 }

 /* Email field */
 #ninja_forms_field_2_div_wrap,
 #ninja_forms_field_2{
 width: 15%;
 min-width: 110px;
 float: left;
 margin: 0 15px; 
 }
 
 /* Phone field */
 #ninja_forms_field_14_div_wrap,
 #ninja_forms_field_14{
 width: 15%;
 min-width: 110px; 
 float: left;
 margin: 0 15px 50px 10px; 
 }
 
 /* Message field */
 #ninja_forms_field_3_div_wrap,
 #ninja_forms_field_3{
 width: 90%;
 min-width: 110px;
 margin: 5px;
 }
 
 /* Send button field */
 #ninja_forms_field_4_div_wrap,
 #ninja_forms_field_4{
 width: 110px; 
 margin: -10px 5px 0 0; 
 padding: 15px;
 }
}

@media only screen and (max-width: 600px) {
/* Name field */
#ninja_forms_field_1_div_wrap,
 #ninja_forms_field_1 {
 width: 43%;
 min-width: 150px;
 float: left;
 background-color: green; 
 margin: 0 15px 40px 0; 
 }
 
 /* Email field */
 #ninja_forms_field_2_div_wrap,
 #ninja_forms_field_2{
 width: 43%;
 min-width: 150px;
 float: left;
 margin: 0 15px 40px 0; 
 }
 
 /* Phone field */
 #ninja_forms_field_14_div_wrap,
 #ninja_forms_field_14{
 width: 65%;
 min-width: 110px; 
 float: none;
 margin: 0 15px 120px 0; 
 }
 
 /* Message field */
 #ninja_forms_field_3_div_wrap,
 #ninja_forms_field_3{
 width: 90%;
 min-width: 240px;
 margin: 0 15px 0 0; 
 }
 
 /* Send button field */
 #ninja_forms_field_4_div_wrap,
 #ninja_forms_field_4{
 width: 90%;
 min-width: 240px;
 margin: 0 15px 0 0; 
 }
}

@media only screen and (max-width: 500px) {
/* Name field */
#ninja_forms_field_1_div_wrap,
 #ninja_forms_field_1 {
 width: 80%;
 min-width: 150px;
background-color: yellow; 
 margin: 0 15px 40px 0; 
 }

 /* Email field */
 #ninja_forms_field_2_div_wrap,
 #ninja_forms_field_2{
 width: 80%;
 min-width: 150px;
margin: 0 15px 40px 0; 
 }
 
 /* Phone field */
 #ninja_forms_field_14_div_wrap,
 #ninja_forms_field_14{
 width: 80%;
 min-width: 110px; 
 float: none;
 margin: 0 15px 190px 0; 
 }
 
 /* Message field */
 #ninja_forms_field_3_div_wrap,
 #ninja_forms_field_3{
 width: 90%;
 min-width: 240px;
 margin: 0 15px 0 0; 
 }
 
 /* Send button field */
 #ninja_forms_field_4_div_wrap,
 #ninja_forms_field_4{
 width: 90%;
 min-width: 240px;
 margin: 0 15px 0 0; 
 }
}

Adding icons to the Ninja Forms fields.

To use Font Awesome icons we need to enqueue (get/load) the icons into the functions.php file. Here is the method I used.

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://use.fontawesome.com/releases/v6.0.0/css/all.css' );
}

Next we need to figure out the CSS field names of each of the fields to where we plan on adding an icon. Similar to earlier we right click the browser frontend area of the form and select Inspect to find the CSS class name or CSS ID. For instance there is code that mentions <nf-field> We then try different CSS to see which is the correct class or ID to use. The following screenshot shows the icons added in. NB! I added the code to the WordPress customizer as it will easier right away show the new code.

Style Ninja Forms WordPress plugin Contact Me - Icons are added. Inspect HTML and CSS in the  browser.
Style Ninja Forms WordPress plugin Contact Me – Icons are added. Inspect HTML and CSS in the browser.

I end up with this code. As it wraps the icon before the title of the field.

/* Name field. */
#nf-field-1-wrap:before {
     font-family: 'FontAwesome';
     display: inline-block;
     content: "\f5b7"; /* Unicode Icon name */
     padding: 2px 7px 0 0;
}

/* Email field */
#nf-field-2-wrap:before {
     font-family: 'FontAwesome'; 
     content: "\f2ba"; /* Unicode Icon name */
     padding: 2px 7px 0 0;
}

/* Subject field */
#nf-field-5-wrap:before {
     font-family: 'FontAwesome';
     content: "\f0f3"; /* Unicode Icon name */
     padding: 2px 7px 0 0;
}

/* Message field */
#nf-field-3-wrap:before {
 font-family: 'FontAwesome';
 content: "\f075"; /* Unicode Icon name */
 padding: 2px 7px 0 0;
}

In addition I also added additional styling to the Submit button.

/* Submit button */
#nf-field-4 {
   /* Center the button */
      display: block;
      margin: auto;
      font-size: 18px;
      background-color: #c9850a;
      border: 1px solid #cc860e;
      border-radius: 9px;
   /* Button size */
      padding: 10px 20% 10px 20%;
   /* Text and box effects */
      text-shadow: 0 0 1px #453f3f;
      box-shadow: 0px 1px 1px #444;
   /* New code added so that we are able to also see the icon on top of the button. */
      position: relative;
      z-index: 10;
      cursor: pointer;
}


#nf-field-4-wrap:before{
      font-family: 'FontAwesome';
      content: "\f0e0"; /* Unicode Icon name */
      margin: 10px 0 0 55%; /* Moving the icon to where I want it. */
   /* Gradual transition. */
      -webkit-transition:opacity .7s ease-out;
      -moz-transition:opacity .7s ease-out;
      -ms-transition:opacity .7s ease-out;
      -o-transition:opacity .7s ease-out;
      transition:opacity .7s ease-out;
      opacity:0.7;  
      color: #fff; /* Icon color */
      z-index: 100; /* Brings the icon above the submit button */
      position: absolute; /* making sure that icon stays in place also at  different screen sizes. */
}

/* Icon as seen on hover */
#nf-field-4-wrap:hover:before{
      font-family: 'FontAwesome';
      content: "\f003"; /* Unicode Icon name */
      margin: 10px 0 0 55%
      cursor: pointer;
      opacity:1;
      color: #fff;
      z-index: 100;
}

To figure out the Unicode Icon name. I went here: https://fontawesome.com/icons and to the “free and open-source icons“. (Even though I have purchased the Pro version I will stick to using the free and open source icons.) I searched for name. Selected Signature and clicked the number seen above the dark blue area. The number was then added to the CSS of the Name field.

Font Awesome Copy Unicode icon name
Font Awesome Copy Unicode icon name.

The final result of adding icons to the Ninja Forms contact Me form.

Along with styling of the submit button and icon.

Styled Ninja Forms WordPress plugin Contact Me. Added icons to various fields - Frontend view.
Styled Ninja Forms WordPress plugin Contact Me. Added icons to various fields – Frontend view.

Ninja Forms add-on / extension – Layout and Styles plugin.

The Ninja Forms Layout and Styles (affiliate link) is a paid add-on / Extension plugin for Ninja Forms.

After downloading the Layout & Styles from your Ninja Forms account. Upload it to the plugins screen and activate. A Styling option will be added to the bottom of the Ninja Forms WP menu sidebar.

Ninja Forms-WordPress plugin Layout and Styles Addon. Form Styles settings.
Ninja Forms-WordPress plugin Layout and Styles Addon. Form Styles settings.

Form Styles
Adjust the Background Color, Border Width, Border Style, Border Color, Text Color, Height, Width, Font Size, Margin and Padding in Container Styles, Title Styles, Required Message Styles, Row Styles, Old Row Styles, Success Response Message Styles. One can also “Show Advanced CSS Properties” which adds Display, Float and Advanced CSS (custom CSS section).

Default Field Styles
Wrap Styles, Label Styles, Element Styles. Contains the same options as in the Form Styles.

Field Type Styles
Select any field and adjust. Contains the same options as in Form Styles.

Error Styles
Main Error Message Wrap Styles, Error Field Wrap Styles, Error Label Styles, Error Element Styles and Error Message Styles. Contains the same options as in the Form Styles.

DatePicker Styles
Container, Header, Week Days, Days, Day Hover, Today, Selected, Previous Link and Next Link.
Contains the same options as in the Form Styles.

Drag and drop using the Ninja Forms Layout and Styles add-on to create a column.

Go to one of your forms. Grad a hold of a field and drag and drop it next to another field. Here is an example of dragging and dropping Email and Subject fields next to the Name field.

Ninja Forms-WordPress plugin. Layout and Styles Add-on. Drag and drop to create columns.
Ninja Forms-WordPress plugin. Layout and Styles Add-on. Drag and drop to create columns.

Affiliate link to the Ninja Forms add-on page: More than 30 add-ons and integrations

Resources I used:
Styling your forms – Ninja Forms documentation.
Enqueue Font Awesome 5 in WordPress – Github Gist.
Using Font Awesome with WordPress without the official plugin – Github issue.
Font Awesome wp_enqueue_style – Stackexchange question.
How to Use Font Awesome Icon as Content in CSS – w3docs.com snippet.
Font Awesome WordPress guide – alienwp.com.

This tutorial was originally written 29 July 2015.

Share the article:

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *