How to Create a User Registration Page in Elementor (Without Add-on)

If you want to create a user-generated site with WordPress+Elementor or other site types that allow user registration, the very crucial thing you need to provide is the user registration page. Elementor has no default widget to add a user registration form to a page, but you can add one using the Form widget with a little trick. We will cover it shortly in this article.

Since the Form widget is only available on the Elementor Pro, you need to upgrade your Elementor to the pro version if you haven’t done so. Read the differences between Elementor free vs Elementor Pro.

How to Create a User Registration Form in Elementor

Elementor has no default widget to add a user registration form. But, — as mentioned earlier — you can create a user registration using form the Form widget with a little trick. There are two components you will need:

  • The user registration form itself
  • PHP script to add a function to add a new user

Before getting started, we assume that you have been using Elementor for a quite while and have ever created a form using the Form widget before. If you are new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor.

Once you are ready, follow the steps below to start creating a user registration page in Elementor.

Step 1: Create the User Registration Form

First off, create a new page and edit with Elementor. Of course, you can also edit an existing page. On the Elementor editor, add the Form widget to the canvas area by dragging it from the left panel.

Go to the left panel to customize the form. The first option block you need to open is the Form Fields block under the Content tab. The registration form we will create consists of 5 fields as follows:

FieldField TypeLabel
First NameTextFirst Name
Last NameTextLast Name
Username (required)TextUsername
Email (required)EmailEmail
Password (required)PasswordPassword

Form name: Create New User

A crucial thing to note. Make sure to use the field labels precisely the same as the ones on the table above, including the uppercase and lowercase as they will be used as the variables on the PHP script we will use. Also make sure to give your form a name. Again, make sure to use precisely the same name (including the uppercase and lowercase) as the one we use in this example (“Create New User” in this case). Here is the example of the form we created.

Once done setting the form fields, open the Action After Submit block. Since you want to create a user registration form, you can set the action to Redirect.

On the Redirect block, paste the URL where you want your users to be directed after they successfully created a new user. For instance, you can redirect them to the login page of your website.

Open the Additional Options block and enable the Custom Message option. You can replace the Success Message with something like “The user was created.”

Your form is now ready. You can publish the page once you are done editing it.

Step 2: Add a New Function to Add a New User

Here is the PHP script to add a new function to add a new user on your WordPress site.

add_action( 'elementor_pro/forms/new_record',  'thewpchannel_elementor_form_create_new_user' , 10, 2 );
function thewpchannel_elementor_form_create_new_user($record,$ajax_handler)
{
    $form_name = $record->get_form_settings('form_name');
    //Check that the form is the "create new user form" if not - stop and return;
    if ('Create New User' !== $form_name) {
        return;
    }
    $form_data = $record->get_formatted_data();
    $username=$form_data['Username']; //Get the value of the input with the label "User Name"
    $password = $form_data['Password']; //Get the value of the input with the label "Password"
    $email=$form_data['Email'];  //Get the value of the input with the label "Email"
    $user = wp_create_user($username,$password,$email); // Create a new user, on success return the user_id no failure return an error object
    if (is_wp_error($user)){ // if there was an error creating a new user
        $ajax_handler->add_error_message("Failed to create new user: ".$user->get_error_message()); //add the message
        $ajax_handler->is_success = false;
        return;
    }
    $first_name=$form_data["First Name"]; //Get the value of the input with the label "First Name"
    $last_name=$form_data["Last Name"]; //Get the value of the input with the label "Last Name"
    wp_update_user(array("ID"=>$user,"first_name"=>$first_name,"last_name"=>$last_name)); // Update the user with the first name and last name
}

You can place the code above to the functions.php file of your theme. To do so, go to Appearance -> Theme Editor on your WordPress dashboard. Click the functions.php file on the right panel to edit it and paste the PHP script above to the and section of the functions.php file. Here is the example of the placement.

Click the Update File button beneath the editor to update the functions.php file.

Potential Errors

After your users have successfully created a new account, chances are they won’t be able to access the WordPress dashboard even if they have successfully logged in. If you experience this issue, try to change the role of the user to Contributor or the higher role (Author or Editor). To do so, go to Users -> All Users. Hover your mouse over a user you want to change her/his role and click the Edit link.

Scroll down to the Role option and select a new role from the dropdown menu. Cick the Update User button on the bottom to apply the new change.

If you want every newly registered user to have a Contributor role, you can set it (the Contributor role) as a default role. To do so, go to Settings -> General. Scroll down to the New User Default Role option and select a default role you want from the dropdown menu. Don’t forget to click the Save Changes button on the bottom to apply the new change.

If you keep wanting new users to have a Subscriber role and want to allow them to access the WordPress dashboard, you can try to fix the issue by temporarily deactivating the active plugins and reactivate them one by one until you see which plugin causes the issue.

How to Apply Image Masking in Elementor

A simple trick can determine the overall design of your page. When creating a page with Elementor, you might want to apply image masking to make the images on your page look standout and unique. Unfortunately, Elementor has no default styling option to apply image masking to an image. If you use Elementor Pro (read the difference between Elementor Free vs Elementor Pro) and have CSS knowledge, you can add a custom CSS to apply image masking to an image. If you have no CSS knowledge at all, you can use Happy Addons to apply image masking in Elementor.

