Let’s face it, the default Divi Contact Form module doesn’t offer too much excitement or features. Enhancing the aesthetic appeal and usability of your contact form can lead to better user engagement and happier visitors. There certainly are many ways to enhance your Divi contacts forms, but one of the most requested methods we’ve seen is adding icons to your input fields.

In this Divi tutorial, we will explore three different methods to add icons to Divi Contact Form input fields:

• Divi’s ETmodules icon font included with Divi
• Uploading an SVG icon
• Divi Form Builder plugin

Let’s get into it!

Method 1: Adding icons to Divi Contact Form input fields using the ETmodules icon font

Divi’s built-in icon font, ETmodules, is a treasure trove of icons that can be utilized to enhance various elements of your website, making it more intuitive and visually appealing. One such application is incorporating these icons into the input fields of your contact forms, which can significantly improve user experience by providing a clear, visual cue about the information required from the user. For instance, a small envelope icon can instantly signify an email field, making the form more interactive and self-explanatory.

In this section, we will walk through a step-by-step process to add icons to your Divi contact form input fields using the ETmodules icon font. By integrating CSS with the vast array of icons available in the ETmodules font, you can effortlessly customize your contact forms to align with the overall design aesthetics of your site, while also enhancing user engagement. So, let’s delve into how you can achieve this with a bit of CSS magic and the Divi icon font at your disposal.

Step 1 – Find a Divi ETmodules icon

As we mentioned earlier, it might make sense to use something like an envelope icon in a field where you are asking the user for their email address, but where do we find all the icons in the Divi icon font?

Luckily Elegant Themes has a blog post on exactly this, so point your browser to their post on Introducing the Elegant Themes Icon Font where you can see all the icons included.

When you have the perfect icon selected, you will want to copy the part of the code below the icon underlined in the image below

You only copy the part after the x and before the ; so in our example, we have  but will only use the e010 part.

Step 2 – Add the CSS to the Divi Contact Form field

With our icon selected, we can use a quick CSS snippet and add it to our field to inject the icon into the Divi form field.

Let’s take a look at the code below:

content: "e010";            /* Unicode of the icon from the ETmodules font */
font-family: "ETmodules";    /* Specifying the icon font family */
position: absolute;          /* Absolute positioning relative to the input field */
left: 10px;                  /* Position from the left of the input field */
top: 50%;                    /* Position from the top to vertically center the icon */
transform: translateY(-50%); /* Fine-tuning vertical centering */
font-size: 18px;             /* Icon size, adjust as per your design requirements */
color: #f1c40f;              /* Icon color, adjust to match your design */
margin-left: 40px;           /* Additional spacing from the left, if needed */
z-index: 999;                /* Ensures the icon stays on top of other elements */
background-color: #fff;      /* Background color of the icon area (optional)*/
border-radius: 50px;         /* Makes the background of the icon circular (optional)*/
padding: 5px;                /* Padding around the icon */
line-height: 1;              /* Adjusts the height of the icon line */

Now, don’t get scared when you look at that first line, like where the heck did that come from? It is just how you tell the Divi icon font that you are giving it a Unicode code for the icon you want to use.

Basically, all we did was take that e010 and add the to it to make it e010. Make sense? Good!

We need to give this code a home, so you need to open your Divi Contact Form Module, then go to the settings of the field where you would like to add the icon.

From here you go to the Advanced Tab for the field and expand the Custom CSS, then paste our code in the Before area.

This should then look something like this:

You’ll notice that our placeholder text is a little wonky, so let’s fix that real quick with a last little bit of CSS code.

Step 3 – Fix placeholder text spacing

