Add Container Fields

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.

NOTE

Use the Container field to build compact inline forms that sit inside text, paragraphs, or other content without breaking your page layout. See Inline Opt-in Form Using Fluent Forms.

Add Container Fields

Go to Forms from the Fluent Forms navbar, select the form you want to edit, and click Edit to open the form editor.

NOTE

If you do not have any existing forms, read Create a Form from Scratch or Create a Form using Templates to create a new one. For example, I choose an existing form to show the whole process.

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. For collapsible sections use the Accordion Container, and for repeatable sets of fields use the Repeat Container.

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

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

For example, I added the Name, Email, and Custom Submit Button fields respectively inside the three columns.

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

NOTE

Adding a Custom Submit Button to a container hides the form’s default Submit button. Only the custom button is shown.

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

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 container field to function conditionally based on your submission values according to your set of conditional logic/s. To learn more, read this Documentation.

C. Column Width: Using this option, you can set the width of the columns. The minimum column width is 10%. You can also drag the column borders to resize them visually with the Resizeable Container.

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.

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.

TIP

Match the form to your site design with the Official Form Styler of Fluent Forms or custom CSS in Fluent Forms Styling/Custom CSS.

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 button in 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.

Preview of Container field

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

This way you can add the Container field and create as many Inline Forms as you want with Fluent Forms.