Happy Addons is a freemium Elementor add-on that comes with a feature to apply image masking. This feature itself is only available on the pro version so you need to use the the pro version of Happy Addons to use this feature.

By the way, what is image masking?

Image masking is a process of hiding some portions of an image to reveal some other portions. This process is often applied in image editing tools such as Photoshop and GIMP. Here is the example.

CSS basically has a feature to apply image masking. But again, you need to have CSS skills to use it. You can read this article to learn more about it.

Happy Addons it a great solution to apply image masking in Elementor if you have no CSS knowledge.

How it Works

The feature to apply image masking works on Elementor widgets that involve an image such as the Image widget and the Image Box widget. You will see a new option called Image Masking right beneath the image selector. There are thirty-nine different masking shapes you can choose from. You can also use a custom masking shape by uploading an SVG file.

How to Apply Image Masking

Before getting started, make sure you have installed and activated the pro version of Happy Addons on your WordPress site. You can get it on its official website.

Once everything is ready, create a new page and edit with Elementor, or you can also edit an existing page. Add a widget that involves an image — such the Image widget — to the canvas area.

Go to the left panel and click the image selector on the Image block under the Content tab to select an image you want to use. Once the image is selected, click the pencil icon on the Image Masking option.

Select a masking shape you like. You can also set the position of the masking, set the size, and the repetition. If you want to use a custom masking shape using an SVG file, you can click the image icon (next to the Happy Addons icon).

Once done setting the image masking, you can go to the Style tab to customize your image such as setting the size and applying filters. Publish your page once you are done editing it.

How to Integrate WPForms with Elementor

WPForms is one of the most popular form builder plugins while Elementor is the most popular page builder plugin. If you use both plugins on your WordPress site, you can easily integrate them. We will cover it shortly in this article.

As you have known, Elementor Pro (read the differences between Elementor Free vs Elementor Pro) actually has a Form widget that you can use to create beautiful forms on your site. However, for an advanced need such as accepting payment or creating a user registration form, you need a more capable plugin. In addition, most form builder plugins — including WPForms — come with built-in submission management to streamline your workflow.

How to integrate WPForms with Elementor

There are at least two ways to integrate WPForms with Elementor. We will cover them all in this article. Don’t worry, you don’t need to spend extra money to integrate WPForms with Elementor.

Before getting started, make sure you have installed and activated both the WPForms and Elementor plugins on your WordPress site. Also, make sure that you already have at least one form created with WPForms. If you are new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor.

Integrating WPForms and Elementor using the Shortcode widget

Elementor has a widget called Shortcode. This widget is available on Elementor Free. As the name suggests, you can use this widget to integrate all WordPress plugins that use shortcode with Elementor. Since WPForms also uses a shortcode to add a form you created with it, you can use the Elementor’s Shortcode widget to integrate WPForms with Elementor.

First off, simply create a new page (Pages -> Add New) and edit it with Elementor. Of course, you can also edit an existing page. On the Elementor editor, drag the Shortcode widget to the canvas area.

Go to the left panel and paste the shortcode of the WPForms form you want to add to the field on the Shortcode block under the Content tab.

To get the shortcode of a WPForms form, you can go to WPForms -> All Forms. Each WPForms form has a shortcode that you can use to add the associated form to any page on your WordPress site.

Integrating WPForms and Elementor using the Happy Addons

Happy Addons is a freemium Elementor add-on that comes with a widget — the WPForms widget — that you can use integrate WPForms with Elementor. This widget is available on the free version Happy Addons so you don’t need to spend extra money. Unlike the first method above, when integrating WPForms with Elementor using the Happy Addons, you will be able to customize the look of your form.

Before being able to use the Happy Addons, you definitely need to install it first on your WordPress site. You can get the free version of this add-on on the official plugin repository of WordPress. Once the Happy Addons is installed and activated, create a new page and edit it with Elementor. Or, you can also edit an existing page. On the Elementor editor, add the WPForms widget by dragging it from the left panel to the canvas area.

Go to the left panel and select a form you want to add from the dropdown menu on the WPForms block under the Content tab.

To customize the look of your form, you can go the Style tab. There are 3 styling option blocks you can open to customize the look of your form.

  • Form Fields

You can open this block to set the field spacing, field padding, border radius of the fields, typography of the text fields (font family, font size, font style, and so on), the color of the text fields, the color of the field placeholder, and so on.

  • Form Fields Label

You can open this block to set the margin of the fields label, padding, typography, and text color.

  • Submit Button

You can open this block to customize the submit button. You can set things like button width, margin, padding, the typography of the button text, the color of the button text, background color, and border radius.

Once done customizing your form and editing your page, you can publish/update your page.

While you can use Happy Addons for free, there are some useful features available on the pro version such as preset, cross domain copy paste, live copy, image masking, and so on.

How to Create an Online Magazine Homepage in Elementor

Unlike tagDiv Composer, Elementor is not designed specifically to create an online magazine. Elementor has no native widgets to display posts in a grid style like tagDiv Composer. In tagDiv Composer, you have over 10 Big Grid shortcodes to display the articles on your website in several grid styles. If you want to create an online magazine with Elementor and want to add some grid elements to display your articles, you can use the JetBlog add-on.

