Multi-Column Form Block Using Utility Classes

The Spectra plugin (formerly known as Ultimate Addons for Gutenberg) includes powerful blocks to create custom forms. With Spectra, you can easily design multi-column forms by adding utility classes directly in the form fields.

✏️ How to Create a Multi-Column Form Block

Follow these simple steps to create a responsive multi-column layout in your form block:

✅ Step 1: Add a Form Block

• Open the page or post in the Gutenberg editor.
• Click the “+” button to add a new block.
• Search for “Form (Spectra)” and insert it.

✅ Step 2: Add Your Form Fields

• Inside the form block, add the desired fields (e.g., Name, Email, Phone, etc.).
• Add as many fields as you need.

✅ Step 3: Apply Multi-Column Layout

To make fields appear side by side (in columns), you can add the following predefined classes to each field’s Advanced settings.

🧪 Where to Add the Class?

You need to apply the class on each form field individually using the Advanced tab:

➡️ Steps:

1. Click on the form field block (e.g., Name).
2. In the right sidebar, expand the Advanced tab.
3. Locate the “Additional CSS class(es)” field.
4. Enter the class name like: uag-col-2, uag-col-3, or uag-col-4.
5. Repeat the process for other fields as needed.

That’s it! If you have any other questions, feel free to open a support ticket below. We’re always here to help!