Sub Navigation Widget

The Sub Navigation widget allows you to display child pages of a parent page in a widget area/sidebar. It displays the titles of the parent and child pages as a navigator.

In this article, we’ll explain how to display a navigator through the Sub Navigation widget in the Jupiter WordPress theme.

Sub navigation widget - widget front end


In order to display a navigator in a widget area/sidebar, you’ll need to add the JP – Sub Navigation widget to a widget area/sidebar, and then configure its settings.

To add the widget:

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

Sub navigation widget - widget menu

2On the Widgets page, locate the JP – Sub Navigation widget in the Available Widgets column, and then drag and drop it into a widget area. In this example, we chose the Page Widget Area.

Sub navigation widget - widgets area

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

Title Displays a title at the top of the widget. If left empty, it will show nothing at the top of the navigator.
Sort by Determines the order the links based on Page order, Page title and Page ID.
Exclude Determines the ID of the posts that need to be excluded from the navigator. You’ll need to add ID of the posts and separate them with commas. For example: 24, 234, 45 

Social Networks Widget

The social networks widget allows you to display your social network links as icons in a widget area/sidebar. It displays a clickable icon for each social network link.

In this article, we’ll explain how to display social network links through the social network widget in the Jupiter WordPress theme.

Social networks widget - front end


Displaying Social Network Links

In order to display social network links in a widget area/sidebar, you’ll need to add the JP – Social Networks widget to a widget area/sidebar, and then configure its settings.

To add the widget:

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

social networks - widget menu

2On the Widgets page, locate the JP – Social Networks widget in the Available Widgets column, and drag and drop it into a widget area. In this example, we chose the Page Widget Area.

social networks - widget page

3Fill out the settings form with the necessary information and click on the Save button. More settings are explained in the next sections.
Settings Description

Title Displays a title at the top of the widget. If left empty, it won’t show anything at the top of the social network links.
Icon Alt Title Sets the title attribute of the icons. When you hover over them, it will be displayed.
Choose Sites Select the social network links you need to display.
URL Sets the URL of the each selected social network link. The full URL with http(s):// needs to be set. For example, https://twitter.com/artbees_design

Configuring the Styling

The Size, Align, Style, Color, and Icons Margin settings allow you to configure social icons styling and layout.

Settings Description

Size Defines the icons’ size (Large, Medium, Small)
Align Defines the icons’ position (Left, Center, Right)
Style Defines the icons’ background and border styles (Circle, Rounded, Simple, Simple Outline, Square Pointed, Square Rounded)
Color Defines the icons’ color (Light, Dark, Custom). If you select Custom, you can choose the color for the icon, hover, border, background, and hover background.
Icons Margin (px) Defines the margin between the icons, for example, 20. There is no need to add px to the margin value.

 


Adding Custom Social Network Links

Beside existing social network links that you can select in the Choose Sites dropdown list, you can also add custom social networks by specifying a number in the “How many custom icons to add?” setting. For each number you set, three setting fields will be added.

[image]

Setting Description

Custom 1 Name Defines name of a custom social network link.
Custom 1 URL Defines the full URL of a custom social network link.
Custom 1 Icon Defines an image source for the icon. You’ll need to add a URL to the image on your server. For example: http://yoursite.com/wp-content/uploads/2017/01/custom-social-icon.jpg

Recent Posts Widget

The recent posts widget allows you to display a list of recent blog posts in a widget area/sidebar. It displays the thumbnail, title and the date of each post in the list.

In this article, we’ll explain how to create blog posts and display them through the recent posts widget in the Jupiter WordPress theme.

Recent posts widget - front end


Creating Blog Posts

WordPress posts are created separately in the Posts post type. To find more information about creating single posts, read the Creating a blog post article, and then continue to the next section.


Displaying Recent Blog Posts

In order to display recent blog posts in a widget area/sidebar, you’ll need to add the JP – Recent Posts widget to a widget area/sidebar, and then configure its settings.

