Wednesday, January 13, 2021

How to Track User Journey on WordPress Lead Forms

Do you want to track user journey on WordPress lead forms?

Tracking user journey allows you to see exactly which pages your visitors view before they fill out a form on your website. This information can help you capture more leads and grow your business.

In this article, we’ll show you how to easily track user journey on your WordPress contact form and lead forms.

Tracking user journey on WordPress lead forms

Why Track User Journey for Your WordPress Forms?

Ever wondered why some users fill out forms on your website and some don’t? Well, the answer often lies in how users interact with your website.

Wouldn’t it be nice if you can see the steps users take on your website before they actually fill out a form?

This information is called user journey and by tracking it you can learn a lot about user behavior and activity on your website.

Once you find out what compels users to fill out forms on your website, then you can replicate it to generate more leads and grow your business.

How to track user journey for your WordPress forms?

If you are already tracking conversions in WordPress using Google Analytics, then you can get some insights into user activity before filling out a form on your website.

However, you’ll not be able to match it to the actual user who submitted the form and the data they submitted.

This is where WPForms comes in.

It is the best WordPress form builder plugin on the market that’s used by over 4 million websites. You can use it to create any kind of forms in WordPress.

WPForms seamlessly integrates with all top email marketing services, supports multiple payment gateways, and is super easy to use.

It also comes with a User Journey addon, which allows you to see where your users came from and what path they took that led them to a successful form submission.

User journey steps

You can also see how much time they spent on each page before filling out the form.

That being said, let’s take a look at how to easily track user journey for WordPress forms.

Tracking User Journey for WordPress Lead Forms

First thing you need to do is install and activate the WPForms plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Note: You’ll need at least the PRO plan of the plugin to access the User Journey addon.

Upon activation, you need to visit the Settings » License page to enter your license key. You can find this information under your account on the WPForms website.

Entering your WPForms license key on your site

Next, you need to visit WPForms » Addons page and click on the ‘Install Addon’ button under the ‘User Journey Addon’.

Install user journey addon in WordPress

After that, you can start creating your forms. WPForms makes it super easy to create any kind of form. You can create a simple contact form, an email sign up form, user registration and login forms, booking forms, and more.

For the sake of this tutorial, we will create a contact form.

Simply go to WPForms » Add New page to create your form. You’ll be asked to provide a title for your form and then select a template.

Create new contact form

We’ll use the simple contact form template.

WPForms will now load their drag and drop form builder with typical contact form fields already created for you.

Edit contact form

You can add new form fields from the left column, edit or remove existing fields, or rearrange fields by moving them up or down.

Once you are satisfied with your form, you can click on the ‘Save’ button to store your form and exit the form builder.

You can now add this form to any WordPress post or page. Simply edit the page where you want to display the form.

On the post edit screen, you need to click on the add new block button (+) and then add WPForms block to your content area.

WPForms block

In the WPForms block settings, you need to click on the drop-down menu to select the form you created earlier.

Select your form

WPForms will display a preview of your form in the content area.

You can now save your post or page and preview it to see your form in action.

Viewing User Joruney Reports for Your Forms in WordPress

After a few users have submitted the form, you can view the user journey reports for all form entries.

Simply go to the WPForms » Entries page and click on the form you created earlier.

Select the form you want to view

You’ll see a list of form entries submitted by users. Simply click on the ‘View’ link next to a form entry to see full details.

Viewing form entries

On the entry details page, you will see the form fields submitted by the user at the top. Below that, you’ll see the ‘User Journey’ section.

User journey steps

It will show you the referral source that sent the user to your website. Below that, you’ll see the path they took with all the pages visited leading up to the form submission.

It also shows how much time users spent on each step of their journey. This helps you understand which content they found more engaging or helpful.

If you also want to track the user’s geographic region, then you can go to WPForms » Addons page and install the Geo Location Addon.

Geo Location Addon in WPForms

This would allow you to view the user’s geographic location along with the rest of user journey data.

Geo location tracking for form submissions in WordPress

Making Use of User Journey Data to Capture More Leads

Now that you can track user journey for your lead forms in WordPress, the next step is to use this data to capture more leads and grow your business.

