How To Move The Divi Form Labels Above The Fields (For Better User Experience)

2021-12-20 | Divi, Divi Forms, Tutorials | 1 comment

Improve the user experience in your Divi Forms with this easy design fix. We'll move the labels above the form fields and fine-tune the design.
Skribent: Victor Duse
By Victor Duse

User Experience experts will tell you that it’s better to place the labels outside of your form fields instead of relying on inline labels (placeholder text) inside the fields. Here’s an easy and solid way to move the Divi form labels above the fields – for better UX.

Before (form labels inside the fields)

Divi Form Labels Inside Form Fields

By default, the Divi Contact Form displays the field labels inside of the form fields. This is not the best user experience since the placeholder text disappears when the user starts adding text in the field.

After (form labels above the fields)

Divi Form Labels Above Form Fields

Use the CSS snippets in this post to move the field labels above the form fields instead. This way, the labels will still be visible, like proper field titles, when the user starts typing.

Why you shouldn’t rely on inline labels only

The Divi Contact Form looks really nice with the labels inside the form fields. So what’s the problem with relying on inline labels? The UX architect Nick Babich explains it well in an article on the Adobe blog in March 2020:

A label set as a placeholder in an input field will disappear once the field gains focus; the user will no longer be able to view it. While placeholder text might work for two-field forms (a simple log-in form with username and password fields), it’s a poor substitute for visual labels when more information is required from the user.

Once the user clicks on the input field, the label will disappear, and so the user cannot double-check that they wrote what was being asked of them. This increases the chance of error. Another problem is that users could mistake placeholder text for prefilled data and, hence, ignore it (as Nielsen Norman Group’s eye-tracking study confirms).

Source: Best Practices for Form Design: Structure, Inputs, Labels and Actions

So let’s fix it!

Moving the labels above the Divi form fields with CSS

Since there are no design options for moving the labels on top of the fields in the Divi Contact Form, we’ll have to add some CSS snippets.

Move the field labels up, step by step

  1. Log in to your WordPress dashboard
  2. Go to Divi » Theme Customizer
    Pro tip:
    Use your website navigation to see a live preview of a page that contains a form while editing the CSS
  3. Go to Additional CSS and paste the snippets below: 
/* Display field titles above fields */
.et_pb_contact_form_label {
display: block;
font-weight:bold;
bottom:3px;
}

/* Hide duplicate placeholders */
.et_pb_contact_form_container .input::placeholder {
    opacity:0;
}

/*Hide duplicate titles in radio buttons and checkboxes */
.et_pb_contact_field_options_title {
display:none;
}

4. Publish your changes and preview in frontend.

Make sure to clear your website cache and browser cache if you can’t see the changes in frontend. 

You can tweak the font styling of the field labels by editing the first snippet. I made the labels bold and added 3px extra spacing between the labels and the fields to breath in some air to the design.

Styling the Dropdown field

If you are using a dropdown field you might notice that the field label is displayed both above the field (as a title/heading) and inside of the field (as the first option).

Depending on your design settings, the dropdown icon ▼ could also be slightly nudged out of the vertically centered position.

Dropdowns are tough to style but here are two ways to fix the issues.

Remove the title above the dropdown field …

The first option is to hide the title above the dropdown field. The field label will still be visible inside the dropdown when the user expands it, so it should not hurt your UX.

/* Remove title above dropdown */
.et_pb_contact_field[data-type=select] .et_pb_contact_form_label {
	display:none;
}

Add the CSS snippet above to remove the extra title above the dropdown. This should also center the dropdown icon vertically again.

Before

Dropdown field before the fixes

A dropdown field with an extra title above the field and the icon slightly out of place.

After

Dropdown without a title above the field

The same dropdown field without the extra title and the icon in the right place.

… or keep the title and vertically center the dropdown icon

If you are fine with the title above the dropdown, you can add the snippet below instead to nudge the dropdown icon in place again.

/* Vertically center dropdown icon if needed */
.et_pb_contact_field[data-type=select]::after {
    margin-top: 16px !important;
}

You will probably need to tweak the amount of pixels to fit your form field design. I used 16px in my example.

Before

Dropdown field before the fixes

A dropdown field with an extra title above the field and the icon slightly out of place.

After

Dropdown with extra title and aligned icon

The same dropdown field maintaining the title above the field but with the icon nudged into place.

Bonus: Move the form fields with a plugin instead

Do you want more options, like placing the labels to the left side or the right side of the form fields? The brand new plugin Divi Form Builder lets you move the form fields on top or to the sides. But this is just a tiny fraction of the features in this powerful form plugin.

Divi Form Builder

The Divi Form Builder adds two new modules to Divi that enables:

  • Saving form entries in the database
  • File uploads in Divi forms
  • Date pickers in Divi forms
  • Newsletter integration
  • Advanced success message & error message layouts
  • Frontend post forms
  • Register forms
  • Login forms
  • Custom field mapping
  • Conditional logic
  • Advanced design settings
  • … and much more using the powerful Divi Builder!

Divi Form Builder is like the Divi Contact Form module but on rocket fuel.

If you purchase Divi Form Builder via the affiliate link above, I will get a small commission but it will never cost more for you. Thank you for making this blog possible.

That’s all for today!

I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.

Related post: 7 Tips For Better Divi Forms

Free course: Create a website from scratch with Divi

Related posts

1 Comment
  1. Thank you for this tutorial. Doing this will certainly improve a website’s UX. It could also be very useful for WooCommerce stores. I’m bookmarking this tutorial for future use. Now I will no longer need to use a 3rd party plugin for creating my forms but can do it right with Divi.

    Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.