Overview

WPForms doesn’t offer the option to add icons inside its fields. However, the Field Icons for WPForms add-on easily adds support for Font Awesome icons. Once installed and activated this add-on, you can choose from 900+ Font Awesome icons.

You can add icons to the fields and style them with colors, padding, icon size, and more.

Installation Guide

Fields Icons is an add-on for Ultimate Kit for WPForms, a collection of useful features designed to extend the functionality and customization of WPForms. It adds missing features like icons, bootstrap styling, and the ability to style different parts of the form without the need for any coding.

Required plugins to add Font Awesome on WPForms

• Ultimate Kit for WPForms
• Field Icons for WPForms

Steps to install the free Ultimate Kit for the WPForms plugin

1. Log in to your WordPress website.
2. Go to Plugins -> Add New and search for Ultimate Kit for WPForms.
3. Install and activate the plugin.

Steps to install Field Icons for WPForms Addon

1. Get the Field Icons addon from its downloads page.
2. Log in to your WPMonks account by entering your credentials here.
3. Click on the View Details and Downloads link. Scroll down to the bottom and click on the link under Field Icons for WPForms.
4. Log in to your website backend and then click on Plugins -> Add New.
5. Click on the Upload Plugin button and then Choose File.
6. Find the zip file you downloaded earlier and click Install Now.
7. After installation, click on the Activate button.

Steps to add a license key for Field Icons Addon

1. Log in to your WPMonks account and click on the View Details and Downloads button.
2. Copy your license key.
3. Go to your website’s backend and navigate to WPForms -> Ultimate Kit. Click on the settings ( gear icon ) at the bottom left corner.
4. If you have installed and activated the Field Icons addon, you will see an input box for adding the license key under the License section. Paste the key here.
5. Click on the Activate License button.

Steps to update the Field Icons Addon

Adding the license key sends the update notifications directly to WordPress. So, you can directly update the addon from the updates menu or plugins page of your website’s backend. However, you can also manually update the addon by downloading it from your WPMonks account.

We highly recommend that you add your license key to the addon.

Ultimate Kit for WPForms and Field Icons for WPForms are compatible with both WPForms Lite and WPForms Pro.

Getting Started

Ultimate Kit for WPForms and Field Icons add-ons give you the ultimate flexibility in designing your form without coding. With the Ultimate Kit styler, you can change the look of different form elements like inputs, checkboxes, radios, confirmation messages, error messages, etc.

With field icons, you can enhance the design and usability of input fields by adding appropriate icons. It supports complex fields like name, address, and confirm email as well.

There are two ways to access Field Icons settings for a form:

• from the form editor itself 
• from the direct menu link.

Steps to Access Field Icons from Form Editor

1. Go to WPForms and edit the form in which you would like to add field icons.
2. From the form editor, click on the Styler option.
3. Navigate to the Field Icons panel.

Steps to Access Field Icons from the Forms Menu

1. Click on the Ultimate Kit submenu under the WPForms menu.
2. Select the form to which you want to apply field icons.
3. Navigate to the Field Icons panel.

Using Font Awesome Icons

Fontawesome Icons has one of the biggest collections of icons and it is also amongst the most popular icon libraries on the internet. Field Icons for WPForms has built-in integration with the library and you just have to choose the appropriate icon and it will get applied immediately without any code.

The space inside the Field Icons panel is divided into two parts. The left part is the settings sidebar, from where you can change all the settings and select the icons you want to apply. The right part is the content area (form preview), where you can see all the settings applied to the form as you make changes.

Steps to Add Font Awesome Icons to WPForms Input Fields

1. In the settings sidebar, check the Enable Icons option.
2. Click on the field to which you want to apply the icon. This will open the Font Awesome icon selection for the clicked field.
3. Select the icon you want to apply. The preview will automatically refresh whenever you change the icon.

Steps to Switch Between Pages

If you have a multi-page form then you can switch between the pages to see the live preview of the icons. To preview a particular page, click on the Selected Page option at the top-right corner of the content preview section and select the page.

Customization Settings for Font Awesome Icons

The addon comes with a lot of design customization options so, that the icons look like an integral part of the form. You can do the following

• Icon Size: Adjust the size of icons. You can set different icon sizes for desktops, tablets, and mobile devices.
• Icon Alignment: The icons can be placed either in the left or right corner of the input fields.
• Icon Color: Sets the color of icons using the color picker control.
• Icon Spacing: You can adjust the position of the icon by setting the spacing from left, top, right, and bottom.

You can check the implementation of Font Awesome icons on the demo form.

Support and Community

Fields Icons add-on makes it straightforward to add Font Awesome icons directly inside WPForms input fields. It also takes the pain out of customizing the icons with easy-to-use controls for styling and positioning the icons.

The Field Icons addon receives regular updates from the WPMonks team. Each purchase includes 1 year of support and updates from the date of purchase. You can renew the addon license anytime even if it is expired.