Luckily, there are lots of tools you can use to nudge users into right direction.

1. OptinMonster

OptinMonster

OptinMonster is the best lead generation and conversion optimization software on the market. It helps you capture more leads without affecting user experience on your website.

It comes with smart lightbox popups, mobile popups, slide-in scroll boxes, countdown timers, floating banners, and more. You can also use powerful display rule features to dynamically show personalized content to users at the precise time.

All these tools help you improve the user journey and create an effective path for higher form conversion rates.

2. SeedProd

SeedProd

SeedProd is the best WordPress landing page builder on the market. It allows you to quickly create landing pages for your WordPress lead forms, sale campaigns, advertising campaigns, and more.

You don’t need any design skills to create those pages. You can pick from dozens of beautiful templates and then use a simple drag and drop tool to make it your own.

Most importantly, all of these templates are designed to improve user journey, generate more leads, and boost conversion rates.

3. All in One SEO for WordPress

AIOSEO

All in One SEO for WordPress is the best WordPress SEO plugin on the market. It allows you to easily optimize your WordPress website to get more free traffic from search engines like Google.

All in One SEO comes with powerful SEO tools that just work out of the box. You don’t even need to be an SEO expert to use it.

It includes local SEO, rich schema, eCommerce support. advanced XML sitemaps, SEO health check, and more. These tools make sure that users can easily find your website in search results.

You can use AIOSEO to further optimize your popular pages to boost your organic traffic and leads.

We hope this article helped you learn how to easily track user journey in WordPress lead forms. You may also want to see our ultimate guide on conversion tracking in WordPress for more practical tips to boost conversions

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Track User Journey on WordPress Lead Forms appeared first on WPBeginner.


January 13, 2021 at 06:00PM

Tuesday, January 12, 2021

How to Create a Custom Page in WordPress

Do you want to create a custom page in WordPress?

A custom page lets you use a different layout from your regular pages in WordPress. Many WordPress sites have custom page layouts for their sales pages, landing pages, webinar pages, and more.

In this article, we will show you how to easily create a custom page in WordPress, step by step.

How to create a custom page template in WordPress

Understanding Custom Pages in WordPress

By default WordPress allows you to create posts and pages.

Your WordPress theme controls the appearance of your pages using a template file called page.php.

This template file affects all single pages that you create in WordPress.

However, as you already know that not all pages are the same. For instance, you may want to create a landing page that looks quite different from your regular website pages.

In the past, creating a custom page in WordPress meant coding your own custom template using HTML, CSS, and PHP. We will cover that method, but we do not recommend it for beginners.

Instead, we suggest using SeedProd or another page builder plugin to create your custom page. Simply use these quick links to jump straight to the different methods.

Using SeedProd to Create a Custom Page in WordPress

SeedProd is the best drag and drop page builder for WordPress. It comes with 100+ professionally designed templates that you can use as the basis for your page.

Alternatively, you can create a completely custom WordPress page without writing any code using their drag & drop builder.

SeedProd is designed to be easy to use, even for total beginners. However, it also has advanced options that let you build visually stunning pages to engage your visitors and increase conversions.

First, you need to install and activate the SeedProd plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Note: there’s a free version of SeedProd plugin available as well. However for our example, we’ll be using the Pro version since it has many powerful features.

Upon activation, you should see the welcome page. You need to enter your license key here and click the ‘Verify key’ button. You will find your license key in your account area on the SeedProd website.

Entering your license key for SeedProd

Next, go to SeedProd » Pages in your WordPress admin. Then, simply click the ‘Create New Landing Page’ button.

Creating a new landing page in SeedProd

Next, you will be prompted to choose a template. You can filter these to find templates for the type of page you are creating. If you prefer to start from scratch, then simply use the blank template.

Choosing your page template in SeedProd

For the sake of this tutorial, we’re going to use a ‘Course Sales Page’ template.

You will be prompted to give your page a name and set the URL. After doing so, go ahead and click the ‘Save and Start Editing the Page’ button.

Giving your page a name and URL in SeedProd

The template you chose will now load up in the SeedProd page builder.

The SeedProd page builder interface

