Contact form 7 plugin can manage multiple contact forms. It also lets you customize the form and the mail contents flexibly with simple markup.
Displaying a Form
Let’s start with displaying a form on your page. First, open the Contact > Contact Forms menu in your WordPress administration panel.
You can manage multiple contact forms there.
Just after installing the Contact Form 7 plugin, you’ll see a default form - Contact form 1 and a code like this:
[contact-form-7 id="2526" title="Contact form 1"]
Copy this code. Then open (Pages > Edit) of the page where you wish to place the contact form. A popular practice is creating a page named Contact for the contact form page. Paste the code you've copied into the contents of the page.
Now your contact form setup is complete. Your site visitors can now find the form and start submitting messages to you.
Next, let’s see how you can customize your form and mail content.
Customizing a Form
Title for this contact form is just a label for a contact form and is used for administrative purposes only. You can use any title you like, e.g. Job Application Form and so on.
In the form you can enter different tag generators. They can be generated automatically.
text - form-tag generator for text;
email - form-tag generator for email;
text - form-tag generator for text;
tel - form-tag generator for phone numbers;
date - form-tag generator for date input;
text area - form-tag generator for text areas;
drop-down menu - form-tag generator for drop-down menus;
checkboxes - form-tag generator for adding chackboxes;
acceptance - form-tag generator for creating acceptance checkbox;
quiz - form-tag generator for creating a quiz;
reCapthca - form-tag generator for adding a captcha;
file - form-tag generator for adding files;
submit - form-tag generator for creating submit form.
You can also customize the form content using HTML and form tags.
Line breaks and blank lines in this field are automatically formatted with <br/> and <p> HTML tags.
Tag generators (3). By using these tag generators, you can generate form-tags without knowledge of them.
For more information about form-tags, see How Tags Work.
Mail Tab
You can edit the mail template for the mail which is sent in response to a form submission. You can use mail-tags in these fields.
An additional mail template is also available. It is called Mail(2) and its content can differ from the primary Mail template.
You can edit various kinds of messages, including Validation errors occurred,Please fill in the required field, etc.
Make sure that you enter only plain text here.
HTML tags and entities are not allowed in the message fields.
Additional Settings Tab
You can add customization code snippets here. For more details, see
Contact Form 7.
Elementor Page Builder
Elementor Page Builder
is the most advanced frontend drag & drop page builder. It helps to add functionality to your website with the help of its easy-to-use customizable modules.
Detailed Elementor Page Builder documentation can be found here.
After installation and activation of Elementor plugin, you can set up it in WordPress Dashboard in Settings section in Elementor menu as seen below.
Detailed Elementor General Settings documentation can be found here.
JetBlocks
JetBlocks makes it extra easy to add authorization links, hamburger panels, login forms, add and customize site logo, nav menu, registration forms, search forms and WooCommerce cart using the convenient widgets made specifically for Elementor.
Detailed documentation about JetBlocks can be found here.
JetBlog
JetBlog is a plugin that enriches the website’s content with multiple modules, that will suit not only for creating blog pages, but will also liven up your website with different dynamic modules, such as Smart Tiles, Text Tickers, Video Playlists, Smart Posts List.
With JetBlog one can add content modules on the page built with Elementor, and style up the content appearance to match the general webpage style. Using JetBlog you can customize the modules backgrounds, layouts, responsiveness, add borders and apply shadows, change typography, and there are still so many more options to discover for each of the content modules.
Detailed documentation about JetBlog can be found here.
Jet Data Importer
This plugin will help you export posts, comments, widgets, settings etc., from one site to another. With a single click of a button the plugin generates an XML file that can be imported to another website.
After the installation the plugin adds a new block - Demo Content where you can export or import the content.
Note: The images are not exported separately, they are downloaded from the server during the import.
File Import
To import the content, you need to upload the XML file and press Start Import.
Once the import begins you will see a box with progress bars.
After the import is complete you can view the site or customize it.
File Export
To export the data, you only need to press an Export button and an XML file will be created automatically.
Array Structure
XML importer settings. Features:
enabled
enable/disable XML importer;
use_upload
show/hide the files upload form;
path
path to the pre-installed sample-data;
import
import settings;
chunk_size
number of processed items at 1 importing step. The less this number is, the more steps will be during the importing process, and less time will be spent for 1 step. For this reason, it is strongly recommended to reduce this number for the themes with large sample data to avoid problems with importing files on weak servers;
remap
data post-processing settings. Here you need to add keys with posts IDs that can be changed during the import;
post_meta
post metadata settings;
term_meta
terms metadata settings;
options
options.
Export Settings
message
message displayed in the export block;
logo
url of the logo displayed in the export block;
options
options array for the additional export.
success links
associative array of links displayed on successful installation page. Link ID is used as a key. The plugin contains IDs for the homepage and for customizer;
label
link text;
type
type of displayed button (default, primary, success, danger, warning);
target
_balnk, _self;
url
link url.
JetElements
Jet Elements is a large set of additional modules located inside Elementor Page Builder plugin that help to add more functionality and extra useful features to your website.
Detailed documentation about Jet Elements can be found here.
JetMenu
JetMenu is a plugin that assists you in creating and styling up mega menu. You’ll be able to create content for the menu items and customize items appearance, add menu badges and icons, change menu item background - all this with JetMenu plugin, which is easy-to-use and has intuitive and clear interface.
The plugin works in tandem with Elementor live page builder, allowing to add content to menu items in a drag-and-drop way. The content and style settings share the same treats with Elementor and JetElements. You’ll also get Custom Menu module for Elementor, which allows you to add your menu to any page layout section you want.
Detailed documentation about JetMenu can be found here.
Jet Plugins Wizard
Jet Plugins Wizard is a powerful instrument that allows you to install all the necessary plugins and demo-content in an easy and effortless way.
To install it you must go to Plugins tab in your administration panel. There you'll see the following notice.
Just click on Begin installing plugin link, and the installation will begin.
After Jet Plugins Wizard is installed you will be able to see Jet Plugins Wizard tab in your administration panel. Go to this tab, and Jet Plugins Wizard will offer you to install the bunch of recommended plugins to your theme.
You can also select which particular plugins you want to be installed. To do it you just have to select them from the list that wil appear on your page. Then click on Next button and proceed to the installation process.
When the plugins are installed it is time to install demo content for your theme. Jet Plugins Wizard will offer you to do just that.
Demo Content Installation
Jet Plugins Wizard will offer you several scenarios how to install demo content to your theme.
Append demo content to my existing content
this option will append the demo content for your theme with your existing content.
Replace my existing content with demo content
this option will rewrite your previous existing content with the demo content.
Skip demo content installation
by choosing this option you refuse to install demo content for your theme.
When the installation will be over you'll see the following notice.
JetTabs
JetTabs is a plugin that allows adding stylish tabs and accordion widgets with vertical and horizontal layouts and building content inside them using Elementor live page builder widgets.
The plugin makes it simple to create a template with Elementor and add it to the Accordion or Tabs widget. It helps organize content and style it up according to one’s needs and preferences.
Detailed documentation about JetTabs can be found here.
JetThemeCore
JetThemeCore is a powerful plugin which is aimed to help users create custom headers, footers, sections, etc.
Start Working with JetThemeCore
From this bock you will learn what JetThemeCore is and which settings it contains.
First, navigate to the Dashboard and locate Storycle Theme at the bottom left corner.
Click on it and locate the page with Skins and Settings.
Skins block contains a Library with variations of skins, which can be selected and installed. Click on Install button to install the needed skin.
Settings block is responsible for Locations relations. Here you can select relations between Jet and Pro templates attached to the same locations from the dropdown list. Click Save button once selected.
JetThemeCore Library
From this block you can learn how to create new templates and work with them using JetThemeCore plugin.
First, let’s navigate to Storycle Theme > My Library section on the left of the Dashboard. Here open My Library sub menu.
In the Theme Parts block you’re able to view the existing templates for your theme or create the new ones.
Theme Parts:
All
shows all the existing theme parts;
Page
displays the existing page templates;
Header
here you can view all the existing footer templates on your site;
Footer
here you can see all the existing footer templates on your site;
Sections
here you can view the list of the section templates.
Every template shown in these blocks can be edited, removed to the trash bin, restored, etc.
Creating Headers & Footers
From this block one can learn how to create header & footer templates and assign them for different pages.
First, click Add New button located on the right of the Theme Parts title.
In the Theme Parts block you’re able to view the existing templates for your theme or create the new ones.
In the newly opened window select the template type from the dropdown menu (page, header, footer, section).
Type in the template name in the corresponding field.
Use Elementor page editor to create a new unique header / footer.
After that navigate to Headers / Footers tab and here select the header / footer you want to use as a template on your website’s pages.
JetTricks
JetTricks is a plugin that allows adding different visual effects without ever needing to add a single line of code. The plugin is made for those people who enjoy exquisite animation effects and are willing to add them to the website pages to liven up the website.
JetTricks allows to add Parallax to different widgets, create unfolding sections, sticky columns and View More buttons.
Detailed documentation about JetTricks can be found here.