To add the widget:

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

recent posts widget - widgets menu

2On the Widgets page, locate the JP – Recent Posts widget in the Available Widgets column and drag and drop it into a widget area. In this example, we chose the Page Widget Area.

recent posts widget-widgets page

3Fill out the settings form with the necessary information and click on the Save button.
Setting Description

Title Displays a title at the top of the widget. If left empty, it will shows the Recent Posts title.
Number of posts Determines the number of posts for the widget.
Show date Determines whether or not display the date for the post.
Which Categories to show Determines from which categories the posts should be shown. You can hold down Command/Control to select several categories.

 

Video Widget

Video widget allows you to display a video from popular video sharing websites such as Youtube, Vimeo, Dailymotion, Viddler in a widget area / sidebar.

In this article, we explain about uploading a video to a video sharing website, getting ID of a video and displaying a video by a Video widget in Jupiter WordPress theme.

Video widget - front end


Uploading a Video

For using Video widget, at first you need to upload your video to one of the mentioned video sharing websites then display it in your website. If you are not familiar with the upload process, read following articles.


Finding ID of a Video

After uploading a video, we need to find ID of a video to use it in the Video widget.

To get ID of a video:

1Go to your video page and check the URL to find the ID.
2The place of ID is different according to the video sharing websites. Check the following examples and screenshots to see the place of video ID for each of video sharing websites.

YouTube: Copy the string after https://youtube.com/watch?v=…

Video widget - youtube ID

Vimeo: Copy the string after https://vimeo.com/…

Video widget - vimeo ID

Dailymotion: Copy the string after http://dailymotion.com/video/…

Video widget - dailymotion ID

Viddler: Copy the string after http://www.viddler.com/v/…

Video widget - viddler ID


Displaying the Video

After finding the ID of a video, you need to add JP – Video widget to a widget area / sidebar then configure its settings.

To add the widget:

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

Video widget - widget menu

2In Widgets page, locate JP – Video widget in Available Widgets column then drag and drop it in a widget area. In this example, we choose Page Widget Area.

Video widget - widgets page

3Fill out the settings form with necessary information then click on Save button.
Setting Description

Title Displays a title at the top of the widget. If empty, it shows nothing at the top of the video.
Type Select the video sharing website to which you have uploaded your video (YouTube, Vimeo, Dailymotion and Viddler).
Clip ID Defines the ID of the video.
Width Defines the video width. There is no need to add the px in the setting field.

 

Testimonial Widget

The testimonial widget allows you to display two to ten testimonials as a slideshow in a widget area/sidebar. It displays the quote, author thumbnail, position and company link for each testimonial slide.

In this article, we’ll explain how to display the testimonial slideshow through the testimonial widget in the Jupiter WordPress theme.

Testimonials widget - front end


Displaying a Testimonial Slideshow

To display a testimonial slideshow in a widget area/sidebar, you’ll need to add the JP – Testimonial widget to a widget area/sidebar and then configure its settings.

To add the widget:

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

testimonial widet - widget menu

2On the widgets page, locate the JP – Testimonial widget in the Available Widgets column, and then drag and drop it into a widget area. In this example, we chose the Page Widget Area.

testimonial widget - widgets page

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

Setting Description

Title Displays a title at the top of the widget. If left empty, it will show the Testimonial title.
Number of Testimonials Determines the number of testimonial slides. Based on the number your enter, up to 10 testimonial fields can be created.
Quote Defines the testimonial text.
Company Defines the author’s company name.
Author Image URL Defines the author’s image URL.
Author Website URL Defines the author’s website URL. It will be used for the company name.
Position Defines the author position.

Related Posts Widget

The Related Posts widget allows you to display a list of related blog posts based on tags in a widget area/sidebar. It displays the thumbnail, title and date of each post in the list.

In this article, we’ll explain how to create blog posts and display them through the a Related Posts widget in the Jupiter WordPress theme.

Related posts widget - front end


Creating Blog Posts

