In today’s tutorial, I’m going to show you how to add Divi icons to contact form fields. I actually attempted this a while back and had little success. But now I’m older and wiser and decided to give it another shot. To my surprise, I found the solution easily. So as the saying goes, if first don’t succeed, try, try again right 🙌. So without further ado, let’s get started!
First, add the class below to the row section that contains your form.
dd_icon_form
Next, add the CSS code below to your child theme’s style sheet. If you don’t have a child theme installed already, you can download one here.
.dd_icon_form .et_pb_contact_field p {
position: relative;
}
.dd_icon_form .et_pb_contact_form p:before {
font-family: "ETmodules";
background: #000;
position: absolute;
color: #fff;
-webkit-transform: translatey(100%!important);
transform: translatey(100%!important);
z-index: 3;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
height: 50px;
box-sizing: border-box;
}
.dd_icon_form .et_pb_contact_form_0 .input {
position: relative;
padding-left: 55px;
height: 50px;
}
.dd_icon_form .et_pb_contact_field_0,
.dd_icon_form .et_pb_contact_field_1,
.dd_icon_form .et_pb_contact_field_2,
.dd_icon_form .et_pb_contact_field_3,
.dd_icon_form .et_pb_contact_field_4 {
position: relative;
}
.dd_icon_form .et_pb_contact_field_0:before {
font-family: "ETmodules";
content: "\e08a";
}
.dd_icon_form .et_pb_contact_field_1:before {
font-family: "ETmodules";
content: "\e076";
}
.dd_icon_form .et_pb_contact_field_2:before {
font-family: "ETmodules";
content: "\e090";
}
.dd_icon_form .et_pb_contact_field_3:before {
font-family: "ETmodules";
content: "\e081";
}
.dd_icon_form .et_pb_contact_field_4:before {
font-family: "ETmodules";
content: "\e065";
}
And this is the final result.
As you can see from the code above, the last 5 blocks of code style a different icon. If you require more then 5, simply copy the last block of code and change the “.et_pb_contact_field_4:” to “.et_pb_contact_field_5:”.
If you want to change the background color, you can do it here.
If you want to change the icons, visit our list of Divi icons and change the unicode here.
And that about wraps it folks. If you want to download this module, sign up to our newsletter.
Happy coding 😑!
Thanks for sharing your solution!
Hope I get wiser, too, and not just older 😉
It is my pleasure Chris. And I’m confident you are bud 😊.