This is fairly simple, all you need to do is copy and paste the code below into the Advanced Tab under Custom CSS, and the Main Element area.

} /* This is not a typo, it escapes the current block of CSS */
input {
padding-left: 50px!important; /* Adjust as needed */

And that is it, you can now adjust the very well-commented CSS to style the colors of the icon and so forth. Well done, you!

Method 2: Adding icons to Divi Contact Form input fields by uploading an SVG icon

Scalable Vector Graphics (SVG) icons provide a crisp and clear visual cue, regardless of the screen size or resolution, making them a preferred choice for modern web design. By incorporating SVG icons into the input fields of your Divi contact forms, you not only enhance the aesthetic appeal but also improve the user experience by providing intuitive indicators for each field. For instance, a simple user icon can make it clear that a field is meant for a username, adding a touch of design finesse and usability to your forms.

In this section, we will unravel the process of uploading and integrating SVG icons into your Divi contact form input fields. The beauty of SVG icons lies in their versatility and sharpness, and with a sprinkle of CSS, you can have them nestled perfectly in your input fields, boosting the visual appeal and interactive vibe of your contact forms. Whether you have a collection of custom SVG icons or have sourced them online, this guide will walk you through the steps to get them displayed elegantly within your Divi contact form fields. So, let’s venture into the process and elevate your form aesthetics to the next level.

Step 1 – Find an SVG icon you want to use

For our Name field, maybe we can add something like a name badge as the icon. If you don’t have one lined up, no problem, we used SVGRepo to find one we liked for free. Just note that you might need to use another tool to resize the SVG as we needed to otherwise it might be huge.

We went with this SVG icon for our Divi Contact From input field:

With your icon downloaded and resized, it is time to just upload it to your Media Library.

Next up, we have to do the same as we did in method one, with some slightly modified CSS code.

Step 2 – Add the CSS to add our SVG icon to the Divi Contact Form input field

With our SVG icon uploaded, we can use a quick CSS snippet and add it to our field to inject the icon into the Divi form field.

Let’s take a look at the code below:

content: url("your-uploaded-svg-url"); /* Specifies the URL of the SVG icon to be used */
position: absolute;         /* Positions the icon independently of the normal flow, based on the nearest positioned ancestor */
left: 10px;                 /* Positions the icon 10px from the left of the containing element */
top: 50%;                   /* Positions the icon 50% from the top of the containing element to vertically center it */
transform: translateY(-50%); /* Adjusts the vertical position of the icon to accurately center it */
margin-left: 40px;          /* Adds extra spacing to the left of the icon, shifting it rightwards */
z-index: 999;               /* Ensures the icon stays on top of other elements by setting a high stack order */
padding: 5px;               /* Adds space around the icon, inside the defined border or SVG dimensions */
line-height: 1;             /* Sets the height of the line containing the icon to normal, ensuring no extra vertical space */

The step to add the code is exactly the same as method one, so you need to open your Divi Contact Form Module, then go to the settings of the field where you would like to add the icon.

From here you go to the Advanced Tab for the field and expand the Custom CSS, then paste our code in the Before area.

This should then look something like this:

You’ll notice that our placeholder text is a little wonky, so let’s fix that real quick with a last little bit of CSS code.

Step 3 – Fix placeholder text spacing

This is fairly simple, all you need to do is copy and paste the code below into the Advanced Tab under Custom CSS and the Main Element area.

} /* This is not a typo, it escapes the current block of CSS */
input {
padding-left: 50px!important; /* Adjust as needed */

Bada-bing, bada-boom, you now have a fancy SVG icon on your Divi Contact Form module input fields.

Method 3: Adding icons to Divi Contact Form input fields with Divi Form Builder

Time for the real party to start with adding icons to your Divi forms using Divi Form Builder. Let’s take a look at how easy this is to do. We have already established why it helps with user engagement, so let’s stay with the meat and potatoes on this one.

Step 1 – Adding an icon to your Divi Form Builder input field

For this example, we will work with the first name field again, so open your Divi Form Builder module and open the settings for the field that you would like to add an icon to.

On the Content Tab of the field, scroll down to Layout Options, and switch Enable an icon on the input to Yes.

Then, all you need to do is select the icon you would like to add to your input field.

You can also easily style the icon in the same spot where you selected it.

If you find that your icon is not in the right vertical position, just head to the Design Tab and adjust it under the Field Settings.

Step 2 – Rejoice!

Yes, that is right, you’ve done it! In no time you can add input icons to any of your Divi Form Builder fields. How amazing is that? If you don’t have a Divi Form Builder license yet, definitely check out the Divi Form Builder product page as this is only one of the many features you’ll find in Divi Form Builder.

Conclusion

In conclusion, enhancing your Divi contact form input fields with icons is a surefire way to elevate the user experience on your Divi sites. In this Divi tutorial, we gave you three useful methods – utilizing the Divi icon font with CSS, uploading an SVG icon, or employing the Divi Form Builder, we’ve unveiled the flexibility and versatility that Divi offers in customizing form fields.

Each method has its own set of advantages, whether it’s the ease and abundance of icons provided by Divi’s icon font, the crisp and scalable nature of SVG icons, or the straightforward and feature-rich environment of the Divi Form Builder. The choice of method hinges on your project requirements, your comfort level with code, and the resources at your disposal.

By integrating icons into your forms, you’re not only enhancing the aesthetic appeal but also making your forms more intuitive and user-friendly, which is pivotal in encouraging user interaction and engagement on your website. Armed with the knowledge from this Divi tutorial, you’re now ready to add icons to your Divi contact form input fields, making them visually appealing and functionally intuitive.

Catch you in the next post!