How to Create a Contact Page

 ›  CMS WordPress  ›  How to Create a Contact Page

Almost every website includes a contact page where users can send messages to the site administrator.
Let’s go through the simple steps to create a similar form on your website.
Log in to your WordPress admin panel by visiting Your_Domain/wp-admin/ or through your Client Area:

Let’s create a «Contact» page. Start by navigating to «Pages» / «All Pages».

Click the «Add New Page».

Enter a name for the page and click the «Use Divi Builder».

Select «Build From Scratch».

Choose a block layout based on your page design. For this example, we’ll select a full-width block.

Select the «Contact Form» module (not to be confused with the «Email Optin» module).

If you're not seeing the «Email» tab directly, look under the «Content» tab in the Contact Form module settings.
There, you should find a field labeled «Email» where you can enter the recipient's email address:

Enter the email address where you want to receive messages from the contact form.

By default, your contact form includes the following fields:

• Name
• Email
• Message

You can add additional fields if needed by clicking the «+» button:

As an example, let’s add a field for entering a phone number.

• In the «Field ID» section, enter a name using Latin characters, such as «phone»
• In the «Title» section, enter the label, for example, «Phone number»

Since the phone number field should only accept numeric input, you can configure it to allow numbers only.
Go to the «Field Options» tab, and under «Allowed Characters», select «Numbers Only (0-9)».

By default, all form fields are set as required, meaning users will see an error message if they leave a field empty.
If the phone number field isn’t mandatory for your form, you can make it optional.
To do this, go to the «Field Options» tab and toggle off the «Required Field» option.

Click «Save».

The phone number field has been successfully added and configured, but it’s currently at the bottom of the form. For better organization, it should be placed above the «Message» field.

Reordering the fields is simple. Open the module settings to adjust the field order.

Hover over the «phone» field until the cursor changes.
Click and hold the left mouse button, drag the field to your desired position in the list, and release the button to place it there.

A Captcha is enabled by default below the message field to protect your form from spam bots.
While we recommend keeping it active, you can disable it if necessary by going to the «Spam Protection» section.

Save your settings.

Let’s save the changes for this page. Click the «...» button.

Click the «Publish».

Click the «Save».

Test the contact form on your website to ensure it’s working correctly.