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.
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:
| Setting | Description |
|---|---|
| Title | Displays a title at the top of the widget. If left empty, it will show a Contact Us title. |
| Defines 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 Text | Displays 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:
#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;
}#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:
#contact_form-8 .mk-contact-form .contact-form-button {
background-color: #f00 !important;
color: #000;
}
