How to Style the Form Labels Beside the Fields

Are you interested in customizing the layout of your form labels to appear alongside the corresponding fields? By default, form labels typically appear above the associated form field. However, in this tutorial, we’ll demonstrate how to achieve a layout where the form label and field are displayed on the same line. To accomplish this, we’ll incorporate some CSS styling.

Creating the form

First, you’ll need to create your form and add any and all necessary form fields. If you need help in creating your form, please see this documentation.

Once you’ve created your form, click on the Settings » General, click the Advanced arrow to open these options. Once there, inside the Form CSS Class, add the class wpforms-inline-labels.

Styling the labels beside the fields

Now it’s time to add the CSS to your site. If you’re not sure how to add CSS to your site, please check out this tutorial.

.wpforms-container.wpforms-inline-labels .wpforms-form .wpforms-field {
    display: grid;
    grid-template-columns: 225px auto;
    align-items: center;
}

After adding this CSS, you’ll see your form labels now appear on the same line as your form fields.

And that’s it! Would you like to style the form labels to appear inside the form field? Check out our tutorial on How to Create a Form With Floating Labels.

FAQ

Q: What if I wanted to apply this to all of my forms?

A: If you’d like this for all of your forms, use this CSS instead and skip the step above when adding the Form CSS Class. This wouldn’t be necessary if you wanted to apply this for all forms.

.wpforms-container .wpforms-form .wpforms-field {
    display: grid;
    grid-template-columns: 225px auto;
    align-items: center;
}