Create an input field group: bring input fields together

In the Input Fields view, an input field group brings together input fields that belong together, for example all input fields for the header. Users see them together under one heading in the design generator, which keeps a long form tidy. An input field group changes nothing in the design.

This takes four steps:

1. Create the input field group in the Input Fields view.
2. Configure the input field group in the Input Fields view.
3. Take input fields out of the input field group again if needed.
4. Test the input field group in the design generator.

Create the input field group

The Input Fields view shows all input fields of your template, and you configure them there.

1. Click Input Fields at the top right of the toolbar. The Input Fields view opens.
   
2. Click the checkbox on the left of every input field that should go into the group. Go in the order users should see them in. That is the order they will have inside the group.
3. Click Group in the bar at the top. The input fields now sit together in an input field group. The group takes the place of the input field you ticked first. Group selected fields in the menu with the three dots next to Delete does the same.
   Group is greyed out?

   The button only works once at least one input field is ticked. Click the checkbox on the left of an input field.

   
   

Configure the input field group

1. Change the group's heading: click New Group field in the group's header and type a heading users understand, for example "Header". Users see it above the group in the design generator. If the group should have no heading, delete the text.
2. Add more input fields if you need them:
   • For an existing input field: Drag it into the group by the three lines on the left of its header.
   • For a new input field: Click Add field at the bottom of the group and choose a field type. The new input field appears at the end of the group. It isn't connected to any element yet. It is usually easier to create the input field with the Create Input Field tool and then drag it into the group.
3. Click × at the top right to close the Input Fields view.

Take input fields out of the group

1. Click Input Fields at the top right of the toolbar. The Input Fields view opens.
2. Click the checkbox on the left of the input fields in the group that you want to take out.
3. Click the three dots next to Delete in the bar at the top. A menu opens.
4. Click Ungroup selected fields. The input fields now sit directly above the group. If the group is empty afterwards, it disappears.
   Ungroup selected fields is greyed out?

   The menu item only works for input fields that sit inside a group. If you only ticked the group itself, click the checkboxes of the input fields inside it instead.

5. Click × at the top right to close the Input Fields view.

Test the input field group in the design generator

The design generator is the page where users fill in your template and export their design. There you see the group the way users see it.

1. When you are done with your input fields, click Share at the top right and then Publish Template Link. If you have published the template before, the menu item is called Open Template Campaign. A popup with the share settings opens. Your template can now be reached through a link.
2. Click Copy URL and open the link in a new browser tab. The design generator opens. On a computer, the input fields are on the left and the design on the right.
3. Look whether the input fields sit together under the group's heading. On a phone, the design generator shows the input fields one after the other, usually one at a time, without the shared box.