This article will walk you step-by-step through the process of creating a group form within the Forms application.
A Group Form is a form that groups specific questions or elements that the user must answer before proceeding to the next step. You can create as many groups as necessary to obtain all of the information you require.
You can begin the process either by clicking on the + New Form button in the top-right corner or by clicking on the Builder tab.
Selecting the Form Type
You will view a menu containing the three available form types. Click on Group Form.
Enter Your Form Name
Next, you will need to enter a title for your form. The name should relate to the campaign you are using it for or the general goal of the form.
After you decide on a name, click the blue Create button.
Using the Form Builder
The Builder tab will update and reveal the form builder. You will see the title of your form at the top with a space below that reads “Drag and Drop a Form Component.”
The element that’s unique to Group forms is the pages you have available in the top-left corner of the form. By default, you will have one page but can create more by clicking + Page.
The left-side column contains the fields you need to start creating your new form.
Because there is a large variety of fields and options, we created separate help documents that detail each, which you can find below:
Adding Fields
You can quickly start adding fields simply by clicking one from the lefthand column, dragging it to the space, and dropping it there.
The Pre-Defined Fields at the top are ready-to-go fields that allow you to create a new form quickly and simply. It contains common go-to information requests such as Name, Phone Number, Email, and others. These elements provide everything you need to create a basic form.
The Basic section provides more customization options by leaving the fields empty for you to edit. They function the same, allowing you to drag and drop them wherever you would like.
The Advanced section provides more in-depth components such as File Upload, Image Upload, and a Date/Time selector. Be sure to review the settings once again by clicking on the gear icon that appears on the right before using these within your form.
Finally, the Layout section allows you to implement layout options that completely change how your form appears. For example, using the Columns component will split a section into two columns where you can then drag and drop two unique components to occupy those columns.
Note - You can edit the title of any Preset field by going to the settings and changing the Label.
Moving Fields
If you’re not happy with a field placement, you can easily rearrange your current form by hovering over the field and dragging it as necessary.
Making a Field Required
Most submission forms will require certain information before a user can submit their entry. You can manually make any field required by accessing the edit menu from the gear on the right.
From the menu, click over to the Validation tab. Then, check the box next to Required. Then, click Save.
Deleting a Field
If you decide that you don’t like a field or deem it unnecessary, you can quickly delete it by clicking the red X when hovering over it.
Styling Your Form
In addition to selecting your fields, you can further stylize your form by clicking on the Styles tab in the lefthand column. You will find various options available that allow you to change font colors, background colors, sizing options and more.
Options
This tab is also found in the leftmost column and provides additional options to further customize your form. Here, you can modify the form name, add categories and tags, and determine what happens after a user submits the form.
Currently, you can create a message to display upon submitting the form or you can redirect the user to a new URL.
You will also notice that the bottom three fields refer to the Facebook Pixel. You can use these options to help you use this form to track specific instances with your Pixel. However, this process is a bit more complex, which is why we created a separate article to explain the various options in-depth here.
Adding New Groups
After you create your first group, you can create another group by clicking on the green +Page button in the top-left corner.
Preview Your Form
If at any point you’d like to preview what your form looks like on an actual web page, you can preview it by clicking the icon located in the top-right corner.
Example Form
Below, we created an example of a basic group form to help guide your building process:
We created a two-page group form that asks for some basic qualifying information. To start, we went to the Layout section and added the Columns element to break our page into two sections. Then, we dragged First Name, Last Name, Email, and Phone to the areas pictured above.
For page two, we took the Radio option from Basic and added it to the form. For options like these, you will need to click the gear icon that appears when you hover over the field. We wrote our income question under Label. Then, switch to the Data tab to create your values. The Label is what users will see, and the Value is what will come back to you with the form submission.
After this, we click Save to make sure it stores our new radio button options.
That’s it! Our form is ready for publishing. Once you are satisfied with your new form, click Publish in the top-right corner of the page.
Publish Form
After clicking Publish, a new menu will appear that looks like this:
You have three methods for sharing your form. Link to Share provides a direct link to the form, which you can send through messaging or post directly onto a web page.
Embed provides the HTML code you need to post in the text editor of your web page. This will integrate an instance form, allowing it to appear as designed for users to interact with on the website.
Embedding with the raw code generally allows it to load faster, while also allowing web developers to edit the HTML directly from the website. The downside is that you must re-embed your form every time you make changes to it within the Forms app.
iFrame embedding integrates a “live” version of your form. This means that any changes you make to your form in the Forms app should automatically be reflected on the website. Your form may load slightly slower as it must go through an additional step to load. Web developers will also not be able to edit your form within the website HTML.
Choose the option that’s best for you and click on the blue Copy button at the bottom.
Your new group form should now appear in the table under the My Forms tab.