JetBlog is a premium Elementor add-on (which costs $19 per year) that is designed specifically to create an online magazine and the similar site types. It is part of Jet Plugins family, a set of Elementor add-ons developed by Crocoblock. JetBlog comes with the following widgets:

  • Video Playlist: To create video playlists (support YouTube and Vimeo)
  • Posts Pagination: To add post pagination
  • Posts Navigation: To add post navigation
  • Ticker: To add a news ticker
  • Post Tiles: To display posts in a grid style. You can choose from 9 different grid styles
  • Smart Posts List: To display articles in a list style.

In this article, we will demonstrate how to create the homepage of an online magazine with JetBlog. Here is the example of the homepage we are going to create.

Example of the online magazine homepage created with JetBlog

In addition to JetBlog, you also need Elementor Pro (optional) to display articles in a list style. Or, you can also use the JetBlog’s Smart Posts List widget to display the articles in a list style.

Preparation

Before getting started, make sure you have upgraded your Elementor to the pro version (read the difference between Elementor Free vs Elementor Pro) and have installed and activated the JetBlog add-on as well. You can get JetBlog on the official site of Crocoblock. Alternatively, you can also get JetBlog with a one-time purchase option in the Jupiter X theme bundle.

Once you are ready, create a new page (Pages -> Add New) and edit it with Elementor.

If you are totally new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor.

Start Creating the Homepage

The homepage we are creating consists of three sections.

Section 1

We use this section to place the following widgets:

  • Smart Posts Tiles (JetBlog)
  • Divider (Elementor)
  • Posts (Elementor Pro)

Smart Posts Tiles Widget

Add a new section by clicking the plus button on the canvas area and select the one-column structure. Add the Smart Posts Tiles widget to the section you have just created by dragging it from the left panel.

Go to the left panel to customize the widget. First off, open the General option block under the Content tab. Select your preferred grid layout and set the height as well as the width of the main box.

From this option block, you can also set the image size, show/hide the post terms, set the excerpt length, show/hide the post meta, show/hide the post author, show/hide the post date, and show/hide the post comments.

Next, open the Query & Controls option block to filter the articles. By default, the widget displays the last articles on your website. You can use the custom query to display articles by categories or tags. You can also manually select the articles by entering the post IDs.

You can also open the Custom Fields option block to add custom fields. We don’t use custom fields in this example.

Next, open the Style tab to style up the widget. Here are the key styling option blocks you can open:

  • Box

You can open this block to set the space between boxes/tiles in the grid. You can also set the padding, border radius, and box overlay.

  • Content

You can open this block to set the color of the content title, hover color, typography (font family, font size, font style, and so on), the color of post title of the main box, the color of the post excerpt, content alignment, and so on.

  • Meta

You can open this block to customize the look of the meta such as text color, typography, icon size, gaps between icons, alignment, padding, margin, and so on.

You can open other styling options blocks according to the options you set on the Content tab.

Divider Widget

We will use this widget to add a separator between the grid element (the Smart Posts Tiles widget) and the Posts widget. Drag the Divider widget and place it right beneath the Smart Posts Tiles widget. Add a text element from the Divider block under the Content tab. You can add any text such as “featured stories”, “curated stories” or any text you like.

From this block, you can also set the width of the divider, divider style, and the alignment.

Once done setting the basic option, go to the Style tab to style up the divider. You can set the color, thickness (weight), and gap on the Divider block.

To customize the text of the divider, you can open the Text block. Here, you can set the text color, position, typography, and spacing.

Posts Widget

Add the Posts widget by dragging it from the left panel to the canvas area. Place it right beneath the Divider widget.

Open the Layout block under the Content tab on the left panel to set the skin, column, posts per page, image position, and so on.

Here are the setting options we use:

  • Skin: Classic
  • Number of columns: 3
  • Posts per page: 3
  • Image position: Top
  • Masonry: Off
  • Image size: Full
  • Image ratio: 0.55
  • Image width: 100 %
  • Metadata: Author, date

Once done with the Layout block, open the Query block to filter the articles. By default, Posts widget displays the latest articles on your website. You can filter the articles by categories, tags, authors, and so on. If you want to filter the articles by categories, for instance, select Term on the Include By field and enter your preferred categories.

You can order the articles by date, title, or randomly. If you want to enable the pagination, you can open the Pagination block.

Once done with the Content tab, you can go to the Style tab to the style up the Posts widget. Here are the key styling option blocks you can open according to the options you set on the Content tab.

  • Layout

You can open this block to set the space between columns, space between rows, and content alignment.

  • Box

Box refers to the container of each post. You can open this block to set the border width of the containers, border radius, border color, content padding, background color, and box shadow.

  • Image

You can open this block to set the border radius of the featured image of each post. You can also set the spacing between the featured image and the content. You can also apply CSS filters if you want to.

Section 2

We use this section to place the following widgets in two different columns:

  • Divider (Elementor)
  • Posts (Elementor Pro)
  • Image (Elementor)

Before adding the widgets, add a new section first. Select the two-column structure and set the width of the columns with the comparison of about 68:32%.

First Column (The Left One)

