In Divi 5, the Contact Form module lays out its fields with Flexbox, and every field has its own width setting. This guide shows you how to make a field span the full width of the form, how to place two fields next to each other on one line, and how to adjust the space between them - all without custom CSS.

If you're coming from Divi 4 and looking for a "Make Fullwidth" toggle, it no longer exists. In Divi 5, field widths are controlled by the Column Class setting inside each field's own settings.

Where field widths are controlled

Each field in the Contact Form is its own element with its own settings. The width lives in the field's Sizing option group:

Open the Contact Form module settings by clicking the gear icon on the module.
In the Content tab, find the field you want to resize and click the Pencil icon next to it.
In the field's settings, go to the Design tab and open the Sizing option group.
Set the Column Class option.

Column Class defines how wide the field is as a column in the form's flex layout - for example, Fullwidth, 1/2, or 1/3. It works because the Contact Form's layout is set to Flex by default. If you changed the module's Layout to Block, the Column Class has no effect.

Make a field full-width

To make a field (for example, the Name or Email field) span the entire form:

Open the Contact Form module settings.
Click the Pencil icon next to the field.
Go to the Design tab → Sizing → Column Class.
Choose Fullwidth.

The field now takes the full width of the form, and any fields after it move to the next line.

Place two fields side by side

To put two fields on the same line (for example, Name and Email):

Click the Pencil icon next to the first field.
Go to Design → Sizing → Column Class and choose 1/2.
Repeat for the second field, setting its Column Class to 1/2 as well.

The two fields now share one line, each taking half the available width. The same approach works for three fields at 1/3, four at 1/4, and so on.

Note: Make sure the two fields sit directly next to each other in the field list. A Fullwidth field between them forces a line break.

Adjust the space between fields

If side-by-side fields sit too close together or too far apart, adjust the field spacing in the Contact Form module itself:

Open the Contact Form module settings (the module, not an individual field).
Go to the Design tab and open the Layout option group.
Adjust the Horizontal and/or Vertical Gaps values.

💡Pro tip: Avoid using your Row's gap settings to space form fields. Those gaps apply to the whole layout and can shift the entire form. Fields Margin targets only the form fields.