1. Home
  2. Docs
  3. Lagoon
  4. Pages Elements
  5. Contact Form Field Icons

Contact Form Field Icons

One of the customized contact forms provided with Lagoon has icons placed into the form fields instead of label text.

If you wish to customize the default icons, you can do so easily by using a bit of CSS and the ETmodules icon pack that comes pre-built with Divi.

Let’s begin.

First, obtain the ID of the specific field for which you wish to change the icon. For instance, let’s change the icon of the Name field. Open the contact form settings, select the Name field, and check for its ID. In our case, the ID is the same the field name – Name.

Now, open the cheatsheet for the ETmodules icon pack by ElegantThemes, and select an icon that you’d like to replace the current one with.

Note that all icons in this pack are provided with an identifying code, structured like so:

&#x eXXX;

For our purpose, you will need to ignore the &#x part, and only use the part that starts with the letter E. I’ve chosen the icon for the code is e103.

Once you have noted the code of the icon you’d like to use, go back to your Divi page, open the page’s settings and navigate to the Custom CSS section. Place the following code there:

.lagoon-faq-contact .et_pb_contact_form_container form.et_pb_contact_form p[data-id="name"]:before {
  content: "\e103"

Let’s break down the code – the first part is defining which element we’re selecting, in this case, the contact form that is placed under the section for which there is a custom CSS class called lagoon-faq-contact.

The second part is selecting the specific field for which we are changing the icon, in this case [data-id=”name”]

The third and last part is where we place our icon code – in this case, e103.

You can follow the same guideline for all fields and change the icons as you’d like. If you are using the same form in different places and would like the effects to take place everywhere, simply remove the lagoon-faq-contact part, or if you are using the form in a section with another custom CSS class, simply change lagoon-faq-contact to that section’s custom class.

Was this article helpful to you? Yes No

How can we help?