Add the Divider widget to the first column on the section you have just added above. On the Divider block under the Content tab, select the divider style you like and set the width to about 25%. Set the alignment to left and add the text element. You can add a text such as “latest stories”, “latest news”, and so on.

Go to the Style tab to style up the divider. Open the Divider block to set the divider color, thickness (weight), and gap.

Open the Text block to customize the text such as text color, typography, position, and spacing.

Add the Posts widget and place it right beneath the Divider widget. Go to the Layout block under the Content tab to set the basic setting options. The following are the basic settings we use.

  • Skin: Classic
  • Number of columns: 1
  • Posts per page: 5
  • Image position: Left
  • Masonry: Off
  • Image size: Full
  • Image ratio: 0.55
  • Image width: 40 %
  • Excerpt length: 25
  • Metadata: Author, date

You can open the Query block if you want to use a custom query as we have covered in section 1 above. Open the Pagination block to enable the pagination. We have covered how to add pagination in the previous article. You can read it to learn more. Once done setting the basic options, go to the Style tab to style up the Posts widget as you have done in section 1.

Second Column (The Right One)

Add the Image widget and place it to the second column. Actually, the Image widget spot is designed to display a 300×600 ad banner. You can replace this widget with the HTML widget to display a 300×600 ad banner once your website is ready to publish and you have an ad banner ready. On the site development phase, you can temporarily use the Image widget to demonstrate the ad banner. Prepare an image with a dimension of 300×600 px to be used on this spot.

Once done with the Image widget, add the Divider widget and place it right beneath the Image widget. On the Divider block under the Content tab, select a divider style you like, set the thickness (width) to about 65%, set the alignment, and add a text you like.

Go to the Style tab to style up the divider. You can set the color of the divider, thickness, and the gap on the Divider block. While to set the text color and typography, you can open the Text block.

Next, add the Posts widget and place it right beneath the Divider widget. Go to the Layout block under the Content tab to set the basic setting options. Here are the settings we use:

  • Skin: Classic
  • Number of columns: 2
  • Posts per page: 4
  • Image position: Top
  • Masonry: Off
  • Image size: Full
  • Image ratio: 0.55
  • Image width: 100 %
  • Excerpt length: Off
  • Metadata: Off

Open the Query block to filter the articles as you have done on the other Posts widgets above. Once done, go to the Style tab to style up the widget.

Go to the Advanced tab if you want to make some advanced options. In this example, we set the left padding to 45 to make the Posts widget has the same vertical alignment as the Image widget.

Section 3

We use this section to place the Divider and the Video Playlist widget.

Add a new section by clicking the plus icon on the canvas area. Select the one-column structure. Once the section is ready, add the Video Playlist widget.

There are two ways to create a playlist with the JetBlog’s Video Playlist widget. First, you can embed a playlist on your YouTube account. We have a separate article that covers this. You can read it to learn more. Second, you can create a new playlist by adding the videos you want to add to the playlist.

To create a new playlist, you simply paste the video URLs on the Items block under the Content tab. Click ADD ITEM to add a new video.

Open the Settings block to set the playlist height, thumbnails orientation, thumbnails position, and so on.

Go to the Style tab to style up the playlist. You can read our previous article to learn more about how to create a YouTube playlist in Elementor using JetBlog.

Until here, you have done creating an online magazine homepage in Elementor using JetBlog. You can play around to learn more about the JetBlog add-on. Click the PUBLISH button to publish your homepage.

Once the page is published, make sure to set it as the homepage on your WordPress site once your website is completely ready. To do so, go to Settings -> Reading.

On the Your homepage displays section, select the A static page option and select the homepage you have just created on the Homepage dropdown menu.

How to Create a Custom Login Page in WordPress Using Elementor

In WordPress, you can go to yourdomain.com/wp-login.php to access the login page of your website. If you have a large website with multiple authors/users, you might want to create a custom login page with your own design to strengthen the brand identity of your website. With Elementor, you can create a custom login page for your WordPress effortlessly — without neither coding nor installing an additional plugin.

Elementor has a widget — the Login widget — that you can use to create a custom login page for your WordPress site. Elementor even offers premade login page templates so that you can create a custom login page in no time.

How to create a custom WordPress login page with Elementor

Please note that the Login widget is only available on Elementor Pro. So, before being able to create a custom login page, you need to upgrade your Elementor to the pro version if you haven’t done so. Read this Elementor Free vs Elementor Pro article to learn more about the differences between Elementor Free and Elementor Pro.

If you are new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor.

1. Creating a custom login page from a template

As mentioned earlier, Elementor offers premade templates to allow you to create a custom login page in no time. To use one, first, create a new page (Pages -> Add New) and edit it with Elementor.

On the Elementor editor, click the folder icon to open the templates library.

Search for a custom login page template. You can use the search box to ease your job. Once you found the template you like, hover your mouse over it and click the INSERT button.

Wait a moment until Elementor is done loading the template. Once the template is loaded, you can click the PUBLISH to publish it.

That’s it.

To view the page, you can click the three-line icon on the top-left corner on the left panel and select View Page.

2. Creating a custom login page from scratch

If you have your own design concept of the custom login page, you can also create the custom login page from scratch. To get started, create a new page and edit it with Elementor. On the Elementor editor, add a new section by clicking the plus icon. You can select a column structure according to the design concept you want to create.

Once your section is ready, add the Login widget by dragging it from left panel to the canvas area.

Go to the Content tab on the left panel to set the basic options. There are 3 option blocks you can open:

1. Form Fields

You can open this block to enable/disable the label and set the input size.

2. Button

You can open this block to set the button text, button size, and button alignment.

3. Additional Options

You can open this block to enable/disable the elements on your login page such as the lost your password link and the remember me option. Since you want to create a login page, enable the Redirect After Login option and paste the WordPress dashboard URL (yourdomain.com/wp-admin) on the available field. You can also enable the Redirect After Logout option if you want to.

You can enable the Custom Label option if you want to use custom labels and custom placeholders on your login form.

Once done setting the basic options, go to the Style tab to style up the login form. There are 5 styling option blocks you can open:

1. Form

You can open this block to set the space between rows, the color of the links and the color of the links hover.

2. Label

You can only see this block if you enable the form label. You can open this block to set the spacing between form labels, text color, and typography (font family, font size, font style, and so on).

3. Fields

You can open this block to set the color of the text fields, typography (font family, font size, font style, and so on), field background, field border color, field border width, and field border radius.

4. Button

You can open this block to style up the login button. You can set such things as the button text color, hover text color, typography, button background color, border radius, and button text padding.

5. Logged in Message

You can open this block to customize the message once your users have been logged in. Here is the message:

You can set text color and typography of the message.

Once done styling up the Login widget, you can style up other widgets on your page. Once done editing the page, publish/update your page and you have successfully created the custom page.

One crucial thing to note. After creating the custom login page above, don’t delete the wp-login.php file on your WordPress site. Your WordPress site still needs this file to handle the login process.

How to Manage Form Submissions in Elementor

Elementor Pro (read: Elementor Free vs Elementor Pro) has a Form widget that you can use to create a form. When creating a form using this widget, you can set the form submissions to be sent to your email address, but for a certain need such as survey, photo contest, or questionnaire, you might want to save your form submissions into a database instead of sending them to your email. Unfortunately, Elementor has no feature to handle form submissions.

You can actually connect your Elementor form with a form backend service like Getform and Formcarry thanks to the webhook integration support, but it takes more effort and you will need to spend extra money. There is a great solution if you want to save your form submissions in a database: Form Vibes.

What is Form Vibes?

Form Vibes is a WordPress plugin that you can use to save form submissions into a database. This plugin is great if you use a form builder plugin that has no default submission manager such as Contact Form 7 and Elementor’s Form widget. You can manage the form submissions via your WordPress dashboard. In addition, you can also export them into a CSV file for further processing using tools like Microsoft Excel or similar tools.

Form Vibes comes with an analytics feature to allow you to track the performance of your form.

Official website of Form Vibes: wpvibes.com.

How to use Form Vibes to Manage form Submissions in Elementor

Step 1: Create a New Form

Of course, you need to have a form first before being able to use Form Vibes to manage your form submissions. To do so, create a page and edit it with Elementor. Or, you can also edit an existing page. On the Elementor editor, add the Form widget by dragging it from the left panel to the canvas area.

Go to the left panel and set the form fields on the Form Fields block under the Content tab. You can add/remove fields according to your need. To ease your job in using Form Vibes later, you can also give your form a name.

Once done setting the form fields, open the Actions After Submit block. Since you want to save your form submissions in a database, you can empty out the Add Action field.

Go to the Style tab to style up your form. Once done, publish/update your page.

Step 2: Install and Activate the Form Vibes Plugin

Form Vibes is a free plugin. It is available on the official plugin repository of WordPress. To install it, go to Plugins -> Add New on your WordPress dashboard.

Type “form vibes” on the search box. Once you find it, click the Install Now button to install it to your WordPress site. Activate the plugin right away once installed.

Step 3: Start Managing the Form Submissions

Once the Form Vibes plugin is installed and activated, you will see a new menu item on your WordPress dashboard called Form Vibes. Click it. On the first use, you will be asked whether you want to be notified over new updates. Click Allow & Permission if you want to. If you don’t, simply click the Skip button.

Before you start to manage the form submissions, go to Form Vibes -> Settings to set the user data you want to record. There are 4 data types you can record:

  • IP Address
  • User Agent
  • Debug Mode
  • CSV Export Reason

Click the Save Data button to save the changes.

To start managing your form submissions, go to Form Vibes -> Submissions. Form Vibes automatically detects all forms on your WordPress site. Select the Elementor form you have just created on step 1 above from the dropdown menu on the bar above the table.

Note: If your form doesn’t appear on the dropdown menu, make sure that it already has at least one submission.

Form Vibes offers two actions: export and delete.

Exporting Form Submissions

Form Vibes allows you to export your form submissions into a CSV file. You can choose this option if you want to make further processing using Microsoft Excel or other data processing tools that support CSV files.

To export form submissions into a CSV file, select the submissions you want to export by ticking the checkbox. To select all submissions, simply tick the top checkbox. Once done selecting the submissions, click the Select Action dropdown menu and select Quick Export.

Deleting Form Submissions

To delete form submissions, simply select the submissions you want to delete, click the Selection Action dropdown menu and select Delete.

The Bottom Line

