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 TextSets the button text. The default text is Submit.
EmailSets 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 TextDisplays 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 DesignThe predefined design for the form.
Design PropertiesSettings 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
SkinSets the skin color scheme. This option is only available for the Outline and Modern predefined design.
Background ColorSets the fields background color in the Corporate predefined design.
Border ColorSets the fields border color in the Corporate predefined design.
Font ColorSets the fields text color in the Corporate predefined design.
Button Background ColorSets the button background color in the Corporate predefined design.
Button Font ColorSets the button text color in the Corporate predefined design.
Skin ColorSets the text and border color in the Line predefined design.
Button Text ColorSets 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.

Changing field names

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

1
Create 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.

2
Copy 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:

wp-content/themes/jupiter-CHILD/components/shortcodes/mk_contact_form/styles/corporate.php

3
Edit 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']++ ); ?>" />
	</div>

Change Website text in this part of code:

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


4
Save the file.

x
Note: The same process can be done if you want to remove some field. Just delete the whole section for that field.
x
Note: If you want to rename fields in Classic, Modern or Line styles, you need copy the folder wp-content/themes/jupiter/components/shortcodes/mk_contact_form/components to the child theme and edit the files in wp-content/themes/jupiter-CHILD/components/shortcodes/mk_contact_form/components directory.

 

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket