Contact Form Widget

Updated on June 4, 2018

The Contact Form widget allows you to display a functional contact form in a widget area/sidebar. It displays the name, phone number, email address, message and Captcha fields.

In this article, we’ll explain how to display a contact form through the Contact Form widget in the Jupiter WordPress theme.

contact form widget


Displaying a Contact Form

In order to display a contact form in a widget area/sidebar, you’ll need to add the JP – Contact Form widget to a widget area/sidebar, and then configure its settings.

To add the widget:

1From the left WordPress menu, go to the Appearance > Widgets page.

contact form widget

2On the Widgets page, find the JP – Contact Form and drag and drop it into a widget area. In this example, we chose the Page Widget Area.

contact form widget

3Fill out the settings form with the necessary information, and then click on the Save button.

Setting Description

TitleDisplays a title at the top of the widget. If left empty, it will show a Contact Us title.
EmailDefines the recipient of the messages. Only one email address is allowed, which by default is set to the WordPress admin email. To change the default WordPress email, read the Changing WordPress settings article.
Show Captcha?Enables or disables the Captcha field. In order to use the field, the Artbees Themes Captcha plugin should be installed and activated. To install the plugin, read the Install plugins and add-ons article.
Show Phone Number Field?Displays an optional phone number field.
GDPR Consent Check?Displays a consent checkbox in the contact form.
GDPR Conesent Checkbox TextDisplays a custom text for the consent checkbox.

Translating the form

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


Modifying the Stylings

By default, there are no settings to modify the style of the form. The only way to do so is to use custom CSS. We’ll use two examples to show how this is done.

Changing the Form Fields Text Color

In the form fields, two types of texts exist: Placeholder and Value. The placeholder is the initial text you see in the form fields and the value is the texts that you see while typing. Each of these texts need specific CSS codes.

To change the form text color:

1After adding the form to your website as explained in the previous section, inspect the form and take note of the section ID and form Class. In this example, they are contact_form-5 and mk-contact-form.

contact form widget

2To change the placeholder text color, add the following codes to Theme Options > Advanced > Custom CSS. We set the placeholder text color to red.

#contact_form-5 .mk-contact-form .text-input::-webkit-input-placeholder,
#contact_form-5 .mk-contact-form .textarea::-webkit-input-placeholder {
    color: #f00;
}

#contact_form-5 .mk-contact-form .text-input:-ms-input-placeholder,
#contact_form-5 .mk-contact-form .textarea:-ms-input-placeholder {
    color: #f00;
}

#contact_form-5 .mk-contact-form .text-input:-moz-placeholder,
#contact_form-5 .mk-contact-form .textarea:-moz-placeholder {
    color: #f00;
}

3To change the value text color, add the following codes underneath the codes from above. We set the value text color to blue.

#contact_form-5 .mk-contact-form .text-input, 
#contact_form-5 .mk-contact-form .textarea {
    color: #00E;
}

4. Click on the Save Changes button.

Changing the Form Button Background and Text Colors

The button background color is determined by the Theme Accent Color in Jupiter > Theme Options > Styling > General Colors. If you need to customize the styling, you’ll need to use custom CSS codes.

To change the button background and text colors:

1Use the same ID and Class that you found in the previous section: contact_form-5 and mk-contact-form.
2To change the background and text colors, add the following codes to Theme Options > Advanced > Custom CSS. We set the background color to red and the text to black.

#contact_form-8 .mk-contact-form .contact-form-button {
    background-color: #f00 !important;
    color: #000;
}

3Click on the Save Changes button.

Did this answer your question?