How to Create a Multi-Column Form in JupiterX

Crafting a form that displays fields in multiple columns can be a great way to optimize space and improve the user experience. With JupiterX, you can easily arrange form fields side by side. Here's how to get started:

Step-by-Step Guide to Setting Up Multi-Column Forms:

Step 1: Accessing the Form Fields

Navigate to the Elementor page editor where your form is located.
Click on your Form widget to open its settings.
Within the settings, go to the Content tab and then click on Form Fields.

Step 2: Adjusting Column Width

Choose a field from your form that you want to be part of a multi-column layout.
Locate the Column Width option for that field.
Select the desired width for your field. You can choose any width between 20% and 100%.

Remember:

To have two fields appear side by side, their combined column widths should add up to 100%. For instance, two fields can each be set to 50% to fit in a single row.
The width of the Submit button can be adjusted in the same manner.

Tip: If you're looking to create a form with more than two columns, simply adjust the column widths of the fields accordingly, ensuring that the total does not exceed 100% for any single row.

Step 3: Responsiveness Considerations

To ensure your form looks good on all devices, click the mobile editing icon next to the Column Width setting.
Adjust the column widths for mobile and tablet views to enhance usability on smaller screens.

Note: Always preview your form on different devices to make sure it maintains a user-friendly layout across all platforms.

Creating a multi-column form with JupiterX is that simple! By following these straightforward steps, you'll have an organized and space-efficient form in no time. If you have any questions or need further guidance, feel free to consult our detailed documentation or reach out to our support team for personal assistance.