To change anything in the template, simply click on it. It’s easy to change text directly in the page builder itself. For instance, here we are editing the page headline.

Editing your page headline in SeedProd

You can format your text, change the alignment, add links, and more.

It’s also easy to edit images using the SeedProd page builder. Simply click on the image that you want to change.

In this example, we have replaced the default image at the top of the page with our own image.

Uploading a new image into SeedProd

Go ahead and change anything you want by simply clicking on it. This will open the editing pane on the left hand side of the page.

To add new blocks (elements) to your page, simply click on the Design tab at the top of the page. Just choose any Standard or Advanced block and simply drag and drop it into place on your page.

Adding blocks in SeedProd

After adding a block, you just need to click on it to edit it. Here, we’ve added a list block to our page.

A list block in SeedProd

If you make a mistake at any point or change your mind, don’t worry. Simply click the ‘Undo’ button at the bottom of the page to reverse what you did.

The Undo button in SeedProd

You will also find the redo button, revision history, layout navigation, mobile preview, and global settings for your page here.

Once you are happy with your custom page, it’s time to preview or publish it. To publish the page, first click the dropdown arrow next to the Save button at the top of the screen. Then, select the Publish option.

Saving or publishing your page in SeedProd

You will see a message letting you know that your page has been published. To check it out straight away, simply click the ‘See Live Page’ button.

The SeedProd message letting you know that your page has been published

To edit your custom page at any point in the future, simply go to SeedProd » Pages in your WordPress admin.

You should see your saved page in the list of landing pages. Simply click on the title to edit it.

Editing your existing landing page in SeedProd

The benefit of using SeedProd over any other page builder in WordPress is that it will not slow down your site. SeedProd is the fastest page builder, and it lets you create completely custom page layouts that are independent of your theme design, so you can have custom header, footer, etc.

Using Beaver Builder to Create a Custom Page in WordPress

Beaver Builder is a popular and well-established drag and drop page builder for WordPress.

You can use it to easily create custom pages on your website or blog. We recommend using the full version of Beaver Builder. There’s also a free version of Beaver Builder available with limited features.

First, you need to install and activate the Beaver Builder plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you will see the Beaver Builder welcome screen. Simply click on the License tab to enter your license key. You will find this in your account area on the Beaver Builder website.

Don’t forget to click the ‘Save License Key’ button to save your license key.

Adding your license key to Beaver Builder

To use Beaver Builder, simply go to Pages » Add New in your WordPress admin to create a new page. Then, click the ‘Launch Beaver Builder’ button.

Launch the Beaver Builder editor when creating a new page

The Beaver Builder editor will then open up. You need to add rows and modules to create your page. Simply click on the element you want to use, and drag it onto your page.

Selecting modules or rows to drag and drop using Beaver Builder

Alternatively, you can start with a template. Go ahead and click the Templates tab, then choose a template to use.

Choosing a template in Beaver Builder

You can then click on any part of the template to change it. For instance, you can change the text, images, colors, and more.

Here, we’re editing the heading of the page. Beaver Builder’s editing process isn’t quite so smooth as SeedProd’s, as you need to type the text into a separate popup box.

Editing a heading in Beaver Builder

Once you’ve finished making changes to your page, simply click the Done button on the top right. You will then be able to save or publish your post.

Saving your post in Beaver Builder

Creating a Custom Page Template Manually

If you prefer not to use a plugin, you can create a custom page template manually in WordPress.

Editor’s note: It’s completely fine to have many plugins running on your WordPress site. Take a look at our post on how many WordPress plugins you should install if you are worried about having too many plugins.

First, you need to open a plain text editor like Notepad on your computer. In the blank file, add this line of code at the top:

<?php /* Template Name: CustomPageT1 */ ?>

This code simply tells WordPress that this is a template file, and it should be recognized as CustomPageT1. You can name your template anything you want as long as it makes sense to you.

Once you have added the code, save the file to your desktop as, custompaget1.php.

Go ahead and save the file with any name, just make sure that it ends with the .php extension.

For this next step, you will need to connect to your WordPress hosting account using an FTP client.

Once connected, go to your current theme or child theme folder. You will find it in the /wp-content/themes/ directory. Next, upload your custom page template file to your theme.

