Appearance
Add Repeat Container Field
In Fluent Forms, the Repeat Container field allows you to offer your users the option of submitting information through Single/Multiple Fields repeatedly by duplicating the field/s. More specifically, it allows you to include multiple fields inside a single container, enabling users to fill multiple sets of data for the same added fields within your form.
For example, if you want users to submit multiple emails, phone numbers, and website URLs through Fluent Forms, you can use the Repeat Container field. This allows users to add as many entries as needed by duplicating the set field/s with one click.
This article will guide you through the whole process of adding the Repeat Container field in your Fluent Forms for your WordPress Site.
NOTE
Repeat Container requires Fluent Forms Pro. See Upgrade to Fluent Forms Pro Add-on.
Add Repeat Container Field
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.
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.
Now, choose the desired Repeat Container by clicking on it or Drag & Drop it into your editor.
NOTE
Only specific field types can be used within the Repeater Container. For example, the standard Name field is not supported; use a Simple Text field instead for name inputs.
Customize Repeat Container Field
You can see that a Repeat Container field is added to the form. You can edit/customize this field by hovering over it and clicking the Pencil Icon.
It will take you to the Input Customization tab on the right side with options for customizing the Repeat Container field.
Repeat Container
Advanced Options
1. Repeat Container
Configure labels, columns, and width from the Input Customization tab:
A. Element Label: This is the field title that the users will see when filling out the Repeat Container field in a form. You can enter any text here to help users understand the purpose of the field.
B. Label Placement: Using this option, you can determine the position of the label title where the user will see it. The available options are Top, Right, Bottom, Left, Hide Label, and Default. All of those are self-explanatory except the Default. If you select the Default option, it will represent your global label placement settings.
C. Admin Field Label: The admin field label is a field title displayed only to admin users. That means, if you want to show a different field label for your admin users when they view the form submissions, you can configure that using this option.
D. Container Columns: Here, you can select the number of columns you want to add to your Repeat Container Field. Remember, each column has the same functionality except for the number of added columns. For example, I added 3 columns.
E. Column Width %: Using this option, you can set the width of the columns. The minimum column width is 10%.
F. 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.
2. Advanced Options
Advanced settings allow further customization to meet specific use cases.
A. Container Class: Use this option to add your custom CSS classes to the field’s wrapper.
B. Name Attribute: The input field’s name attribute is the HTML equivalent of the same name. You don’t need to modify this.
C. Conditional Logic: This option allows the Repeat Container field to run only when your conditions match. To learn more, see Set Up Forms With Conditional Logic in Fluent Forms.
D. Max Repeat inputs: Using this option, you can specify the maximum number of times users can duplicate the fields within the Repeater Container. To total numeric values entered across the repeated rows, see How to Add Calc Values on the Repeat Field.
Now, click the Plus Icon to add three different fields horizontally inside three columns. Plus, you can adjust the position of the fields by dragging them.
You can also customize the fields you added inside the columns by hovering over them and clicking the Pencil Icon. It will take you to the Input Customization tab for the selected field and provide options for customization.
Embed the Form into Frontend
Once you complete the customization, click the Save Form button to save all the 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 Repeat Container field
Here is the preview of the added Repeat Container field under the Form.
This way, you can easily add the Repeat Container fields in Fluent Forms!