Contact Form Shortcode

Updated on January 18, 2019

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

Displaying a Contact Form

To display a contact form:

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

Contact Form Shortcode - visual composer screen

3In 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

4When 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

5Click 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.

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

2From Style options, select one of the options: Outline, Modern, Classic, Corporate and Line.
3Click 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.

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:

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

Contact Form Shortcode - configuring captcha

3Click on the Save changes button and update the page to check the result.

Changing field names

To change field names in the Contact Form shortcode, you need do the following:

1Create a child theme first (if you don’t have it yet), you can follow this document to create it.

It’s needed to avoid the overriding issue of your changes if you update the theme in the future.

2Copy this file using an FTP client like FileZilla:

wp-content/themes/jupiter/components/shortcodes/mk_contact_form/styles/corporate.php (if you use Corporate style, if no, select the appropriate file)

To the child theme folder with the same path:


3Edit this file in the child theme.

For example, you want to rename Website field to something else.

At line 19 – 21 you will see:

<div class="<?php echo (('true' == $view_params['phone']) ? 'mk-form-third s_form-all' : 'mk-form-half s_form-all'); ?>">
		<input placeholder="<?php _e( 'Website', 'mk_framework' ); ?>" type="text" name="website" class="text-input s_txt-input" tabindex="<?php echo esc_attr( $view_params['id']++ ); ?>" />

Change Website text in this part of code:

<?php _e( 'Website', 'mk_framework' ); ?>

4Save the file.


Did this answer your question?