Form Vibes displays your form submissions into columns according to your form fields, which is great to make it easy for you to manage the submissions. You can also click each submission to see the details about the submission according to the data you set on the Form Vibes settings page.

To see the statistics of your form, go to Form Vibes -> Analytics. Select the form you want to see the statistics of and set the date range. You can also see the daily stats, weekly stats, and monthly stats.

In case you are new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor.

How to Add Lottie Animation in Elementor

Since version 2.10.0, Elementor (Elementor Pro more precisely) supports Lottie animation, allowing you to add a lightweight animation to your page/template. Before the update, you could actually apply animation effects to a widget from the Motion Effects block under the Advanced tab. However, Lottie works in a different way. Lottie is an animation format, much like GIF so a Lottie file is a prerequisite to add Lottie animation in Elementor.

In Elementor, you can add a Lottie file using the Lottie widget. Hence, you can also apply motion effects to your Lottie file. For instance, you can apply a horizontal scroll effect to make your Lottie move horizontally — whether to the right direction or to the left direction — as the page is scrolled. Here is an example.

You can see the original file of the animation above here. On the original Lottie file, the cyclist — as well as his bike — stay in the same position when the page is scrolled. To make it move to the right when the page is scrolled down and back to the left when the page is scrolled up, you can use the Elementor’s built-in motion effect.

What is Lottie and where to get a Lottie file?

As mentioned earlier, Lottie is an animation format. It is a JSON-based animation format developed by engineers at Airbnb. You can learn more about the history of Lottie on this page.

The biggest advantage of adopting Lottie on your website is that your website will be much lighter since a Lottie file is much smaller than other animation formats, with sharp visual quality. You can also resize your Lottie file without breaking the pixels. Adobe After Effects is one of the tools that you can use to create a Lottie file. You can also get Lottie files for free on LottieFiles.

Please note that Lottie and LottieFiles are two different things. Lottie is — once again — an animation format, while LottieFiles is a website that offers Lottie files.

How to add Lottie animation in Elementor

Before getting started to add a Lottie animation in Elementor, make sure you have upgraded your Elementor Pro to version 2.10.0 or the higher version. Once you are ready, create a new page and edit with Elementor. Or edit an existing one. On the Elementor editor, drag the Lottie widget to the canvas area.

Go to the left panel. On the Lottie block under the Content tab, select the source. If you choose Media File, simply upload your Lottie file (the JSON file) by clicking the upload icon. You can then set the alignment and add a custom URL.

If you want to use a Lottie file hosted on a third-party source, select the External URL option and paste the URL of the Lottie file you want to use to the available field.

Next, open the Settings block under the Content tab to control the animation behavior. First off, select the trigger type to trigger the Lottie animation. There are 4 trigger types you can choose from:

  • Viewport: The Lottie animation starts playing based on the viewport high (the visible area of the device screen).
  • On click: The Lottie animation starts playing when a visitor clicks it.
  • On Hover: The Lottie animation starts playing when a visitor hover her/his mouse over it.
  • Scroll: The Lottie animation only plays when the page is scrolled.

You can also set enable the Loop option, enable the Reverse option, set the start/end point, and set the play speed. There is also an option to enable Lazyload.

To set the width of your Lottie file, you can go the Style tab. From this tab, you can set the width as well as adding a CSS filter just like when you are working with the Image widget.

If you want to apply a horizontal movement like the one on the example above, go to the Advanced tab. Open the Motion Effects block and enable Scrolling Effects. Click the Horizontal Scroll option. Set the direction, speed, and viewport.

Final words

If you want to download a Lottie file from the LottieFiles website, make sure to download the JSON file. First off, select the Lottie file you want to download and click the Download JSON button.

If you are new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor.

How to Fix Autoplay Video Not Working in Elementor

When adding a video to a page/template in Elementor using the Video widget, you can set the video to play itself once the page is loaded. The autoplay feature applies to all video sources. Be it YouTube, Vimeo, Dailymotion, or self-hosted. The most common issue when setting an autoplay video in Elementor is the video doesn’t automatically play once the page where the video belongs to is completely loaded.

How to fix the issue?

The first solution, disable the Image Overlay option. This feature (Image Overlay) allows you to use a custom thumbnail for your video. However, it will override autoplay. Your video won’t autoplay if the Image Overlay option is enabled.

The second solution, enable the Mute option. Some web browsers, including Google Chrome, only support autoplay video if the audio is muted. Even if your video contains no audio, you keep needing to enable the Mute option to make it autoplay on Google Chrome and some browsers.

You can read this documentation to learn more about the autoplay policy of Google Chrome.

If the two solutions above don’t fix the issue, you can try to use a different widget to add the video. You need to install an add-on to do so. JetElements has a widget — called Video Player — that you can use to add a video. Just like Elementor’s native Video widget. The Video Player of JetElements also supports the autoplay option. You can even select whether you want to use HTML5 or MediaElement Player for self-hosted video.

7 Best Email Marketing Tools for Elementor

Email marketing is the main foundation of the overall internet marketing process. If you want to create a website with Elementor and want to use email as one of your marketing tools, you need to make sure that the email marketing tool you want to use is supported by Elementor since not all email marketing tools are supported by Elementor.

