Saving money is essential in today’s world. There are several cost-cutting measures out there like replacing normal light bulbs with LEDs, installing a programmable thermostat, getting rid of unused memberships, and so forth. But that only helps save a couple of bucks here and there. One of the best money savers you can offer customers is a deal or discount. This article explores how you can easily build a deals website with Jupiter X.
What is a deals website?
As the name suggests, a deal or discount website is a place where visitors can purchase some products or services for a discount or a much cheaper price. Also, a deals website can provide their visitors with coupons so they can use to buy products or services cheaper from an online store like Amazon and eBay. There are several deals websites on the internet such as Dealnews, Woot, Offers and more.
WordPress has several plugins in WordPress to conveniently build deals websites such as:
In this article, we cover the Affiliate Coupons plugin to create a simple deals website with Jupiter X.
Affiliate Coupons
Description
Affiliate Coupons is a coupon plugin that allows us to add coupons and deals to our post and page with simple shortcodes. Also, we can show coupons in the sidebar or widget area with a widget.
The coupon shortcode comes with the click to copy the coupon functionality, which means that the coupon code is copied to the clipboard when the user clicks on the coupon.
With the Affiliate Coupons plugin, we can further define categories, types, and vendors and then assign our coupon to them.
Features
Create vendors and predefine affiliate links.
Create coupons and link them to vendors.
Display coupons via a shortcode on the frontend.
Multiple options in order to filter/sort your coupon presentations.
The configuration page for more options and customizations.
Prepared templates: Standard, Grid & List.
Widgets for displaying coupons in your sidebar
Useful shortcodes
Single Coupon Shortcode – Can be used to show any single coupon.
Example: [affcoups id=”123″]
Multiple Coupon Shortcode – Can be used to show multiple coupons at once.
Example: [affcoups id=”123,456,789″]
All Coupons Shortcode – Can be used to show all coupons.
Example: [affcoups] or [affcoups max=”10″]
Coupon Category Shortcode – Can be used to show coupons from a specific category.
Example: [affcoups category=”123″] or [affcoups category=”group-xyz”]
Coupon Vendor Shortcode – Can be used to show coupons from a specific vendor.
Example: [affcoups vendor=”123″]
Coupon Types Shortcode – Can be used to show all coupons from a specific type.
Example: [affcoups type=”123″] or [affcoups type=”type-xyz”]
Show/Hide Expired Coupons – Can be used to show/hide expired coupons.
Example: [affcoups hideesc_html_expired=”true”] vs [affcoups hide_expired=”false”]
Sorting Coupon – Can be used to sort coupons (acs/desc) or order by (name, date, random, title, description, discount, valid_from, valid_to).
Example: [affcoups order=”asc”] or [affcoups orderby=”title”]
Coupon Template Shortcode – Can be used to show coupons in standard, grid, list, and widget.
Example: [affcoups template=”standard”] or [affcoups grid=”3″]
Creating a deals website with Jupiter X using the Affiliate Coupons plugin
At the end of this article, we’ll create a simple website like below.
Note: The scope of this article is about creating a simple Deals website with Jupiter X, Elementor and the Affiliate Coupons plugin so we won’t be able to explain every single detail in depth. If you need more in-depth resources about Jupiter X, you should read the following articles containing its explanatory video.
Our site consists of the header, content, and footer as the main parts. Let’s start by creating the content.
Creating the Content
For creating the content part of the site, we should first install and activate the Affiliate Coupons plugin. We will be able to create the required pages, coupons, vendors and categories with this plugin.
Creating the vendors
Vendors are the shops, websites, and providers that we will provide coupons for on the site. Following the steps below to create vendors.
1. Go to Affiliate Coupons > Vendors.
2. Click on the Add Vendor button.
3. On the new screen, set the Title and Url, then click on the Publish button.
After clicking on the Publish button, the plugin generates a shortcode for us, which we can use in a related page later on.
Repeat the aforementioned steps to create as many as vendors you need.
Create Categories
1. Go to Affiliate Coupons > Categories.
2. In the new screen, set the Name or other optional settings, and then click on the Add New Category button.
After adding the category, a shortcode will be generated for this category.
Repeat the previous steps to create as many as vendors you need.
Creating the Coupons
A coupon is a ticket or document can be used to get a discount when purchasing a product. Let’s add some coupons for your users by following the steps below.
1. Go to Affiliate Coupons > Add Coupon.
2. In the new screen, set the essential settings like below.
Now, you’ll be able to see a coupon like below.
Note: Go to Affiliate Coupons > Settings > General Tab, and set the Button Background Color to #dd2476.
Create the Pages
We at least need the following pages to run a proper site.
Home page: The frontend page.
All deals page: Shows all coupons from all categories and vendors.
Categories pages: Unique page for each category.
Vendors pages: Unique page for each vendor.
Create Category Pages
Create a new page, set a title and add a Shortcode widget to the page. Add a category shortcode like [affcoups category=”15″] to it.
Repeat the previous step to create as many as category pages as you need.
Create Vendor Pages
Create a new page, set a title and add a Shortcode widget to the page. Add a vendor shortcode like [affcoups vendor=”74″] in it.
Repeat the aforementioned step to create as many vendor pages as you need.
Create an All Deals Page
Create a new page and add [affcoups] shortcode in it.
Create a Home Page
Create a new page with the Full-Width template then edit it with Elementor.
1. Add a section with five columns as shown below.
2. Set the background color of the section to #f7f7f7.
3. Add an image widget to each column, then set proper images and set a proper link for each image.
4. Add a new section with one column to page then add the Shortcode widget with [affcoups grid=”3″] value to it.
In the end, we should have a page as shown below.
Creating the Header Part
In order to build the header, we can use Jupiter X’s awesome custom header feature in Customizer.
Note: Before creating the header, we need to set our site’s logo from Customizer > Site Identity > Logo.
1. Go to Customizer > Header, select Custom type then click on the New button.
2. Add a section to the page, then add Logo, Flex Spacer, Search Form and two Buttons widgets one by one to the section. Modify the settings to get the look that you want. Consider that all the widgets (except Flex Spacer) have an Inline position that you can set in Advanced > Custom Positioning for each widget.
3. Add another section to the page and set the background color(#f7f7f7). This section displays categories.
4. Add the Icon List widget to the section. Add the necessary items, and set the Text and Link of related pages.
In the end, we’ll have a header as shown below.
Creating the Footer Part
Similar to the Header, we use the Custom Footer feature of Jupiter X.
1. Go to Customizer > Footer, select Custom type then click on the New button.
2. In the Elementor editor, click on the Add Template button.
3. From Block > Jupiter X Footer Category, insert the following footer.
4. Edit the Logo widget and set it to Primary.
5. Replace the top text with “Get free coupons and promo codes from the shops your love in your email“.
6. Replace Phone, Email and Location widgets by a Form widget with only an email field. Set the button color to #dd2476 and some other styling.
In this article, we defined what a deal site is and then introduced you to some useful plugins that help in creating a simple deal site. More specifically, we used the Affiliate Coupons plugin and its shortcodes to build the site.
Finally, we showed you how to easily create a simple deals website with Jupiter X. Feel free to share your thoughts and experiences in the comment section below!
subscribe
Subscribe to Artbees Themes Blog for the best WordPress tips and insights.
Every Elementor’s widget is composed of different input types called a control. A control is used to construct the interface of a widget. Using controls allows us to customize and set our favorite settings for a widget and see a live preview of it.
Before diving headfirst into this article, we suggest that you check out the following articles.
In default, Elementor has several control types like Text, Color, Dimension, Select, Icon, Media, Typography and so on that meet most common usages. But sometimes we need to create a custom control to realize our needs.
Directory Structure of a Control
Normally, each control contains three files as PHP, JavaScript, and CSS:
control.php
js/control.js
css/control.css
PHP File
The PHP file generates HTML and constructs UI of control in Panel. To create the PHP file, we need to extend the Base_Control abstract class.
The Base_Control provides several methods.
get_type: retrieve the type of control.
content_template: render the HTML output in Panel.
enqueue: use to add CSS and JavaScript files to control.
get_default_settings: retrieve the default setting of control on initialisation.
get_default_value: retrieve the default value of control.
get_value: determine how the control returns its value.
get_style_value: interact with the CSS rule that passed with Selector argument.
Elementor allows for five base classes to extend Base_Control for different purposes. We can extend the following classes to create new controls. For more info, you can refer to this page about Elementor controls.
Base_UI_Control: creates a UI control that is visible in the panel and doesn’t return any value. For example, Heading control.
Base_Data_Control: a base class that returns a single value. For example, Number Control.
Control_Base_Multiple: a base class that returns multiple values. For example, Media control.
Control_Base_Units: a base class that returns unit based values. For example, Dimension control.
Group_Control_Base: a base class for creating group control. For example, Typography control.
JavaScript File
The JavaScript file is used for interacting between UI and live preview and manipulate events that are related to control.
Also in Elementor, there is an exclusive JS file for each PHP file that interacts with them. For instance, the above base PHP classes have JS files such as:
base.js
base-data.js
base-multiple.js
base-units.js
To create a new control JS file, we need to extend one of the above JS files. You can find the source of the JS file at GitHub.
Note: For some reason, Elementor merges all JS files in the editor.js file. We can extend the above JS file from by using the elementor.modules.controls object.
CSS File
CSS allows us to style the UI of a control. In the following sections, we’ll go into detail about the actual usage of CSS.
Creating a Custom Control
Now that we have gained a basic understanding of an Elementor control, we are ready to create a custom control called MultiUnit, which is similar to Elementor’s Dimension control.
In the Dimension control, we can only set the same unit (px, em,…) for the top, right, bottom and left values, but in MultiUnit control, we can set a different unit for each value.
At the end of this article, we’re going to create the following control.
Our JS file is named MultiUnit.js and extends the Elementor BaseMultiple module. This JS file contains a JavaScript class that has several functions, which are explained briefly below.
1. The below function defines the essential UI CSS selectors.
5. We need a function to select the proper unit when it’s clicked. The below function is used for top_unit.
setTopInputRange : function( event ) {
var val = $(event.target).val() ;
var min = this.range_control[val].min;
var max = this.range_control[val].max;
var step = this.range_control[val].step;
$('li.spicy-control-multiunit > input[type=number][data-name='+this.name_control+'-top]').attr({"min":min,"max":max,"step":step});
}
We’ve also declared similar functions for right_unit, bottom_unit, and left_unit that you can find in the source code.
6. We need other functions to show/hide units when clicked. The below function is used for the top_unit.
TopRangeToggle : function (event) {
var cat = $(event.target).attr("data-cat");
if(this.range_top==false){ $('.spicy-units-choices-label-top[data-cat='+cat+']').not(event.target).hide();
this.range_top = true;
}else if(this.range_top==true){
$('.spicy-units-choices-label-top[data-cat='+cat+']').show();
this.range_top=false;
}
}
We also declared similar functions for right_unit, bottom_unit, and left_unit.
7. The function below syncs top_unit, right_unit, bottom_unit and left_unit together.
Finally, we have other functions that are similar to the JS file of the Dimension control and other custom functions that we haven’t explained. But you can find them in source code.
Creating the CSS File
To style the UI of control in the panel, we need CSS rules as seen below.
It’s time to put the control in action. Follow the steps below in order to use the control.
1. Register the custom control in our plugin using the following codes.
add_action( 'elementor/controls/controls_registered', [ $this,'init_controls']);
public function init_controls() {
// Include Control files
require_once( __DIR__ . '/controls/multi_unit.php' );
// Register control
\Elementor\Plugin::$instance->controls_manager->register_control( 'spicy-multi-unit-control', new Spicy_multi_unit());
}
2. Add the custom control to any widget. Now, it’s ready to use.
In this article, we tried to explain how to create a custom control for Elementor. Also, we describe the essential files of control and the structure of them. Finally, we created a custom control named MultiUnit.
Feel free to share your experiences with us in the comments.
subscribe
Subscribe to Artbees Themes Blog for the best WordPress tips and insights.
Elementor is packed with various elements or widgets. Widgets allow us to build websites and display appropriate content. But sometimes we need specific functionality for our website. And to do this, we need to create a new widget or element.
What is a widget?
A widget or element is a section in the Graphical User Interface (GUI) that lets us display the information we want to showcase to users.
The Elementor widget is a combination of PHP, JavaScript, HTML and CSS codes that generate a custom output for us. We suggest visiting this link before reading this article.
Elementor Widgets
Each widget has custom controls like input, fields, buttons and more. With these controls, we can set our custom settings and see a live preview in the editor and render the final HTML in frontend.
Widget Structure
In order to create a new widget, we must extend the Widget_Base abstract class. This class has several methods that we first need to override.
<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {
public function get_name() {}
public function get_title() {}
public function get_icon() {}
public function get_categories() {}
protected function _register_controls() {}
protected function render() {}
protected function _content_template() {}
}
Widget Name
With the get_name() method, we can set the name of a widget and return the name of the widget.
public function get_name() {
return 'Widget Name';
}
Widget Title
With the get_title() method, we can set the label of the widget.
public function get_title() {
return __( 'Widget Title', 'Plugin Name' );
}
Widget Icon
The get_icon() method set the icon for our widget that displayed in the panel.
public function get_icon() {
return 'eicon-gallery-grid';
}
Widget Categories
The get_categories() method set the category that our widget must be placed on the panel’s categories. In default, there are several categories including the following:
Basic
Pro-elements
General
Woocommerce-elements
WordPress
And so on.
public function get_categories() {
return [ 'basic' ];
}
We can also create custom categories with the elementor/elements/categories_registered action.
With the _register_controls() method, we can set essential sections and controls for the widget.
There are several controls that we can use for widget settings, such as the following:
UI Controls
Button
Divider
Heading
Raw Html
Data Controls
Text
Select
Choose
Gallery
Slider
Typography
And so on.
Multiple Controls
Url
Media
Image Dimensions
Unit Controls
Slider
Dimensions
Group Controls
Typography
Text Shadow
Box Shadow
Border
Background
For more information on Elementor controls, you can check out this link.
Widget Template
The render() method allows creating a frontend HTML code with the PHP.
The _content_template() method generates a live preview for the widget in the editor by using the Backbone JavaScript library.
How to add controls to our widget
In default, there are three tabs in the Elementor panel, which are the Content Tab, Style Tab, and Advanced Tab. To add controls to our widget, we should first create a section and assign it to one of the tabs. Then we can add our favorite controls to the section. As mentioned above, we must put our code in the _register_controls() method.
Creating a Section
To create a section, we need to set the following essential parameters:
Section Name
Section Settings(label ,tab)
$this->start_controls_section(
'section_name',//set unique name
//set setting of section
[
'label' => __( 'Section Label', 'plugin-name' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
//THE CONTROLS COME HERE
$this->end_controls_section();
We must set the following parameters for each control as seen below:
Control Name
Control Setting(label,type)
Adding a normal control
Use the following control to add a normal control.
$this->add_control(
'control_name',//set unique name for control
//set essential settings
[
'label' => __( 'Control Label', 'plugin-name' ),
//CONTROL_TYPE can be TEXT, SLIDER, ...
'type' => \Elementor\Controls_Manager::CONTROL_TYPE,
]
);
Adding a responsive control
This control type includes different settings value for desktop, tablet, and mobile devices.
This control groups several normal controls in one control such as typography.
$this->add_group_control(
//Group_Control_Class can be Group_Control_Typography,Group_Control_Border or other group controls
Group_Control_Class::get_type(),
[
'name' => 'control_name',
'label' => __( 'control Label', 'plugin-name' ),
]
);
Adding control tabs
Create a tab area to add various controls.
//start tabs area container
$this->start_controls_tabs();
// create first tab area
$this->start_controls_tab();
$this->add_control();
$this->end_controls_tab();
// create second tab area
$this->start_controls_tab();
$this->add_control();
$this->end_controls_tab();
$this->end_controls_tabs();
//end tabs area container
Adding control popovers
Create a popover window will allow you to display various controls.
How to Display or Hide Sections and Controls in Widgets
At times, you might want to hide some sections or controls in your widget, but using if / else in the code is a hassle. Fortunately, now you can do this conveniently with the condition in the settings for sections or controls.
$this->start_controls_section(
'my_section',
[
'label' => __( 'My Section', 'plugin-name' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
'condition' => [
'Name' => 'Value',
]
//name must be unique name of one control
//Value must be the return value of control
]
);
Let’s say that we have one control named Choose_ Layout with two values first and second. After adding the code found below code to any section or control, our section or control will be displayed if the return value of the Choose_ Layout control is equal to first. And it will be hidden if the return value of Choose_ Layout control is equal to the second.
'condition' => [
'Choose_ Layout' => 'first',
]
How to Change Widget Output Style Automatically from the Control Settings
One of Elementor’s amazing features is the ability to easily change the style of widget output with CSS code and selectors. For example, if we want to change the height of images in output, first we must assign a class attribute to our HTML tag. Then use this class with the selector in settings of control.
To create the final Html code in the render() method and live preview in the _content_template() we’ll need input the parameter from the widget controls like height, width, font-size and more. In Elementor, the input parameter is called Settings. We can arrange settings in render() using this method.
Below, we have illustrated how to build a gallery widget step-by-step so you can better understand how to cover the topics mentioned above and create an Elementor widget.
Our gallery widget is registered in the Spicy plugin and the root directory of the gallery widget is:
Index.php file is an empty file that prevents a malicious hacker from directly accessing the plugin. Spicy.php file is the main plugin file that we register our widget with. Gallery.css file is a CSS file that sets the default style of a gallery widget. Gallery.php is the main file that defines the functionality of a gallery widget.
Image section contains Height and Image Size behavior controls.
Text section contains Color, Typography, Alignment, and Spacing controls.
Avatar section contains Height, Width, Alignment, and Spacing controls.
Textarea section contains Color, Typography, Alignment, and Spacing controls.
Extending the Widget_Base Abstract Class
The main class of the gallery widget is similar to the code found below.
gallery.php
<?php
class Spicy_Gallery_Widget extends \Elementor\Widget_Base {
public function get_name() {
return 'Gallery';
}
public function get_title() {
return __( 'Gallery', 'Spicy-extension' );
}
public function get_icon() {
return 'eicon-gallery-grid';
}
public function get_categories() {
return [ 'basic' ];
}
protected function _register_controls() {
// start Content tab
$this->start_controls_section(
'content_section',
[
'label' => __( 'Content', 'Spicy-extension' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
//add skin control
$this->register_controls_skin();
//add repeater for pro skin
$this->register_controls_pro_repeater();
//add gallery control
$this->register_controls_Classic_gallery();
//add column-gap slider
$this->register_controls_column_gap();
//add row-gap slider
$this->register_controls_row_gap();
//add columns number list
$this->register_controls_column_number();
$this->end_controls_section();
// end content tab
//start Style tab
$this->register_controls_classic_style_image();
//create pro item section
$this->register_controls_pro_item();
//create pro style section-image
$this->register_controls_pro_style_image();
//create pro style section-text
$this->register_controls_pro_style_text();
//create pro style section-avatar
$this->register_controls_pro_style_avatar();
//create pro style section-textarea
$this->register_controls_pro_style_textarea();
//Box Shadow
$this->register_controls_pro_style_boxshadow();
//hover animation
$this->register_controls_pro_style_hoveranimation();
//end style tab
}
protected function render() {
$settings = $this->get_settings_for_display();
?>
<div class="spicy-gallery" width="100%">
<?php
if($settings['spicy_skin']=='classic'){
$this->classic_render($settings);
}else{
$this->pro_render($settings);
}
?>
</div>
<?php
}
protected function _content_template() {
?>
<div class="spicy-gallery">
<#
if(settings.spicy_skin=='classic'){
_.each( settings.spicy_images, function( image ) {
#>
<div class="spicy-item elementor-animation-{{settings.spicyhover}}">
<img class="spicy-img" id="{{image.id}}" src="{{image.url}}"/>
</div>
<# }); } else{
_.each( settings.spicy_image_list, function( image ) {
#>
<div class="spicy-item elementor-animation-{{settings.spicyhover}}">
<div class="spicy-pro-container">
<img class="spicy-pro-img" src="{{image.spicy_pro_image.url}}" >
</div>
<p class="spicy-pro-text">{{image.spicy_pro_text}}</p>
<div class="spicy-avatar-wrapper">
<img class="spicy-avatar" src="{{image.spicy_pro_avatar.url}}" alt="Avatar">
</div>
<p class="spicy-pro-description">{{image.spicy_pro_description}}</p>
</div>
<# }); }#>
</div>
<?php
}
?>
Creating Controls for a Gallery Widget
In the above code, you’ll see several functions in _register_controls() and render() functions.In fact, these methods assign sections and controls for the gallery widget. We can create these functions only for grouping codes and simplicity.
Common Controls
1.Skin control: This control’s type is Select with two options set as classic and pro. With this control, we have the ability to change the layout of the gallery widget.
The following controls or sections are only displayed in the pro layout.
1. Repeater Section: This section has four controls, which are Image, Text, Avatar, and Textarea. It’s used for adding images individually and is displayed in the Content Tab.
After creating a gallery widget, we need to register essential CSS style to our widget. To do this, we need to first create a CSS file, then register it in Spicy.php.
In this blog post, we described how to extend Elementor like a pro in detail and explained the structure of an Elementor widget. We also illustrated how to create a section and control, how to display/hide a section or control, how to change the widget style from controls, how to get settings and how to render the final output in frontend and Elementor editor.
Finally, we walked you through the steps of developing a gallery widget. Feel free to share your ideas and experiences in the comments section below.
subscribe
Subscribe to Artbees Themes Blog for the best WordPress tips and insights.
Creating custom forms in WordPress has always been a hassle. Jupiter X has begun a new era in the form building experience. Now, you can create custom forms visually. Typically, site visitors come across forms such as signup, sign in, register, subscription, contact or any other custom forms.
Forms allow site visitors the ability to send information such as usernames, passwords, comments, emails, among other things to the server.
Forms contain fields such as dropdowns, checkboxes, text boxes, input, as well as submit and radio buttons. Nowadays forms play an integral role, particularly in digital marketing and social networks.
Form Builder in Depth
If you want to build a beautiful and secure form with Jupiter X, then you can use the Form Builder, which allows you to create custom forms in a few minutes with minimum effort.
Content Tab
This tab contains four sections such as Form Fields, Submit Button, Settings and Feedback Messages. Let’s go through each of them one by one.
Form Fields
In this section, we can create fields for our forms. Form Fields have two options:
Form: for setting the name of the form.
Items: each field in the form.
Furthermore, each item has its options like:
Type
Label
Placeholder
Required
Column Width
And more.
One of the important options of each field is the Type option, which defines the role of the field. The Jupiter X Form Builder has eleven types for fields:
Text: for creating the text input.
Email: for creating the email input.
Textarea: for creating the textarea input.
Tel: for creating only the phone number input.
Number: for creating only the number input.
Date: for creating the date picker.
Time: for creating the time picker.
Checkbox: for creating a checkbox element.
Radio: for creating a radio button element.
Acceptance: for creating an agreement for conditions or a term of use button.
reCAPTCHA: for creating the human testing Google service.
Submit Button
After clicking on the Submit Button, the information contained in the form is sent to the server. The Submit Button section has three options:
Text: for changing the bottom text.
Icon: for setting an icon for the Submit Button.
Column Width: for changing the Submit Button container.
Settings
The Settings section has three options:
Label: Show/Hide status for fields label.
Required Mark: Show/Hide * after fields label for required fields.
Add Action: Set the action in the form.
The Jupiter X Form Builder allows the user to choose from seven action fields. If you choose one of them, the options section of each action appears at the bottom of the setting section to where you can modify it.
1. Email: This action email form allows users to fill in their email address such as admin. We can set To, Email Subject, From Email, From Name, Reply-To, Cc, Bcc.
2. MailChimp: This is used for a subscription form. In order to use this, we must first have an API Key from MailChimp to manage our subscriber list. You can learn more about how to get a MailChimp API by clicking on this link.
In the MailChimp section, set the API Key, choose the Audience, and finally set the field mapping. In default, MailChimp has six fields including Email, Address, Birthday, First Name, Last Name, and Phone Number.
3. Redirect: With this, we can redirect our page to another URL.
4. Slack: this action allows us to send information from our form to Slack. In order to do this, we must first sign up for Slack, enable the incoming webhook, then set our information in the Slack setting section. For more info on how to do this, you can head over to this link.
5. HubSpot: One feature that Hubspot provides is allowing users to create a contact form and then to publish these forms on the internet. This allows us to directly submit our form data to the Hubspot form.
First, signup to HubSpot then go to Marketing > Forms and create a new form. After that, design a form and get a Portal ID and Form ID to enter in the HubSpot action settings in the form.
6. Download: This allows site visitors to download a file from your website.
7. Webhook: this enables us to integrate our form with Zapier webhooks. Zapier webhooks allows us to complete several tasks such as sending an email, connecting to Facebook, Twitter, and Slack, as well as accessing more than 1,500 apps.
To activate this action, go to Zapier, generate a zap, and copy the Webhook URL and paste it into the Webhook action setting. To find out more about how to do this, visit this link.
Feedback Messages
After a page visitor submits a form, they will be able to see a message on their screen. The Jupiter X Form Builder has four types of messages, including Successful Message, Error Message, Required Message and Subscriber Already Exists Message. In the Feedback Messages section, you can alter the messages tailored to fit your needs.
Style Tab
This tab contains six settings including General, Label, Field, Checkbox, Radio, Button. Let’s walk through each setting one by one.
General
In the general section, we have two options:
Column Spacing: this allows you to change the space between fields that are arranged horizontally.
Row Spacing: this enables you to adjust the space between fields that are arranged vertically.
Label
In the label section, we can set the below style for the label:
Color
Font family
Font size
Font weight
Transform
Style
Decoration
Line-height
Letter spacing
Space between the label and field.
Field
In the field section, we can set the below style in the normal and focused situation.
Background color
Border Type
Border Radius
Box Shadow
Also, we can set Color, Typography, and Padding of the placeholder and value.
Checkbox
In the section, we can set below style in the normal and checked situation.
Size
Color
Typography
Spacing between
Spacing
Background color
Border style
Box-shadow
Radio
In the section, we can set below style in the normal and checked situation.
Size
Color
Typography
Spacing between
Spacing
Background color
Border style
Box-shadow
Button
In this section, we can adjust the style for a button with the following settings:
Height
Color
Typography
Spacing
Alignment
Background Type
Icon color
Border style
Box-shadow
Creating a Custom Contact Form
Contact forms are a useful type of form commonly used on websites. Visitors to your page can fill out contact forms to send messages, ideas, questions or any other information to the site owner.
In creating this form, you have the option to include Email, Redirect, Slack and Webhook actions. At the end of this section, we will create a Contact Us form like in the image below:
1. Go to Elementor > Add New.
2. Create a Section that is named Contact Us.
3. Add a new section with one column and set the following:
In the Advanced tab, Padding top and Padding bottom: 100px
4. Add a Heading.
In the Content tab, set Title to Contact Us and Alignment to Center.
In the Style tab, set Color to #FFFFFF
In the Advanced tab, set Padding Bottom to 16px.
5. Add a Form element from Raven Elements, then set the name to contact.
6. Create a First Name Field.
7. Create a Last Name field.
8. Create an Email Field.
9. Create a Phone Number field.
10. Create a Message field.
11. In the Style tab, set:
Background Color to rgba(255,255,255,0.91)
Placeholder Color to #000000
Also, set the other settings as shown in the images below.
12. Go to Content tab > Submit Button section.
13. Go to Style Tab > Button Section. Set Background Color to #6073e0
14. Go to Content tab > Setting section. Set your preferred actions.
15. Change the settings like in the images below in the sections of each action.
In the end, when submitting the form, the data will be sent to my@example.com, the page will be redirected to www.artbees.net, the form data will be sent to our Slack channel and a new email will be sent to the Gmail account that we set up in our zap in Zapier.
Creating a Subscription Form
Subscription forms are popular on websites as it enables the site owner to send news and deals to their subscriber list.
In this section, we’ll go through and explain the MailChimp, Download and Hubspot actions in detail. Also at the end, we’ll create the subscription form shown in the following image.
1. Go to Elementor > Add New. Create a new section and call it “subscribe.”
3. Edit the left column. In the Advanced tab, set:
Padding-top to 19 %.
Padding-Right to 30%.
4. Add a Heading element in the left column the set following settings.
Title: Subscribe to our Feeds
Alignment: center
Text color : #FFFFFF
Size: 26
5. Add a Spacer element in the left column.
6. Add a Social Icons element in the left column with the following settings.
Shape : Circle
Alignment : Center
In style tab: Primary Color to rgba(255,255,255,0.54), Secondary Color to rgba(0,0,0,0.68), Size to 17, Spacing to 18.
7. Edit the Right column:
In the Style tab, set background color to rgba(255,255,255,0.8).
In the Advanced tab, set the following:
Padding-top to 10%.
Padding-Right to 5%.
Padding-left to 5%.
Padding-bottom to 4%.
8. Edit the Right column:
Add a Form Element. In the Content tab set Form to Subscribe.
9. Create the First Name and Last Name fields like in the images below:
10. Create the Email and Phone fields as seen in the following images:
11. Create a Birthday field like the images below:
Important Note: In your MailChimp account, the type of birthday field must be Date.
12. Change the Submit button and Settings sections like in the image below:
13. In the MailChimp section, set our API Key and create five fields in Field Mapping with the following values:
Field Mapping
MailChimp Field
Form Field
Phone Number
Phone
Birthday
Birthday
First Name
First Name
Last Name
Last Name
Email
Email
14. In the Download section, set your URL for download.
15. In the Hubspot section, set the settings as seen in the following image:
Field Mapping
Hubspot
Form Field
firstname
First Name
lastname
Last Name
email
Email
16. Edit the Form > Style Tab, set the following:
Column Spacing: 15
Row Spacing: 25
Finally, after submitting a form the download will begin, the data in the form will be sent to Hubspot, and users will be subscribed to MailChimp.
Securing the Form
There’s no doubt that security is one of the most vital factors when it comes to forms. The Jupiter X Form Builder has been built on top of standard security practices.
Frontend Validation
Frontend validation (HTML5 validation) is used on the client-side to ensure that the data is correct before sending. The data entered into a form needs to be in the right format and certain fields need to be filled in order to effectively send the submitted form. For example, if we enter a number in the email field, an error occurs and the data is not sent.
Backend validation
Backend validation runs on the server after the data from the form is sent to the server. Backend is more important than frontend validation because hackers can disable frontend validation and send malicious data to the server.
reCAPTCHA
reCAPTCHA is a free Google service that protects websites from spam and abuse. With this service, we can ensure that the data is sent by a human, not a robot.
To add this to our form, we must go to reCAPTCHA and get the Site Key and Secret Key, and then insert them into Elementor > Setting > Raven.
Then, create a field with reCAPTCHA type to use it.
Logging the Sent Emails
Being able to log and view the sent emails in WordPress admin is very helpful both for development purposes and in tracking the emails.
There are some plugins that allow us to log the emails.
WP Mail Logging logs each email sent by WordPress. This can be useful if you don’t want to lose such mail content. It can also be useful for debugging purposes while developing.
Features
A complete list of sent emails.
Error status from mail implementation is logged.
Zero-configuration – just install and enjoy.
Log rotation – decide which emails you want to keep.
DevOP: IP of server sent the mail.
Conclusion
In this article, we took a deep dive into how you can create custom forms with the Jupiter X Form Builder. This post provided step-by-step instructions on how to create two types of forms: a contact form and a subscription form. Through looking at both of these examples, we also covered the Email, Redirect, Slack, MailChimp and Download actions that are found in them.
We took this post a step further and explained the significance of security and addressed frontend and backend validations, as well as reCAPTCHA. This post further examined two plugins that will allow you to log the emails that have been sent to your server from your site’s forms.
Feel free to share your ideas and experiences with us in the comments!
subscribe
Subscribe to Artbees Themes Blog for the best WordPress tips and insights.