WordPress posts are created separately in the Posts post type. To find more information about creating single posts, read the Creating a blog post article, and then continue to the next section.


Displaying Related Blog Posts

In order to display related blog posts in a widget area/sidebar, you’ll need to add the JP – Related Posts widget to a widget area/sidebar and then configure its settings.

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

Related posts widget - widget menu

2On the Widgets page, locate the JP – Related Posts widget in the Available Widgets column, and then drag and drop it into a widget area. In this example, we chose the Single Posts Widget Area.

Related posts widget - widget area

 

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

Title Displays a title at the top of the widget. If left empty, it will show the Related Posts title.
Number of posts Determines the number of posts to be shown.
Show date Determines whether or not to display the date of the post.
Which Categories to show Determines from which categories the posts will be shown. You can hold down Command/Control to select several categories.

 

Instagram Widget

The Instagram widget allows you to display a list of posts (feed) from Instagram in a widget area/sidebar. It displays the photos in a grid layout.

In this article, we’ll explain how to get a User ID and Access Token from the Instagram website and then display the Instagram feeds through the Instagram widget in the Jupiter WordPress theme.

Instagram widget - front end


Getting a User ID and Access Token

First you’ll need to get a User ID and Access Token from the Instagram website. These are required if you want to display an Instagram feed.

To get a User ID and Access Token:

1Log into your Instagram account and visit the authorization page.
2Click on the Authorize button and take note of your User ID and Access Token.

Instagram widget - user ID token


Displaying Instagram Feeds

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

To add the widget:

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

Instagram widget - widget menu

2In the Widgets page, locate the JP – Instagram widget in the Available Widgets column, and then drag and drop it into a widget area. In this example, we chose the Page Widget Area.

Instagram widget - widget area

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

