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

A Card Form is a form that asks users specific questions in an individualized manner. They must answer each question before proceeding to the next. You are limited to adding just one element to each card with this type of form.

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 Card 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.

An element that’s unique to Card forms is the Card title found at the top of the form. In addition to your form name, you can create a title for each page that's listed in your card form. Do this by hovering over the title section where it says "Page 1" and clicking the gear icon. Then, name your page under the "Title" field.

In the left-side column, you'll find the menus for Fields, Styles, and additional Options. These are the fields and widgets you can drag and drop to start building your new card 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 elements simply by clicking one from the lefthand column and dragging it to the form page.

The Pre-Defined Fields at the top are ready-to-go elements 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 Elements 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 element by clicking on the text and entering what you would like instead.

Most submission forms will require certain information before a user can submit their entry. You can manually make any element Required by clicking on the gear icon that appears when hovering over an element. Then, click on the Validation tab in the menu that appears.

To require an element, simply check the box next to Required.

If you decide that you don’t like an element or deem it unnecessary, you can quickly delete the element by clicking the x that appears when hovering over it. This will remove the element and all settings immediately.

In addition to selecting your elements, 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 certain attributes of 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. Alternatively, you can enter a URL that will redirect users after successfully submitting the form.

Next, you will see fields titled On Page View and On Submit. If you hover over the tooltip, you will see that these fields contain events that you can trigger when these take place.

Finally, you will notice that there is a field for your 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.

After you create your first card, you can create another card by clicking on the green button that says + Page. You can add as many new cards as you would like to complete 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.

After clicking Publish, a new menu will appear.

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