Gravity Forms
+ Field Icons

Icons make a form quicker to read. An envelope tells people where the e-mail address goes before they read the label, a lock marks the password, a calendar the date, a pin the street address. Most well-designed sign-up and checkout forms use them, but Gravity Forms has no setting for an icon inside an input, so adding one has meant custom CSS per field, background images that slide under the text, and icon fonts loaded from another site.

The Gravity Forms Field Icons add-on adds a Field icon setting to the Appearance tab of every field. Pick one of 324 bundled icons with a search box (type "mail", "phone", "lock" or "map"), or use your own SVG or PNG from the Media Library, and choose the side, colour and size. It works for Single Line Text, E-mail and its confirmation, Phone, Number, Website, Date, Time, Drop Down, Paragraph Text, Password and every Name and Address sub-input, each with its own icon. Add an icon before a field label or on the submit button too.

For a whole form, switch on automatic icons by field type in the form settings: e-mail gets an envelope, phone a phone, website a globe, password a lock, Name a person and each Address line its own icon; Single Line Text picks one from words in its label such as name, company, city or code. Any field can override it or show no icon. The text never runs under the icon, the icon is centred in the input, right-to-left sites are mirrored, and validation keeps Gravity Forms' own error styles while the icon can turn the error colour. Icons are decorative and hidden from screen readers, the inputs themselves are left exactly as Gravity Forms prints them, and every icon is served from your own site. For Gravity Forms 2.9 and newer, with the Orbital theme, the Gravity Forms theme and legacy markup.

The icons are added on your server while Gravity Forms prints the form. For each input that gets an icon, the add-on puts the input in a small wrapper and adds the icon next to it, marked as decorative so screen readers skip it; the input itself, with its id, name, classes, value and accessibility attributes, is left exactly as Gravity Forms printed it, so validation, conditional logic, AJAX, multi-page forms, calculations and other add-ons keep working. A small stylesheet places the icon inside the input and adds room before the text, using the text direction of the page so right-to-left sites are mirrored. The bundled icons are drawn as inline SVG from a file inside the add-on, and Media Library images come from your own uploads, so nothing is loaded from another site. Forms that use no icon get no extra markup, no stylesheet and no script. The add-on makes no outside request beyond the licence and update checks.