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.
Displaying a Contact Form
To display a contact form:
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. |
| 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. |
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:
Changing field names
To change field names in the Contact Form shortcode, you need do the following:
It’s needed to avoid the overriding issue of your changes if you update the theme in the future.
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
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' ); ?>