In the context of email marketing, Elementor support means you can create a form (email subscription form in most cases) and connect the form with your email marketing tool account. Elementor itself allows you to add an email subscription form anywhere you like. From the single post template, sidebar, footer, popup, landing page, coming soon page, and so on.

A little note. Before being able to create an email subscription form (or any form type), you need to use the pro version of Elementor since the form builder feature is only available on Elementor Pro.

Here is the list of email marketing tools that are supported by Elementor.

1. Mailchimp

Mailchimp is one of the most popular email marketing tools widely supported by internet tools, apps, and services. Nearly all WordPress page builders have native integration support with Mailchimp. Elementor is no exception. The integration between Elementor and Mailchimp allows you to create an email subscription form on your website and send the subscribers data (email addresses, names, and so on) to a Mailchimp audience on your account.

Integrating Mailchimp with Elementor is pretty easy. You just need a Mailchimp API key which you can create via the Mailchimp dashboard. Mailchimp comes with some handy features to organize your email subscribers. For instance, if you use a single Mailchimp account for multiple websites, you can create different audiences to put together email subscribers by website. Mailchimp is a freemium email marketing tool. The free version allows you to store up to 2,000 email addresses. However, you can only create one audience.

2. MailerLite

MailerLite is another great option if you are looking for an email marketing tool that can be integrated with Elementor. Same as Mailchimp, this tool also offers a free version, which allows you to send up to 12,000 emails per month to 1,000 subscribers. Integrating MailerLite with Elementor is also extremely easy as you just need to enter a MailerLite API key. The integration allows you to create a subscription form and send the subscribers data to a list on your MailerLite account.

MailerLite also comes with some features that you can use to manage your subscribers. It allows you to create lists and segments. Some other key features offered by this tool are:

  • A/B split testing
  • File manager
  • Drag & drop editor
  • Newsletter templates
  • Email tracker
  • Built-in photo editing

3. ActiveCampaign

Unlike Mailchimp and MailerLite, ActiveCampaign offers no free version but you can try it for free during the trial period. Elementor also has native integration support with ActiveCampaign. There are two components you need to integrate ActiveCampaign with Elementor: API URL and the API key. You can get them from the ActiveCampaign dashboard. ActiveCampaign also comes with a segmentation feature that you can use to group contacts (subscribers) based on certain information. Some key features offered by ActiveCampaign are:

  • A/B split testing
  • Geotracking
  • Site tracking
  • Analytics
  • Personalization

4. ConvertKit

“Online marketing for online creators”. That is the tagline of ConvertKit. So, if you are a content creator and want to collect the email addresses of your fans, ConvertKit is a perfect option. ConvertKit is a freemium email marketing so you can use it for free if you haven’t had enough budget yet to use the pro version. Elementor also has native integration support with ConvertKit, allowing you to create a subscription form and send the subscribers’ data to your ConvertKit account before running a certain campaign. You need an API key to integrate ConvertKit with Elementor.

5. GetResponse

Same as ActiveCampaign, GetResponse also offers no free version but you can try it for free for 30 days during the trial period. Elementor also has native integration support with GetResponse to allow you to effortlessly integrate your account with your website. You can integrate your GetResponse account with Elementor using an API key.

6. MailPoet

MailPoet is one of the best email marketing plugins for WordPress. It is designed specifically for WordPress. You can run all of the email marketing processes via your WordPress dashboard. From managing the email subscribers, sending a newsletter, creating a certain campaign, and so on. No need to login to a third-party service dashboard. MailPoet is also supported by Elementor so you can create as beautiful as possible an email subscription form using Elementor visual interface and connect it with your MailPoet account.

Unlike the five email marketing tools above, you don’t need an API key to connect MailPoet with Elementor. Once the MailPoet plugin is installed and activated on your WordPress, you will see a MailPoet option when setting a form action on the Elementor form widget. MailPoet allows you to do the following things:

  • Send newsletters.
  • Automatically send an email to a new subscriber.
  • Automatically send an email to subscribers about new content.
  • Automatically send an email notification for new product availability (for WooCommerce).

MailPoet also comes with a segmentation feature to allow you to put together your subscribers into specific groups for a more targeted campaign. You can also create lists. MailPoet itself is a freemium email marketing tool.

7. AWeber

Elementor has no native integration support for AWeber but you can still integrate your AWeber account with Elementor using a plugin called AWeber for WordPress. It is an official plugin developed by the AWeber team. You need an authorization code to connect your AWeber account with Elementor.

Unlike the first 6 tools above, the pro version is not required if you want to integrate your AWeber account with Elementor. The AWeber for WordPress plugin adds a new widget to your Elementor which you can use to load one of the forms from your AWeber account. If you use Elementor Pro, you can set the form action to AWeber when creating a form with Elementor, just like other tools above. AWeber doesn’t offer a free version, but you can try it for free during the trial period.

How to Integrate AWeber with Elementor

Unlike other email marketing tools like MailChimp, MailerLite, and ConvertKit, Elementor has no native integration support with AWeber. If you use AWeber and want to integrate your account with an Elementor-powered website, you need to install an additional plugin called AWeber for WordPress. You can get it from the official plugin repository of WordPress. The plugin will add a new widget — called AWeber — which you can use to load an existing form from your AWeber account. You can use this widget if you use Elementor Free.

