# Add Multiple Column Containers in Forms – Paymattic

- URL: https://paymattic.com/docs/add-multiple-column-containers-in-forms/
- Markdown: https://paymattic.com/docs/add-multiple-column-containers-in-forms/index.md
- Modified: 2024-10-18

---

# How can we help you?

Popular Search subscriptionstriperecurringtheuser

View Categories

In [Paymattic](/) you have the **Multiple Column Container** option to add multiple fields horizontally in one column instead of a new column for each field for your **Paymattic Forms**and make them look more compact and organized to your users.

This article will guide you on how to add the **Multiple Column Container** to your WordPress Site through Paymattic Forms.

## Adding Multiple Column Containers #

To learn how to add the **Multiple Column Containers** in a Paymattic Form, follow the steps with the screenshots below –

Open your **Desired Form** where you wish to add the **Multiple Column Containers** feature.

If you do not have any existing forms, read [Create a Form from Scratch](/docs/how-to-create-a-form-from-scratch-with-paymattic/) or [Create a Form using Templates](/docs/simple-form-templates/) documentation.

For example, I choose an existing form to show the whole process.

![](https://paymattic.com/wp-content/uploads/2024/10/open-desired-form-scaled.webp)

Once you open the **Editor** page, add the necessary fields by typing the**“ / ”**or clicking the **Plus Icon** placed at the bottom.

![](https://paymattic.com/wp-content/uploads/2024/10/type-22-22-or-click-2222-to-add-desired-fileds.webp)

On the **Choose form field** page, you will see that **Two Types**of **Multiple Column Container** fields are available under the **General Fields**section. These are:

- **Two Column Container**: If you select this container, you will get two columns horizontally where you can add two different fields.

- **Three Column Container**: If you select this container, you will get three columns horizontally where you can add three different fields.

Both types of containers have the same functionality except for the number of added columns.

For example, I selected the **Three Column Container** to show the process.

![](https://paymattic.com/wp-content/uploads/2024/10/Three-Column-Container.webp)

## Customizing the Field #

Here, you can see three columns are added!

Now, you can add three different fields horizontally inside these columns.  
To add fields, click the **Plus Icon** of each column.

![](https://paymattic.com/wp-content/uploads/2024/10/Added-Three-column-container.webp)

Once you click the Plus Icon, it will redirect you again to the **Choose form field**page where you will get all the field options that Paymattic offers.

Now, choose anyone according to your needs just by clicking on it.  
But, we always suggest you keep the **[Name](/docs/how-to-use-general-form-input-fields-in-wordpress-with-paymattic/#5-toc-title)**and **[Email](/docs/how-to-use-general-form-input-fields-in-wordpress-with-paymattic/#6-toc-title)** field at the beginning of any Form.

Remember, almost every fields have a similar functionality. For example, I chose the [Name](/docs/how-to-use-general-form-input-fields-in-wordpress-with-paymattic/#5-toc-title) field to show the process.

![](https://paymattic.com/wp-content/uploads/2024/10/Choose-fields.webp)

After adding the fields, you can **change the name** **of the fields** according to your preference by clicking the **Pencil/Edit**icon.

Also, you can see a **Black Box** with **three icon options** right**next**to the **Pencil** icon.  
These are:

- **Trash Icon**: Use this, if you want to delete any fields anytime if needed.

- **Plus Icon**: Use this to add a new field right below. You can also use the **Plus Icon**placed at the bottom of the page.

- **Settings Icon**: Use this to **Edit** the field’s settings.

![](https://paymattic.com/wp-content/uploads/2024/10/Settings-icon-for-name-field.webp)

### General Settings #

Once you click the Settings icon, the **General** settings options will appear. These are:

- **Required**: Enable this option to make this field mandatory to users for a successful submission.

- **Default Value**: You can set a value for this field using the **Shortcode** button or by entering a **Custom** **Value** to display default data in your form.

Once you set up all the settings, click the **Update** button to save all the customizations.

![](https://paymattic.com/wp-content/uploads/2024/10/General-settings-tab-inside-a-field.webp)

### Advanced Settings #

Once you complete the General settings, go to the **Advanced** tab, and you will find some advanced settings for your field. These are:

- **Admin Label**: This label is used for the admin wants to see the field’s label from the back end.

- **Field Wrapper CSS Class**: This is used for adding a Custom CSS/JS for an entire field of a specific form using the Field Wrapper CSS Class element. To learn more, click [here](/docs/how-to-create-custom-css-js-in-wordpress-with-paymattic/).

- **Input Elements CSS Class**: This is used for adding a Custom CSS/JS for a specific input field of a form using the Input Elements CSS Class element. To learn more, click [here](/docs/how-to-create-custom-css-js-in-wordpress-with-paymattic/).

- **Conditional Render**: You can set conditional logic to display the field in the form that will be triggered by specific actions taken on a previous input field. To learn more about conditional renderings, click [here](/docs/how-to-use-conditional-logic-in-form-fields-with-paymattic/).

- **Field ID**: This option is used for adding or tracking form fields. Plus, creating the custom CSS/JS for a specific form field.

Once you finish, click the **Update** button to save all your configuration.

![](https://paymattic.com/wp-content/uploads/2024/10/Advanced-settings-tab-inside-a-field.webp)

### Customize with Drag & Drop #

This field also has an amazing drag & drop feature to smoothly adjust your column size and move fields from one column to another with less effort and time.

To learn the customization of the Multi-Column Containers field with this drag & drop feature, follow the GIF below –

![](https://paymattic.com/wp-content/uploads/2024/10/Drag-Drop-feature-of-Multi-column-container-Gif.gif)

## Embedding the Form into Frontend #

Here, you can see the desiredfields are added inside the **Three Comuln Container**field to the form.

You can edit the field name and settings. To learn more about form editing, read this [Documentation](/docs/how-to-edit-forms-in-wordpress-with-paymattic/)*.*

Also, to embed and display the form on a specific Page/Post, **copy** this **Shortcode** and paste it into your desired Page/Post.

Once you complete the edit, press the **Save** button to save all the changes you made.  
And, to see the **Preview** of the form, click the **Eye** icon.

![](https://paymattic.com/wp-content/uploads/2024/10/Save-preview-and-shotcode-button-scaled.webp)

## Preview of Multiple Column Containers #

Here is the **preview** of the **Multiple Column Container**fields in a **Form**.

![](https://paymattic.com/wp-content/uploads/2024/10/Preview-of-Multiple-Column-Container.webp)

This way you can easily add the **Multiple Column Container** field in Paymattic Forms!  
If you have any further questions, concerns, or suggestions, please do not hesitate to contact our [@support team](https://wpmanageninja.com/support-tickets/?utm_source=wpmn&utm_medium=home&utm_campaign=site#/). Thank you.

##### What are your Feelings

#### Share This Article :

- [![Facebook](https://paymattic.com/wp-content/plugins/betterdocs/assets/static/images/social/facebook.svg?v=4.8.1)](https://www.facebook.com/sharer/sharer.php?u=https://paymattic.com/docs/add-multiple-column-containers-in-forms/)
- [![X](https://paymattic.com/wp-content/plugins/betterdocs/assets/static/images/social/twitter.svg?v=4.8.1)](https://twitter.com/intent/tweet?url=https://paymattic.com/docs/add-multiple-column-containers-in-forms/)
- [![LinkedIn](https://paymattic.com/wp-content/plugins/betterdocs/assets/static/images/social/linkedin.svg?v=4.8.1)](https://www.linkedin.com/shareArticle?mini=true&url=https://paymattic.com/docs/add-multiple-column-containers-in-forms/)
- [![Pinterest](https://paymattic.com/wp-content/plugins/betterdocs/assets/static/images/social/pinterest.svg?v=4.8.1)](https://pinterest.com/pin/create/button/?url=https://paymattic.com/docs/add-multiple-column-containers-in-forms/)

Still stuck? How can we help? 

## How can we help?

Updated on October 18, 2024

[How to Create PDF Feed for Form Submissions?](/docs/how-to-create-pdf-feed-for-form-submissions/)[Create a Form from Scratch with Paymattic](/docs/how-to-create-a-form-from-scratch-with-paymattic/)

Powered by [BetterDocs](https://betterdocs.co)