How to Create a Web Form
Introduction to Web Forms
Using the Forms tool you can create and integrate person forms into the HTML pages of your website. These forms can capture visitor information and store it in the database.
For example, you can create a simple Newsletter Subscription form that requests a visitor's name and email address. If the visitor selects "I want to subscribe" and clicks Submit, a new person will be created and added to a specific email list defined during form creation:
A key feature of the form is its ability to recognize returning visitors who have previously registered on your site. By utilizing web browser cookies, the form hides the name and email fields for recognized visitors, who only need to select the checkbox to subscribe to the newsletter:
Now, let's proceed with the steps to create this simple form.
How to Create a Web Form from a Template
When creating a new web form, you have the option to choose from a selection of predefined templates such as Download Document, Event Registration, Contact Data Request, and more.
To create a new web form using a template:
- Click Forms in the left menu to go to the Forms page.
- Click New Form.
- In the sliding panel that appears, select a form template and enter a name for your form:
- Click Create. The form editor will open, allowing you to customize the form created from the selected template.
How to Create a Web Form from scratch
Now let's create a form from scratch, specifically a newsletter subscription form. For recognized visitors, the form will only display the "Submit" button.
To create a new form from scratch:
- Please click Forms in the left menu to go to the Forms page.
- Click New Form.
- Select Empty form and enter a name for your form:
- Click Create. An empty form will appear.
- On the right side, you will see your first form, which currently only includes the Submit button:
- Click the Content tab to access a tabbed page with blocks that can be added to your form. Drag the desired blocks to the form area on the right.
- Start by dragging the First Name block to the form. Drag all the fields above the Submit button:
- When you add a block, it will be selected, and the Block tab with options for the selected block will open. Use the Show Field For setting to define if the block should be visible to all visitors, recognized visitors, or anonymous visitors. Select Anonymous Persons for the name and email fields:
Select the Mandatory setting for the field so that visitors will have to fill it in. (All mandatory fields are indicated by a red asterisk next to them.)
- Repeat the process for the "Last Name " and "E-mail" blocks, setting them to show for anonymous persons.
Note: A form must have an email or phone field!
- Now let's add the registration capability to this form.
Add the Checkbox block to the bottom of the form (above the Submit button).
Edit its Label to "I want to subscribe to your newsletter" and set the Show Field For setting to All Persons.
Then please set the checkbox type to Subscription List and select the appropriate list for subscribed persons. (Please refer to the Checkbox types chapter if you want more information.)
Select Mandatory for the checkbox, ensuring that only visitors who wish to subscribe can click Submit.
- Optionally, add the Reset Known Person block to the top of the form.
- Rename the "Submit" button to something more meaningful, like "Subscribe me". For this select the Submit field and change its Label field.
- Include a message to display to the user after clicking "Subscribe me". Use the Show Text option under Submit Action to enter HTML-formatted text. For example, you can enter: "Thank you for your subscription !<br/>You will receive our latest newsletter shortly."
- Click Save.
To test the form, click Preview.
Select Show for Identified to see how the form appears for known site visitors:
Select Show for Anonymous to view the form for anonymous visitors, which should display the form with empty fields:
Fill in the form and click "Subscribe me":
You should see the designated text displayed:
To test the form on a real web page, click Publish, and then use the Embed button to copy the code and paste it into your web page.