Use the field’s layout controls to adjust how much horizontal space it occupies. The editor provides a responsive Width control and a separate Grid Column Span control in the field’s Advance tab, under Layout & ID.
Change the field width
- Select the field on the canvas.
- Open its Advance tab and expand Layout & ID.
- Find Width and adjust the value and unit.
- Choose from the supported units: px, %, em, or rem.
- Where the responsive control is available, review the setting for the relevant device size rather than assuming one value will suit every layout.
- Save the form and preview the result at desktop and mobile widths.
Understand Grid Column Span
Grid Column Span is a separate responsive control with a range from 1 to 12 and a default value of 1. It controls the field’s grid span; it is not the same setting as the percentage or unit-based Width control. Adjust one control at a time and preview the result so you can tell which layout change produced the desired effect.
Arrange fields side by side
- Place related fields in the same row when you want them to share a horizontal layout.
- Adjust each field’s width only as needed; a 100% width can make a field occupy the full available line.
- Check narrow screens carefully, because a layout that fits on desktop may need different responsive values.
- If you need to change the order of fields or rows, follow Reorder Form Fields.
Screenshot to add: Advance tab with Layout & ID expanded and the Width and Grid Column Span controls visible