This article will walk you step-by-step through the process of creating a classic form within the Forms application.

A Classic Form is a general form that provides each question on the same page followed by a button to submit. This is a basic form that you’re likely accustomed to seeing on websites or landing pages.

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.

You will view a menu containing the three available form types. Click on Classic Form.

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.

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 components in question can be found in the leftmost column on the page under Fields. Alongside these components are Styles and additional Options you can use to further customize your form:

Because there is a large variety of elements and options, we created separate help documents that detail each, which you can find below:

You can quickly start adding fields simply by clicking one from the lefthand column, dragging it to the empty field, 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 hovering over it and clicking on the gear icon that appears on the right.

You can change the name of this field by editing the text under Label. This is the only field that is required. Read the tooltips for more information about these other fields if you decide to utilize the additional customization.

If you’re not happy with a field placement, you can easily rearrange your current form by hovering over the field and dragging it once the 4-directional arrow appears.

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.

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.

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.

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.

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.

Below, we created an example of a basic classic form to help guide your building process:

We grabbed four elements from the Preset Elements: First Name, Last Name, Mobile Phone, and Email address. These fields are ready to go as-is. We then added a Text Field from Basic and named it “Business Name.”

We also added a Checkbox field from Basic and wrote our description.

The Submit button will always exist by default with no additional action required on your part.

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.

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 of the 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 classic form should now appear in the table under the My Forms tab.