Now you need to login to your WordPress admin area to create a new page or edit an existing one.

On the page editing screen, scroll down to the ‘Page Attributes’ section. You will see a Template dropdown menu. Clicking on it will allow you to select the template you just created.

Selecting your custom page template

If you select your new template and visit this page on your site right now, then you will see a blank page. That’s because your template is empty and does not tell WordPress what to display.

Don’t worry, we will show you how to easily edit your custom page template.

Editing Your Custom Page Template

Your custom page template is like any other theme file in WordPress. You can add any HTML, template tags, or PHP code in this file.

The easiest way to get started with your custom page is by copying the existing page template provided by your theme.

Open your FTP client and go to your theme folder. There you will find a file called page.php. You need to download this file to your computer.

Downloading the page php file for your site

Open the page.php file in a plain text editor like Notepad, and copy all its content except the header part.

Template header of a typical page php file in WordPress

The header part is the commented out part at the top of the file. We are not copying it, because our custom page template already has one.

Now you need to open your custom page template file and paste all the code you have copied at the end.

Your custom page file would now look something like this:


<?php /* Template Name: CustomPageT1 */ ?>

<?php get_header(); ?>

<div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
                <?php
                // Start the loop.
                while ( have_posts() ) : the_post();

                        // Include the page content template.
                        get_template_part( 'template-parts/content', 'page' );

                        // If comments are open or we have at least one comment, load up the comment template.
                        if ( comments_open() || get_comments_number() ) {
                                comments_template();
                        }

                        // End of the loop.
                endwhile;
                ?>

        </main><!-- .site-main -->

        <?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>


Simply save your custom page template file and upload it back to your theme folder using FTP.

You can now visit the page you created using the custom page template. It should look exactly like your other pages in WordPress.

Next, continue editing your custom page template file. You can customize it in any way you want. For example, you can remove the sidebar by removing the line that starts <?php get_sidebar.

You can also add custom PHP code or add any other HTML you want.

To add the actual content for your page, just edit the page as normal in WordPress.

You could also leave the content area in the page editor completely empty, and add custom content directly to your page template. That way, the content you add will appear on all pages using the custom template.

We hope this article helped you add a custom page in WordPress. You may also want to see our guide on the most important types of WordPress pages that every website should have, and our list of the must have WordPress plugins for all websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a Custom Page in WordPress appeared first on WPBeginner.


January 12, 2021 at 06:00PM

Monday, January 11, 2021

How to Embed Facebook Albums in WordPress

Do you want to embed Facebook albums into your WordPress website?

Embedding Facebook albums is a great way to boost social engagement on both your WordPress website and your Facebook page.

In this article, we’ll show you how to easily embed Facebook albums in WordPress, step by step.

Embedding Facebook albums in WordPress posts and pages

Embedding a Facebook Album in WordPress

WordPress used to come with built-in embed support for Facebook albums. Just like you embed a YouTube video, all you had to do was to copy and paste the URL of any Facebook album and WordPress automatically fetched and displayed it.

However, all of this changed recently when Facebook and Instagram made changes to their API. These changes made it impossible for WordPress to continue oEmbed support for Facebook and Instagram.

Now if you paste a link to a Facebook Album, WordPress will show you a message that ‘Sorry, this content could not be embedded’.

Facebook embed error in WordPress

You can convert it to a link, but that wouldn’t display your album and instead take users to Facebook to view your photos.

Luckily, our sister company Smash Balloon created a fix for Facebook and Instagram embeds in WordPress.

This allows you to easily embed Facebook albums in your blog posts, pages, and widgets with even more features and functionality.

Embed Facebook Albums in WordPress with Smash Balloon

Smash Balloon is the best Facebook plugin for WordPress which allows you to easily display your Facebook feed on your website to boost engagement and get more likes.

First, you need to install and activate the Smash Balloon Custom Facebook Feed plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Once activated, go to the Facebook Feed » Settings page and then click on the ‘Licence’ tab. From here you need to enter your license key which can found under your account on the Smash Balloon website.

Enter your Smash Balloon license key

