Contact Form Shortcode

Last Updated on

Allow your website audience to communicate with you via the contact form. Having a contact form on your website is extremely important to your visitors. Adding one is simple and there are a lot of styles to choose from.

In this article, we explain how to add a contact form to a page via Visual Composer and configure its settings.

To see the contact form shortcode in action, check out the demo page.

Contact Form Shortcode - demo

In this article


Displaying a Contact Form

To display a contact form:

1
Add or edit an existing page.
2
In the Visual Composer section, click on the + button.

Contact Form Shortcode - visual composer screen

3
In the Add Element pop-up screen, search for Contact Form and click on it to be added to the page.

Contact Form Shortcode - add element

4
When the shortcode is added, a new pop-up screen called Contact Form Settings will open that allows you to configure the shortcode settings.

Contact Form Shortcode - Contact Form Settings

5
Click on Save Changes and publish or update the page to check the result.

Configuring the Form Settings

There are several important settings in the contact form settings pop-up.

Setting Description
Button Text Sets the button text. The default text is Submit.
Email Sets the recipient of the emails. Currently only one recipient is allowed.
Show Phone Number Field? Allows you to add an extra field for phone number to form.
GDPR Consent Check? Displays a consent checkbox in the contact form.
GDPR Conesent Checkbox Text Displays a custom text for the consent checkbox.

Adding a New Form Field

It’s only possible to add the Phone Number field to the form. The setting is called Show Phone Number Field? in the contact form settings pop-up as mentioned in step four.

Adding more fields to the form is impossible by default and several files would have to be changed to reach the result. It’s a developer’s job.

Translating the Form

Translating the form requires a third-party app or plugin. To learn about the process, read the Translating with Loco plugin article.

Configuring SMPT to send emails

By default, WordPress uses the PHP mail function to send the emails. This function is not properly configured in many shared hosting providers so it’s best to use STMP to send emails which is highly reliable.


Configuring the Design

There are two types of settings to configure the design: Predefined Design and Design Properties.

Setting Description
Predefined Design The predefined design for the form.
Design Properties Settings like skin, font color, background color for the form.

1
Click on Edit Contact Form to open the contact form settings pop-up.
To change the predefined design:

2
From Style options, select one of the options: Outline, Modern, Classic, Corporate and Line.
3
Click on Save Options.

Customizing the Design Properties

There are a few settings in the contact form settings pop-up to customize the default styling.

Setting Description
Skin Sets the skin color scheme. This option is only available for the Outline and Modern predefined design.
Background Color Sets the fields background color in the Corporate predefined design.
Border Color Sets the fields border color in the Corporate predefined design.
Font Color Sets the fields text color in the Corporate predefined design.
Button Background Color Sets the button background color in the Corporate predefined design.
Button Font Color Sets the button text color in the Corporate predefined design.
Skin Color Sets the text and border color in the Line predefined design.
Button Text Color Sets the button text color in the Line predefined design.

x
Note: If you need to go beyond the default settings to customize the look and feel of the item’s design, you can add a custom CSS class in the Extra Class Name setting to be able to add specific styling to this shortcode through CSS . For more information, read the Adding a custom CSS class to a shortcode article.

Configuring Captcha

Captcha keeps spam from submitting the forms so you don’t receive spam emails from your site contact form.

To enable the captcha:

1
Install the Artbees Themes Captcha plugin. To learn more about plugin installation, read the Installing plugins article.
2
In the contact form Settings pop-up, enable the Captcha Authentication? setting.

Contact Form Shortcode - configuring captcha

3
Click on the Save changes button and update the page to check the result.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket