Contact Form Widget

Last Updated on

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.

x
Note: Jupiter also includes a Contact form shortcode and a Quick contact form.

contact form widget

In this article


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:

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

contact form widget

2
On 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

3
Fill 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.

x
Note: The widget is ready. Now you may need to add the Page widget area/sidebar to a page so you can see the widget. If you are not familiar with adding a widget area/sidebar to a page, read the Adding a sidebar article.

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:

1
After 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

x
Note: To learn more about inspecting elements, read the Inspecting elements article.
2
To 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;
}

3
To 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.

x
Note: To learn more about adding custom CSS, read the Inserting custom CSS codes article.

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:

1
Use the same ID and Class that you found in the previous section: contact_form-5 and mk-contact-form.
2
To 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;
}

3
Click on the Save Changes button.

x
Note: If you have set up a contact form widget, and do not receive any emails, head over to this article for troubleshooting.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket