---
title: Add Container Fields in Fluent Forms
description: "In **Fluent Forms**, the **Container** field allows you to add multiple fields horizontally in one row instead of a new row for each field for your **Fluent Forms**, and make them look more compact and organized to your users. This…"
url: "https://fluentforms.com/docs/add-container-fields-in-fluent-forms/"
updated: "2025-06-03"
category: Field Types / Container Fields
---

# Add Container Fields in Fluent Forms

In **Fluent Forms**, the **Container** field allows you to add multiple fields horizontally in one row instead of a new row for each field for your **Fluent Forms**, and make them look more compact and organized to your users. This article will guide you through adding the **Container** input fields to your **Fluent Forms** for your **WordPress Site**.

> **Also**, the **Container** filed allows you to create a straightforward, simple, and easy-to-use **Iinline Form** (i,e., the forms can be embedded within a line of text, a paragraph, or any other content area without breaking the page layout).

[How to Create an Inline Form with WP Fluent Forms WordPress Plugin](https://www.youtube.com/embed/S0FDgz5hTP4?feature=oembed)

## Add Container Fields

To learn how to add the **Container** input fields, follow the steps with screenshots below – 

First, go tothe**Forms**section from the **Fluent Forms Navbar,**chooseadesired**Form** to which you wish to add the**Container**field**,**and click the **Pencil/Edit** icon to open the **Editor** page of that form.

> If you do not have any existing forms, read the [Create a Form from Scratch](https://fluentforms.com/docs/how-to-create-a-form-with-fluent-forms/) or [Create a Form using Templates](https://fluentforms.com/docs/using-and-customizing-pre-built-quick-forms-in-fluent-forms/) documentation to create a new one. **For example**, I choose an existing form to show the whole process.

![1. Open desired form 6 scaled 45070](https://fluentforms.com/wp-content/uploads/2025/02/1.-Open-desired-form-6-scaled.webp)

Once you are on the **Editor** page, click the **Plus** **Icon** in your form editor and open the **Container** input fields module. The **Container** option is also in the right sidebar under the **Input** **Fields** tab. 

Under the **Container** module, you will see that **Six Types**of **Container** fields are available. Each types types of container have the same functionality except the number of added columns.

Now, choose the desired **Column Layout**by clicking on it or **Drag & Drop** it into your editor. **For example**, I selected **Three Column Cotainer**.

![2. Container Fields Three column container scaled 45070](https://fluentforms.com/wp-content/uploads/2025/02/2.-Container-Fields-Three-column-container-scaled.webp)

Now, click the **Plus Icon** to add three different desired fields horizontally inside three columns.

**For example**, I added the [Name](https://fluentforms.com/docs/name-input-field-in-fluent-forms/), [Email](https://fluentforms.com/docs/email-address-input-field-in-fluent-forms/), and [Custom Submit Button](https://fluentforms.com/docs/custom-submit-button-in-fluent-forms/) fields respectively inside the three columns.

![3. Plus Icon to add fields scaled 45070](https://fluentforms.com/wp-content/uploads/2025/02/3.-Plus-Icon-to-add-fields-scaled.webp)

Also, you can simply **Drag & Drop** the **Name**, **Email**, and **Custom Submit** **Button** fields in the columns.

> Note that the default **Submit** button below each form will disappear when you add the **Custom Submit Button**field to the third container.

![4. Entering input fields in columns copy 45070](https://fluentforms.com/wp-content/uploads/2025/02/4.-Entering-input-fields-in-columns-copy.gif)

Plus, you can adjust the position of the fields by aligning them as shown in the GIF below.

![5. Adjusting the width of the field 45070](https://fluentforms.com/wp-content/uploads/2025/02/5.-Adjusting-the-width-of-the-field.gif)

## Customize Container Field 

You can see that a desired **Container** field is added to the form. You can edit this field by**hovering over it** and clicking the **Pencil Icon**.

It will take you to the **Input Customization** tab on the right side and offer you the following options for customizing the desired field. 

A. **Container Class**: Use this option to add your custom CSS classes to the field’s wrapper.

B. **Conditional Logic**: This option allows the coupon field to function conditionally based on your submission values according to your set of conditional logic/s. To learn more, read this [Documentation](https://fluentforms.com/docs/set-up-forms-with-conditional-logic-in-fluent-forms/). 

C. **Column Width**: Using this option, you can set the width of the columns. The minimum column width is 10%.

D. **Auto Width**: Enable the automatic width calculation for columns by clicking the **Yes** button. Otherwise, click the **No** button to adjust the width according to your preference.

![6. Container input customization scaled 45070](https://fluentforms.com/wp-content/uploads/2025/02/6.-Container-input-customization-scaled.webp)

You can also customize the fields you added under the columns by**hovering over them** and clicking the **Pencil Icon**. It will take you to the **Input Customization** tab of the selected field and offer you the options for customizing that field. 

> If you’d like to change the appearance of the form to fit the website design, you can follow our [CSS Guide](https://fluentforms.com/docs/fluent-forms-styling-custom-css/) on how to design the form. Also, have a look at [how to style a Fluent Forms form](https://oxygen4fun.supadezign.com/tutorials/how-to-style-a-fluent-forms-form/).

![7. Plencil Icon to customize fields scaled 45070](https://fluentforms.com/wp-content/uploads/2025/02/7.-Plencil-Icon-to-customize-fields-scaled.webp)

## Embed the Form into Frontend

Once you complete the customization, click the **Save** **Form** button to save all changes you made. Also, to see the form preview, click the **Preview & Design**buttonin the middle.

To integrate and display the form on a specific Page/Post, **copy** the **Shortcode** from the top right side and **paste** it into your desired **Page/Post**.  

![8. Save Form button scaled 45070](https://fluentforms.com/wp-content/uploads/2025/02/8.-Save-Form-button-scaled.webp)

## Preview of Container field

Here, is the preview of the added **Container**field under the Fluent Form. 

![9. Preview Inline form scaled 45070](https://fluentforms.com/wp-content/uploads/2025/02/9.-Preview-Inline-form-scaled.webp)

This way you can add the Container field and create as many **Inline Forms** as you want with **Fluent** **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.