Next, you need to click on the ‘Configuration’ tab and then click on the big blue button to connect your Facebook account.

Connect your Facebook account

You’ll be able to choose whether you want to connect to a Facebook page or a group. We’ll connect to a page for this example, but you can connect to a group and share those albums as well.

Select Your page

This will take you to Facebook where you will be asked to log in to your Facebook account and click on the Continue button.

Login to Facebook and continue

After that, you will be asked to select which Facebook page(s) you would like to connect. Simply check the boxes next to the pages that you want to connect to your WordPress site.

Select Facebook pages to connect with WordPress

Click on the Next button to continue.

You’ll be asked to select permissions for the page. Make sure that they are all turned on otherwise Smash Balloon may not be able to fetch content from your Facebook account.

Finish Facebook connection wizard

After that, you can click ‘Done’ to finish setup.

You’ll be now redirected back to your WordPress website where the plugin will ask you to select which page(s) you want to use. Simply click to select the page(s) and then click on the ‘Connect this page’ button to continue.

Connect Facebook pages to Smash Balloon

Smash Balloon will now show your page as connected. Don’t forget to click on the ‘Save Settings’ button to store your changes.

Displaying Your Facebook Albums in WordPress Using Smash Balloon

Smash Balloon is highly customizable and offers multiple ways to display your Facebook albums in WordPress.

1. Display All Your Facebook Albums

This method is easier and allows you to show all your Facebook albums in a WordPress post or page. Users can then click to view photos in your albums in a lightbox popup.

Simply go to Facebook Feed » Customize page and scroll down to the Post Types section.

Display albums feed

From here, you need to uncheck all other items except Albums. You will see a few options like album source, title, and other settings. You can leave them unchanged if you are unsure.

Go ahead and click on the Save Changes button at the bottom of the page to save your changes.

Now, you need to edit the post or page where you want to display your Facebook albums. On the content editor screen, click on the add new block button (+) and then add Custom Facebook Feed block to your content area.

Custom Facebook Feed block

The plugin will then automatically fetch albums from your Facebook page and display a preview of them in the content area. You can now save your changes and preview the post / page to see your albums in action.

Facebook albums displayed in a grid layout

You’ll see your Facebook albums listed in a neat grid layout. Clicking on the album will open it in a lightbox popup.

Facebook album lightbox popup in WordPress post

2. Display a Specific Facebook Album in WordPress

Smash Balloon also allows you to easily embed a specific Facebook album anywhere on your WordPress site.

For that, you’ll need their Album addon which comes with the ‘Smash’ plan.

Simply go to the Facebook Feed » Extensions page and click on the Get This Extension button.

Get album extension

This will take you to the Smash Balloon website where you can purchase the extension or upgrade your plan.

After that, you can download and install the extension like you would install any WordPress plugin. Upon activation, return to the Facebook Feed » Extensions and check the ‘Activate’ option under the Albums extension.

Activate album extension

Don’t forget to click on the Save changes button to store your settings.

You are now ready to embed any Facebook album from your page or group to your WordPress blog.

First, you will need to find the ID for the Facebook album that you want to embed. Simply visit Facebook and open the album and you’ll see the album ID in the URL field.

Get album ID

For instance, your album URL may look like the following.

https://ift.tt/3oyJVBD

In this URL, the numeric string after the set=a. is your album ID.

After obtaining the album ID, you can copy and paste it somewhere safe. You’ll need it in the next step.

Now, simply edit the post or page where you want to display the album. On the post edit screen, you need to add the shortcode block to the content area.

Inside the shortcode block, you’ll need to enter the following shortcode.

[custom-facebook-feed album=YourAlbumID]

Shortcode block

Don’t forget to replace the YourAlbumID with your own album ID that you copied earlier.

You can now save your changes and preview your post or page to see your Facebook album embedded in WordPress.

Preview of a single Facebook album embed in WordPress

We hope this article helped you learn how to embed Facebook albums in WordPress. You may also want to check out our guide on how to create a custom Instagram photo feed in WordPress, and how to create an email newsletter to connect with your visitors after they leave your website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Embed Facebook Albums in WordPress appeared first on WPBeginner.


January 11, 2021 at 06:00PM