Add Icons to Divi Contact Form Fields

|

In web design, sometimes it's the small touches that make a big difference. In this guide, I'll show you how to add icons to the fields in a Divi contact form. Here's how it will look:

For this, we can use some CSS to add icons from the ETModules icon set that's built into Divi. Here's how to do it:

/* === Add contact form placeholder icons === */
/* - see: https://divibooster.com/add-icons-to-divi-contact-form-fields/ */
/* - icon codes from https://www.elegantthemes.com/blog/resources/elegant-icon-font */

.et_pb_contact_form p[data-id]:before {
    font-family: 'ETModules' !important;
    position: absolute;
    z-index: 1;
    font-size: 16px;
    padding: 15px;
    color: green;
}
.et_pb_contact_form p[data-id] input,
.et_pb_contact_form p[data-id] textarea,
.et_pb_contact_form p[data-id] select {
    padding-left: 46px !important;
}
.et_pb_contact_form p[data-id="name"]:before {
    content: "\e08a" !important;
}
.et_pb_contact_form p[data-id="email"]:before {
    content: "\e010" !important;
}
.et_pb_contact_form p[data-id="phone"]:before {
    content: "\e00b" !important;
}
.et_pb_contact_form p[data-id="message"]:before {
    content: "\76" !important;
}
.et_pb_contact_form p[data-id="subject"]:before {
    content: "\7c" !important;
}
.et_pb_contact_form p[data-id="topic"]:before {
    content: "\e018" !important;
}

This CSS will add icons from the ETModules font before each input field, next to the placeholder text. Each field has its own appropriate icon: a person for the name, an envelope for the email, a phone for the phone number, and a speech bubble for the message.

Apply this to only certain contact forms, give these contact form a CSS class and replace "et_pb_contact_form" in the code with this CSS class.

To target other fields, change the data-id values to the IDs of the fields set in your contact form module settings.

If the icons don't show up right away, you might need to disable dynamic icons at:

Divi > Theme Options > General > Performance > Dynamic Icons

By following these steps, you should have a more visually appealing and universally understandable contact form.

0 Comments

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.