Title Displays a title at the top of the widget. If left empty, it will show nothing at the top of the feed.
Instagram User ID Sets the User ID obtained in the previous steps.
Access Token Sets the Access Token obtained in the previous step.
Number of photo to show  Determines the number of the visible photos.
Sort by Determines the order of the links based on Most Recent, Least Recent, Most Liked, Least Liked, Most Commented, Least Commented and Random.
Open links in new tab? Determines whether or not the images will open in a new browser tab when they are clicked.
Image Size Determines the size of the images (Thumbnail(150×150), Low Resolution(306×306), and Standard Resolution(612×612).
How many Images in One Row Determines the number of images in each row of feed.

Mini Slideshow Widget

The Mini Slideshow widget allows you to display two to ten images as a slideshow in a widget area/sidebar. It displays the images in a slideshow with right and left pagination.

In this article, we’ll explain how to display image slideshow through the Mini Slideshow widget in the Jupiter WordPress theme.

Mini slideshow widget - front end


Displaying an Image Slideshow

In order to display an image slideshow in a widget area/sidebar, you’ll need to add the JP – Mini Slideshow widget to a widget area/sidebar and then configure its settings.

To add the widget:

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

Mini slideshow widget - widget menu

2On the Widgets page, locate the JP – Mini Slideshow widget in the Available Widgets column, and then drag and drop it into a widget area. In this example, we chose the Page Widget Area.

Mini slideshow widget - widget area

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

Title Displays a title at the top of the widget. If left empty, it will show the Mini Slideshow title.
Image width Sets the width of the slideshow images.
Image height Sets the height of the slideshow images.
How many slides Determines the number of image slides. Based on the number you enter, up to 10 Image URL fields can be created.
Image URL Add an absolute path of your image. If you are not familiar with the absolute path, read the next section.

 


Getting an Image’s Absolute URL

An absolute URL is the actual path to an image on a server. In simple terms, if you add an absolute URL into a browser address bar, you should be able to see the image.

To get an image’s absolute path:

1From the WordPress left menu, go to Media.

Mini slideshow widget - media menu

2Click on an image and copy and paste the URL into the widget settings as explained before.

Mini slideshow widget - media URL

News Slider Widget

The News Slider widget allows you to display news posts as a slideshow in a widget area/sidebar. It displays a featured image, title, description and read more link to the  news posts for each slide.

In this article, we’ll explain how to display a news slideshow through the News Slider widget in the Jupiter WordPress theme.

News slider widget - front end


Creating News Posts

News posts are created separately in the News post type. To find more information about creating news posts, read the News shortcode article, and then continue to the next section.


Displaying a News Slideshow

In order to display a news slideshow in a widget area/sidebar, and you need to add JP – News Slider widget to a widget area / sidebar then configure its settings.

To add the widget:

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

News slider widget - widget menu

2On the Widgets page, locate the JP – News Slider widget in the Available Widgets column, and then drag and drop it into a widget area. In this example, we chose the Page Widget Area.

News slider widget - widget area

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

Title Displays a title at the top of the widget. If left empty, it will show the Latest News title.
Number of News Determines the number of news posts to be shown in the slideshow.

Twitter Feeds Widget

The twitter Feeds widget allows you to display tweets in a widget area/sidebar. It displays recent tweets from an account you specify in the widget settings.

In this article, we’ll explain how to getting access information from the Twitter website, and then display tweets through thea Twitter Feeds widget in the Jupiter WordPress theme.


Creating an Application

To be able to use Twitter widget or Twitter Feeds element in Visual Composer editor, you need get Twitter keys at first.

1At first you must apply for a Twitter developer account and be approved before you may create new apps.

Once approved, you will be able to create new apps from developer.twitter.com.

2Log in to the developer portal on this site (must have applied or have been approved) or apps.twitter.com using your Twitter credentials.
3Open the Twitter app for which you would like to generate access tokens.
4Navigate to the “Keys and Tokens” page.
5Select ‘Create‘ under the “Access token & access token secret” section.
6Take note of the Consumer Key (API Key)Consumer Secret (API Secret)Access Token, and Access Token Secret.

Twitter feeds widget - keys


Adding Access Details in the Jupiter Theme

After getting the access details, you need to add them to the Jupiter Theme Options.

To add the access details:

1From the WordPress left menu, go to Theme Options > Global Settings > API Integrations.

2Add the Consumer Key (API Key)Consumer Secret (API Secret)Access Token and Access Token Secret from the Twitter website (step 5).

3Click on the Save Settings button.

Displaying Tweets

In order to display tweets in a widget area/sidebar, you’llneed to add the JP – Twitter Feeds widget to a widget area/sidebar and then configure its settings.

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

Twitter feeds widget - widgets menu

2On the Widgets page, locate the JP – Twitter Feeds widget in the Available Widgets column, and then drag and drop it into a widget area. In this example, we chose the Page Widget Area.

Twitter feeds widget - widgets area

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

Title Displays a title at the top of the widget. If left empty, it will show nothing at the top of the tweets.
Username  Sets your Twitter account username.
Count Determines the number of tweets shown.

Google Maps Widget

The Google Maps widget allows you to display a realtime map in a widget area/sidebar. It displays almost all the same map controlling options as the Google Maps website.

In this article, we’ll explain how to get an API key and find the latitude and longitude from the Google website, and then display a map through the Google Maps widget in the Jupiter WordPress theme.


Getting an API Key

First you’ll need to get an API key from the Google website. This is required if you want to display a map.

To get an API key:

1Go to the Google API Console page. You’ll need to have a Gmail account.
2Create or select a project and click on Continue.

Google maps widget - project

3Set the API key name and restrictions, and click on Create.

Google maps widget - API manager

4A new pop-up window will appear with your API key.

Google maps widget - API key


Adding the API Key into the Jupiter Theme

After getting an API key, you’ll need to add it into the Jupiter Theme Options.

To add the API key:

1From the WordPress left menu, go to Theme Options > Global Settings > API Integrations.

2Add the API key in the Google Maps API Key input field.

3Click on the Save Settings button.

Finding Latitude and Longitude

In order to display a specific location on your Google map, you’ll need to find its latitude and longitude.

To find the latitude and longitude:

1Go to the Google Map website and find your location on the map.
2Right-click on the location on the map and select “What’s here?”

Google maps widget - what's here

3At the bottom, you will see a card with the latitude and longitude. Take a note of them.

Google maps widget - latitude and longitude


Displaying a Map

In order to display a map in a widget area/sidebar, you’ll need to add the JP – Google Maps widget to a widget area/sidebar and then configure its settings.

To add the widget:

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

Google maps widget - widget menu

2On the Widgets page, locate the JP – Google Maps widget in the Available Widgets column, and then drag and drop it into a widget area. In this example, we chose the Page Widget Area.

Google maps widget - widget area

3Fill out the settings form with the necessary information, and then click on the Save button. More settings are explained in the next sections.
Setting Description

Title Displays a title at the top of the widget. If left empty, it will show nothing at the top of the map.
Latitude Defines the latitude of the location. Set the number you found in the previous section.
Longitude Defines the longitude of the location. Set the number you found in the previous section.

Configuring the Map Controls

There are several other settings which allow you to configure the map controls.

Setting Description

Zoom Defines the initial map zoom level. The number should be between 1 and 19. The default is 14.
Height Defines the height of the map. The width is 100% of the widget container.
Enable Scroll Wheel Enables or disables scrollwheel zooming on the map.
Enable Pan Control Enables or disables the state of the Pan controls. This allows you to control the position on the map.
Enable Zoom Control Enables or disables the state of the Zoom controls.
Enable Map Type Control Enables or disables the different map types controls.
Enable Scale Control Enables or disables the zoom in/out controls.
Enable Draggable Enables or disables draggability feature which allows the map to be dragged in different directions by the mouse.

Popular Posts Widget

The Popular Posts widget allows you to display a list of popular blog posts in a widget area/sidebar. It displays the thumbnail, title and date of each post in the list.

In this article, we’ll explain how to create blog posts and display them through the Popular Posts widget in the Jupiter WordPress theme.

Popular posts widget - front end


Creating Blog Posts

WordPress posts are created separately in the Posts post type. To find more information about creating single posts, read the Creating a blog post article, and then continue to the next section.


Displaying Popular Blog Posts

In order to display popular posts in a widget area/sidebar, you’ll need to add the JP – Popular Posts widget to a widget area/sidebar then configure its settings.

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

popular posts - widget menu

2In the Widgets page, locate the JP – Popular Posts widget in the Available Widgets column, and then drag and drop it into a widget area. In this example, we chose the Page Widget Area.

popular posts - widgets page

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

Title Displays a title at the top of the widget. If left empty, it will show the Popular Posts title.
Number of posts Defines the number of posts to be displayed.
Show date Determines whether or not to display the date of the post.
Which categories to show Determines from which categories the posts will be shown. You can hold down Command/Control to select several categories.

Recent Portfolios Widget

The Recent Portfolios widget allows you to display a list of recent portfolio posts in a widget area/sidebar. It displays the thumbnail, title and date of each post in the list.

In this article, we’ll explain how to create portfolio posts and display them through the Recent Portfolios widget in the Jupiter WordPress theme.

Recent portfolios widget - front end


Creating Portfolio Posts

Portfolio posts are created separately in the Portfolios post type. To find more information about creating portfolio posts, read the Creating a portfolio post article, and then continue to the next section.


Displaying Recent Portfolio Posts

In order to display recent portfolio posts in a widget area/sidebar, you’ll need to add the JP – Recent Portfolios widget to a widget area/sidebar and then configure its settings.

To add the widget:

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

recent portfolios - widget menu

2On the Widgets page, locate the JP – Recent Portfolios widget in the Available Widgets column, and then drag and drop it into a widget area. In this example, we chose the Page Widget Area.

recent portfolios - widgets page

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

Title Displays a title at the top of the widget. If left empty, it will show the Recent Works title.
Number of posts Determines the number of posts of the widget.

Flickr Widget

The Flickr widget allows you to display a list of posts (feed) from Flickr in a widget area/sidebar. It displays the photos in a grid layout.

In this article, we’ll explain how to get an API key and User ID from the Flickr website and then display Flickr feeds through the Flickr widget in the Jupiter WordPress theme.


Getting an API Key

First you’ll need to get an API key from the Flickr website. This is required if you want to display feeds.

To get an API key:

1Go to the Flickr The App Garden page.

You’ll need to have a Flickr account.

2Apply for your API key.

3Briefly explain what your API key is for.

Flickr widget - api description

4Click on the submit button and take a note of the key (API key) and secret (API secret).

Flickr widget - key secret


Getting a User ID

After getting an API key, you’ll also need to get a User ID from the Flickr website.

To get a User ID:

1Go to idGettr page. You’ll need to have a Flickr account.
2Copy the URL of your Flickr photo stream and paste it into the idGettr page.

Flickr widget - flickr ID

3Click on the Find button, and then take note of the ID.

Displaying Flickr Feeds

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

To add the widget:

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

Flickr widget - widget menu

2On the Widgets page, locate the JP – Flickr widget in the Available Widgets column, and then then drag and drop it into a widget area. In this example, we chose the Page Widget Area.

Flickr widget - widget area

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

Title Displays a title at the top of the widget. If left empty, it will show the title Photos on Flickr.
Flickr API Key Sets the API key obtained in the previous step.
Flickr User id Sets the User ID obtained in the previous section.
Number of photo to show  Determines the number of the visible photos.
Photos per each row Determines the number of images in each row of feed.

Contact Info Widget

The Contact Info widget allows you to display your contact details in a widget area/sidebar. It displays a company name, address, phone number, etc along with the appropriate icons.

In this article, we’ll explain how to display and modify the contact details through the Contact Info widget in the Jupiter WordPress theme.

Contact info widget - front end


Displaying the Contact Details

In order to display the contact details in a widget area/sidebar, you’ll need to add the JP – Contact Info 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 info widget - widget menu

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

Contact info widget - widget area

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

Title Displays a title at the top of the widget. If left empty, it will show nothing at the top of the details.
Person Adds a person’s name.
Company Adds a company name.
Address Adds an address. You can use HTML to separate the address lines.
Phone Adds a phone number(s). This field is not limited by any validator so you can display your phone number in any structure you like, e.g. (0090) or (+90). You can also add multiple phone numbers to this field.
Fax Adds a fax number(s). The same rules as the phone number also apply here.
Email Adds an email address as a link.
Website Adds a website address as a link.
Skype Username Adds a Skype ID/username as a link.

Modifying the Stylings

By default, there are no settings to modify the style of the contact details. The only way to do so is to use custom CSS. In this section, we’ll use the example of modifying the icon and text colors.

Changing Icon and Text Colors

To modify the stylings:

1After adding the contact details to your website as explained in the previous section, inspect the widget and take note of the main widget element ID. In this example, it is contact_info-2.
2To change the icons color, add the following codes into Theme Options > Advanced > Custom CSS. We set the color to red. Note that all icons are SVG so you’ll need to use CSS the fill property to change the colors.

#contact_info-2 .mk-svg-icon {
    fill: red;
}

3To change the text and link colors, add the following codes underneath the codes from above. We set the colors to blue.

#contact_info-2 {
   color: blue;
}

#contact_info-2 a {
   color: blue !important;
}

4. Click on the Save Changes button.

Contact Form Widget

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

Title Displays a title at the top of the widget. If left empty, it will show a Contact Us title.
Email 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:

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.

How to Use Widgets

This article gives detailed on how to use Widgets in Jupiter and The Ken themes. WordPress Widgets are small blocks that perform a specific function. You can add these widgets in Custom Sidebars or the Footer areas also known as widget-ready areas on your web page.

Continue reading