Field Icons for WPForms

An icon inside the field takes up the space where the visitor types

You put an envelope in the email field and a phone in the number field. The form looks tidier, but now the icon shares space with what the visitor types, and a long entry has less room than it had before you added it.

An icon inside a field is not just decoration: its size and its side change the space left for typing, so it pays to decide them while looking at the form filled in.

Field Icons for WPForms is a WPForms add-on that places Font Awesome icons inside input fields. You pick the icon from a library, adjust its size, position and alignment, and place it on the left or the right of the field. While you do it, you see the changes in a live preview.

What you can adjust on each icon

• Font Awesome library: you pick the icon from a broad collection.
• Size, position and alignment: adjusted separately, without touching code.
• Left or right: the icon goes on whichever side of the field you prefer.
• Live preview: you see the result while you change each setting.
• Light loading: the add-on loads only the assets it needs.
• No prior setup: it works with WPForms without extra preparation steps.

Trying the icons on a contact form

Picture a form with name, email, phone and message. One combination you can try is an icon on the left of the three short fields, all the same size, and compare it with the version without icons. Test it before publishing, because the look depends on your theme and the screen width.

1. Choose the field and the icon that describes it best.
2. Adjust size, position and alignment while watching the preview.
3. Repeat on the other fields with the same size so they read as a set.
4. Open the form on a phone and type a long entry in each field, such as a full email address.

How much room the icon leaves and where it comes from

• It is a WPForms add-on: it applies to the forms you already build with that plugin.
• If the icon is not clear on its own, keep the label text.
• Icons come from Font Awesome, so the available catalog is that library's.
• A large icon in a narrow field leaves less room for typing. Check it on small screens.

How to add the first icon

You need WPForms installed and at least one form created. The add-on integrates with the base plugin, so the icon settings are made on that form.

1. Install and activate the add-on on the same site where WPForms is.
2. Open an existing form or create a test one.
3. Choose the input field you want to add the icon to.
4. Select the icon and set size, position, alignment and side.
5. Save the form and check the result on the page where it is published.

Alternatives for styling fields

If you prefer not to add an add-on, the direct route is to write your own CSS in the theme and place the icons by hand. You get full control, in exchange for maintaining that code yourself. In the catalog, WPForms Pro is the base plugin this add-on works on.

Questions about Field Icons for WPForms

Which forms does it work with?

Forms built in WPForms. It is an add-on for that plugin and acts on its input fields.

Can I put the icon on the right?

Yes. You can place it on the left or the right of the field and also adjust its position and alignment.

Can I see the result before publishing?

Yes, there is a live preview of the changes while you customize the icon. Still, check the form on the real page and on a phone.

Does it add many files to the page?

The add-on is designed to load only the assets needed to display the icons.