If you use Elementor Pro, you can set the form action to AWeber when creating a subscription form.

Just like other third-party services, you need to connect your AWeber account with Elementor first to start the integration.

Connecting AWeber with Elementor

Before getting started, make sure you have installed and activated the AWeber for WordPress plugin. If you have done so, go to AWeber -> Settings on your WordPress dashboard.

On the Connect tab, click the Get Started button.

You will be directed to a new tab to generate an authorization code. Login with your AWeber account and click the Allow Access button or simply hit the enter key on the keyboard.

Copy the generated authorization code and close the tab.

Switch back to your WordPress dashboard tab and paste the authorization code you have just copied and click the Finish button.

Go to the Advanced Options tab and select a list on each option and click the Save button on the bottom-right corner.

Creating an AWeber subscription form

Elementor Free

Create or edit an Elementor page/template you want to add the AWeber form to. On the Elementor editor, add the AWeber widget to the canvas area.

Go the settings panel. Under the Content tab, select a list as well as a form on your AWeber account.

Publish/update the page/template once you are done editing it.

Elementor Pro

Create or edit an Elementor page/template you want to add the AWeber form to. On the Elementor editor, add the Form widget to the canvas area.

Set the fields you want to add to your form on the Form Fields block under the Content tab. Once done, open the Action After Submit block. Add a new form action and select AWeber.

The step above would add a new block called AWeber. Open this block and select a list on your AWeber account. You can also add tags if you want to. Also set the field mapping according to the fields on your form.

Go to the Style tab to style up your form. Once you are done, publish/update your page/template.

That’s it!

In case you are new to Elementor, you can read the beginners’ guide we wrote to learn how to use Elementor.

How to Use Adobe Fonts in Elementor

Using the pro version of Elementor allows you to integrate your Elementor with a wide range of services and tools. Adobe Fonts (formerly TypeKit) is one of which. Adobe Fonts, as you already know, is one of the best resources for fonts, other than Google Fonts. Integrating Adobe Fonts with Elementor will enrich the fonts library on your Elementor.

To use fonts from Adobe Fonts you need to have at least one web project on your Adobe Fonts account. You can then use the ID of your web project to integrate Adobe Fonts with your Elementor.

How to create a web project in Adobe Fonts

If you have no web project yet, you can create one first. To do so, visit the Adobe Fonts website and login with your Adobe account. Once logged in, click Browse Fonts on the top-left corner to browse a font family.

Find a font family you like and click the View Family button to view the details.

Click Add to Web Project on the right side.

On the appearing popup, select a project from the dropdown menu. If you don’t have one yet, simply create a new project by clicking Create a new project.

Give your project a name and click the Create button.

Once your new project is crated, click My Adobe Fonts on the upper-right corner.

Click the Web Projects tab. Select one of the existing projects you want to integrate with Elementor and select its project ID.

To add font families to your project, you can click Browse Fonts on the top-left corner. Select a font family you like and click the View Family button to view the details. Click the Add to Web Project on the right side and select a web project you want to add the font family to from the dropdown menu.

Integrating Adobe Fonts with Elementor

Login to your WordPress dashboard and go to Elementor -> Settings to open the Elementor settings page. Once you are, click the Integration tab. Scroll down to the Adobe Fonts (TypeKit) section and paste the project ID you have just copied. Click the Get Project ID button. Don’t forget to click the Save Changes button on the bottom to apply the changes.

Please note that the synchronization process may take a few minutes. If you can’t wait, you can click the Sync Project button every time you are done adding a new font family to your project in Adobe Fonts.

If everything went well, you could now use a font from Adobe Fonts on your Elementor page or template. To test the result, try to edit the typography of a widget and change the font family. Elementor displays fonts from Adobe Fonts right below the custom fonts section.

How to Add Post Tags when Creating a Single Post Layout with Divi Builder

As you already know, Divi Builder allows you to create a custom single post layout on your WordPress site without coding. You can use the Divi Builder visual editor to do so. When creating a custom single post layout with Divi Builder, you can customize every single element of the layout. From the heading text, main body (the content), post image, featured image, and so on. You can also add such elements as the current category, post tags, author bio, date, and so on.

Speaking of post tag, this element is commonly found on the end section of a blog post, right after the content. Tag is typically used to group articles on a website. Much like a category, but more specific. If you are new to Divi Builder and are experiencing a problem in adding post tags, this post will show you how.

You can read our previous post to learn how to create a custom single post layout with Divi Builder. In this post, we will go straight to adding the post tags element.

Adding post tags to a custom single post layout in Divi Builder

First off, go to Divi -> Theme Builder. Edit an existing custom single post layout and by clicking the pencil icon.

Add a new Text module on the area you want to add the post tags to (typically beneath the post content). On the Text module settings panel, click the database icon to use dynamic content and select Post Tags.

Add a before and after text and click the green checklist icon. If you want, you can also replace the default tags separator.

Go to the Design tab on the Text module settings panel to style up the post tags. Once done, click the green checklist icon to apply the change.

Click the Save button on the bottom-right corner to apply the changes you have just made to your custom single post layout and click X button on the top-right corner to exit the Divi Builder editor.

Pin It on Pinterest

Creating with WordPress?‚Äč

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.