Category: Tutorials

The header and footer are one of the most important parts of a website. Your website’s header is the first thing a visitor notices while landing on your site. A header refers to the navigation bar that displays the business logo, links to all important pages, any CTA, and a way of contacting you via a phone number or email address.

A well-structured header is crucial for your website and can be used to advertise any messages or promotions. It creates easiness for potential customers to explore the website. A good header functions like a good salesman; for example, using the call to action of 20% off for only today will urge the users to buy your product.

A header can be of particular types, such as a sticky or fixed. A sticky header is also known as a fixed header. It is a smart navigation tool that fixes the main menu at the top of the page as visitor scrolls down.

Importance of Sticky Header

A sticky header is a fixed header that allows users to quickly access the search and all important pages without going to the top of the page. According to a study, 22% of internet users said that websites with sticky headers are easier to navigate. Another study found that using a sticky header on an e-commerce website increased conversions by 3%.

Creating a sticky header in Elementor is not simple, especially if you are creating a website for the first time. So, we have created a step-by-step guide to help you design a sticky header with Elementor without writing a single line of code.

Let’s get started!

1. How to Create Sticky Headers using Elementor Pro

A sticky header is a very efficient way to create convenience for your website users. Let’s see how we can quickly design a sticky header using the Elementor theme builder that comes as a premium feature in Elementor Pro.

Step 1: Create a Main Menu

Before creating the sticky header for your website, first, you need to create the Main Menu in your wp-admin > Appearance > Menus. Add all the important pages that you want to show in your header must be listed here.

Step 2: Open the Theme Builder

After creating the main menu, go to Elementor Templates > Theme Builder. On the theme builder page, click on the Header section and choose “Add New Header.”

After that, a pop-up will appear; write the name of the header template and click on “Create Template.”

Now you will be redirected to the Elementor Editor page. On this page, you can choose any prebuilt header templates or create your own. Here, we will create a sticky header from scratch.

Before we start creating the header, it is important to highlight that Elementor offers 7+ widgets that you can utilize to create your header.

Step 3: Build a Header Template in Elementor

Now select the two-column structure (one column for the logo and the other for the horizontal menu).

Then go to layout and select the boxed option in content width.

Choose the column width to 20% under the “Edit Column.”

Now, add the logo of your website to the left column and select the left alignment. Then in the right column, add the Nav Menu and choose the menu you created in step 1. Now, align the main menu to the right-hand side.

In this tutorial, we are creating a basic header. You can create a more stylish header by adding hover animation effects, background color, and buttons.

Step 4: Make Your Elementor Header Sticky

Now that you have designed a basic header, it is time to make it sticky. To make it fixed, click on the Edit section and go to Advanced > Motion Effects.

Under the advanced section, select sticky to the ‘top’ from the dropdown, select the devices you want to display your sticky header on and click on publish button.

Once published, a new pop-up screen will appear asking you to ‘Add a Condition’ for your header. Setting the conditions determines where your header is used throughout your website. For example, choose “Entire Site” to display it across your site.

That’s it, now you know how to create a sticky header in Elementor in a few steps.

Add More Style with Custom CSS

You can make your Elementor sticky header more stylish using a custom CSS class. You can add background color, height, sticky effect, and transition effects. Let’s see how we can achieve that.

Go back to the “Edit section” and go to Advanced > Motion Effects.

Go to “Effects Offset” under Motion Effects and enter the value 100. It is the scrolling distance where the scrolling effect appears whenever a user lands on your website.

Scroll down and open the “Custom CSS” dropdown. Paste the CSS class given below. You can also edit this CSS to design it however you like.

Custom CSS:

selector.elementor-sticky–-effects {
  background-color: rgb(255, 220, 168) !important;
}

selector {
  transition: background-color 3s ease !important;
}

selector.elementor-sticky–-effects > .elementor-container {
  min-height: 80px;
}

selector > .elementor-container {
  transition: min-height 1s ease !important;
}

2. Create a Free Sticky Header Menu using Xpro Elementor Theme Builder

You can also use the FREE Xpro Elementor Theme Builder to create a sticky header with a full creative design experience. It is a free Elementor add-on that gives you the functionality to create a sticky header using premium header templates and theme builder widgets.

Let’s see how we can create a sticky header in Elementor using this theme builder plugin.

Step 1: Install the Xpro Theme Builder Plugin

Go to your WordPress Dashboard > Plugins > Add New.

Now, search for the Xpro Elementor theme builder, click on the “Install Now” button, and “Activate” it once installed.

After activating the plugin, you will see the “Xpro Addons” option in the sidebar of your dashboard.ss

Step 2: Create a Sticky Header

To create the sticky go to Xpro Addons > Theme Builder > Add new.

Add the title of your sticky header. Select the “Header” option from the “Type of template” dropdown.

Choose “Enable” from the “Header Sticky” option and click on the “Edit with Elementor” button after saving your setting. You can also tweak other settings according to your choice.

Now you will be redirected to the Elementor editor page. On this page, you can choose any of the modern pre-built templates or create your own. Here, we will create a sticky header from scratch.

Select the two-column structure, one for the logo and the other for the menu.

Now from the “Layout” option, set your content width to “Boxed”.

Set the structure with a “33,66” ratio from the Structure dropdown.

Add your website’s “Site Logo” to the left column and select the left alignment option under the General dropdown. Then in the right column, add the Nav Menu and choose the “Main Menu.” Now, align the main menu to the right-hand side.

Now, click on update, and your header will go live on your site.

3. Create a Sticky Header Menu with myStickymenu

myStickymenu is another WordPress plugin that can be used to create a beautiful customized header for your Elementor website. You can create a welcome bar for announcements, add a countdown for promotions, and more.

Let’s create a sticky menu with myStickymenu.

Step 1: Install the Plugin

To install the plugin, go to your WP Dashboard > Plugins > Add New.

Now, search for myStickymenu, click on “Install Now,” and then click on “Activate”.

Step 2: Enable Sticky Settings

Go to Settings > myStickymenu. Toggle the sticky menu button and select “Other Class or ID” from the dropdown under Sticky Class.

Change the other settings like opacity or background color according to your web design goals. Now, scroll down and click on the “save button”. Refresh your website to see the sticky header in action.

myStickymenu is a good plugin for creating a sticky header, but it has a drawback. You can only make a basic sticky header with it. To get more customization options, you have to upgrade your plan starting from $25 per year.

4. Create a CSS Sticky Navbar in WordPress

The last option in our blog for creating a sticky header in Elementor is using custom CSS in your WordPress theme. To create a sticky navbar using CSS, log into your WordPress dashboard and follow the steps below.

Step 1: Open the WordPress Customizer

Go to Appearance > Customize > Additional CSS.

Step 2: Add CSS Code

Add the following CSS code.

nav {
  background: #ffff;
  height: 70px;
  z-index: 999;
  margin: 0 auto;
  border-bottom: 1px solid #dadada;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

Now you can customize your header as per your liking but this requires sound knowledge of HTML & CSS. Most of the themes offer this feature as a premium function. But, we have used the Xpro free theme as an example.

If your site offers long-form content then adding a sticky navigation header might help improve the user experience. Creating a sticky header with Elementor Pro and Xpro Elementor theme builder is quite easy as compared to other methods highlighted in this blog. The one offered by Xpro also comes with free Xpro addons. In the end, it’s your choice to opt for any method you find suitable for your Elementor website.

If you have any questions related to how you create a sticky header in Elementor then let us know in the comment section. We will happily assist you.

WordPress can display a plethora of different types of content, but organizing it can be tough. The default options are fairly limited, and customizing them can be confusing. That’s precisely why I decided to put together this brief guide.

By using custom post types, you can create a new type of item – like posts and pages – which will contain a different set of data. It’ll have its own admin menu, its own editing pages, its own custom taxonomies, and a bunch of other utilities.

If you’re wondering why you need one of these in the first place, they’re best for websites with content that is organized along an unusual structure. So if you have any content that you need to display differently than on regular posts and pages, a custom post type may be just what you need. They’re also great for SEO, due to their built-in permalinks.

What is a Custom Post Type?

A post type, despite the specific-sounding name, can be used for any kind of content. You’ve probably seen them before since developers use custom post types to add portfolios, staff, testimonials, and more to their WordPress themes. So a custom post type is just a regular post with a different post_type value in the database. There are five default post types: post, page, attachment, revision, and navigation menu. WordPress 3.0+, however, gives you the capability to add your own custom ones.

The term taxonomy comes up often in reference to custom post types and that might be a bit confusing to some. For those new to WordPress, taxonomies are a way to group posts and custom post types together. WordPress comes with four built-in ones: category, tag, link category, and post formats. You can learn more about the specifics of these over at the WordPress Codex. However, you can also create your own custom taxonomies and use them in your post types to group and sort content.

How to Create a Custom Post Type?

Adding custom post types in WordPress is extremely easy since WordPress includes the core function register_post_type that can be used to create them. This means if you are a plugin developer you can easily include custom post types in the theme you are creating. Or you can add them via your child theme or via a custom plugin.

Creating A Custom Post Type Manually (using code)

First things first, where should you add your code? The best place to register and add your custom post types depends on your project. If you are working on a client site that already has a theme active you’ll want to create a child theme and register your post types from there. If you are creating your own custom theme you can place the code in the functions.php file or in any other file called from your functions.php. And if you are developing a plugin it doesn’t really matter where you add the code, so long as the code runs before the ‘init’ action hook to make sure it’s available.

For testing purposes, your functions.php file will do just fine. But a plugin will ensure you won’t break your site by changing or upgrading your theme.

If the custom post type is really important, consider making it a must-use plugin. For the uninitiated, must-use plugins are installed in a special directory inside the content folder and are automatically enabled on all sites. Must-use plugins don’t show in the default list of plugins on the plugins page of wp-admin.

Anyway, a custom post type can be added to WordPress via the register_post_type( ) function. This allows you to define a new one by several labels. Once you’ve created your header, you can use this function before the admin_menu, but after the after_setup_theme action hooks. If created correctly, you can pull this off with only a few lines of code. From the WordPress Codex, here’s a simple example of a new custom post type:

function create_post_type() {
  register_post_type( 'acme_product',
    array(
      'labels' => array(
        'name' => __( 'Products' ),
        'singular_name' => __( 'Product' )
      ),
      'public' => true,
      'has_archive' => true,
    )
  );
}
add_action( 'init', 'create_post_type' );

This would create a post type named “product” that’s identified as “acme_product.” The register_post_type function gets two values. The first one is “labels” for the name. The second one is “public” to make it show up on the admin screen and on your site. And lastly “has_archive” enables the new post type’s archive.

After setting this up, you should see the menu entry for the custom post type, be able to add posts, view the post list in the admin, and visit them on your website. There are many more values or arguments, you can add to a custom page. A full list of them can be found on the register post type page of the Codex.

Next, create a 16×16 pixel icon image and save it to your current plugin folder. This is required for the custom post type icon in the dashboard. Another option is to use a font icon. If you’d be interested in going that route we have a quick guide for how to use Dashicons for your custom post types that you should read. Then you can go on and activate the plugin.

A note on naming: while it’s tempting and convenient to use a simple custom post type identifier it’s better to prefix. Use a short namespace that identifies the plugin, theme, or website that uses the custom type. For a much more detailed guide, checkout the tuts+ guide to WordPress Custom Post Types. They dig into more code and custom post type options if you want to code your post types yourself. But if you want a quicker and easier option, keep reading!

Creating a Custom Post Type with Post Types Unlimited

The easiest way to add new custom post types is with a plugin. The free Post Types Unlimited plugin happens to make creating and managing custom post types a breeze. You can even create custom taxonomies too.

All you have to do is install the plugin. You can grab it right from the WordPress directory (see the links above). Or install it from your WordPress dashboard under Plugins > Add New and search for “post types unlimited” – it should be the first result. Just install and activate.

This will add a new Post Types menu item towards the bottom of your dashboard. Click on it to begin creating your new post types and taxonomies. There are tons of options for the custom post type or taxonomy name, making the new post type visible to authors, where it appears in your dashboard (or where within a submenu, such as under “Settings”), the menu icon, supported meta boxes (just check the ones you’d like to include), and even advanced settings for the REST API.

Choose the options you want to enable for your new post type and save. That’s it. It’s ready to go! Just look for the name you gave your new custom post type in your dashboard. Ours is named “My Post Types” in the screenshot above. (Note – we did not assign a location, so it was simply added after the existing post types on our test site.)

Post Types Unlimited was created to work great with any WordPress theme, but if you’re using the Total WordPress Theme you’ll have access to a ton of exclusive and powerful options. Set a custom main page for your breadcrumbs, choose the new post type’s archive layout options, select entry (and single entry) blocks and meta, enable Next/Prev pagination and more.

WCK WordPress Creation Kit PRO

The WordPress Creation Kit PRO is a premium WordPress plugin that makes it easy to customized your WordPress installation so clients or contributors only see what you want them to. This powerful plugin gives you control over custom fields and post type to create your own cleaned up installation of WordPress.

If you are a web developer you probably already know that WordPress can be overwhelming for some clients, and one way to help them streamline the process of using their website is to trim down what they can and can’t see on the backed of their WordPress installation. Enter the WordPress Creation Kit PRO. With this you can create a user friendly WordPress installation specific to your client. You can create and rename custom post types and taxonomies to make it easier for them to understand, or hide some of the settings options included with the WordPress theme you’ve used for their website. There’s tones you can do with the WordPress Creation Kit PRO.

Another great feature of the WordPress Creation Kit PRO is the custom fields included. Depending on the post type you are creating you might want to add a text area for content, a drop down of options (such as staff member titles, or the type of equipment used for a photo shoot), the date or something else. Whatever your needs, WordPress Creation Kit PRO includes 11 custom field options so you can make your post types easy for your clients to use.

ACPT – Custom Post Types for WordPress

Another option is ACPT Custom Post Types for WordPress. This freemium plugin offer a lite version that you can grab from WordPress.org to add the ability to register custom post types and taxonomies and create meta box fields (with field types for email, select and text to choose from). All it takes is 3 clicks, and ACPT even walks you through the process.

Whether you want to add a new post type for news outside of your blog, or one to organize your complex music library this plugin is a great choice. Plus ACPT lite also offers quick page builder integration (via a custom shortcode, Gutenberg block, and Elementor widget), as well as seamless WooCommerce integration (for all product types and default data). So you should be able to install and get started no matter what setup your WordPress site is currently using.

But you should know the pro version has even more features! This gives you more control over your custom post type as well as options for advanced settings. Visit the main ACPT.io site to upgrade for access to added meta box field types (24 total including multi-select, toggles, addresses, maps, phone number, colors, currency, date, times, embeds, galleries, images, lists, HTML, and more), enhanced post type relationships, support for custom APIs (which you can use to manage available ACPT operations), a helpful HTML template builder for archives or singles pages, and even the ability to import/export data.

Custom post types can sound intimidating, but they don’t need to be. With a little practice, you can get the basics of custom post types down and create the site you need. And with the free Post Types Unlimited plugin, there’s no excuse not to. Now that you’ve got the basics down, let us know if you have any additional questions. Or if you have more helpful tips, share them! Feel free to drop me a line in the comments below. Let’s get a discussion going!

While the aesthetics of a website are important, its content and loading speeds keep people coming back. WordPress supplies users with a sophisticated toolbox of plugins and themes to create their very own custom websites quickly.

However, these themes and plugins require JavaScript (JS) and Cascading Style Sheets (CSS) to work. WordPress creates them automatically in the form of script files. They are often poorly optimized. As such, they can slow down your website considerably.

This can be frustrating for readers. Thus, in this guide, we will explore how to find and remove these render-blocking scripts and show you how to increase the loading speeds of your WordPress website.

What Are Render-Blocking JS and CSS Scripts and Why Are They Bad?

Most web pages on the internet are made of three key components: JavaScript, CSS, and Hypertext Markup Languages. HTML serves as the base, while JavaScript and CSS are embedded into it. However, these days, it is more conventional to embed calls to external scripts in the HTML document.

These scripts are kept in a queue that your web browser uses to render the web page. The easiest way to see what scripts a web page uses without looking at the source code is by downloading it from your (Ctrl + S) web browser. The web browser will download the HTML document along with a folder with all (or most) of the scripts, images, and other files the web page uses.

The more complex scripts your webpage has to call from the queue, the longer it will take to render. Often, web browsers will download web page resources such as scripts and images in a local cache to load web pages faster. While users on the client side can speed up web page rendering times by disabling JavaScript, increasing cache size, and using AdBlockers, this isn’t an ideal solution. The onus should be on the web developer.

If you receive complaints or have noticed that your website has issues rendering its content, it’s not too late to fix it.

How to Optimize Your Website by Finding and Fixing Render-Blocking Scripts

Before deciding which scripts to terminate or optimize, you must assess your website or web page’s speed. You can use an online platform such as GTmetrix or Google’s PageSpeed Insights. All you will be required to do is insert the URL of the website or webpage you want to test, and the tool will grade it and provide other insights.

They will also suggest audits you can use to make your website faster. For instance, they will propose that you use fewer elements in your webpage or reduce unused CSS and JavaScript. GTmetrix will go as far as showing you which scripts need to be optimized.

Alternatively, you can use Chrome DevTools’ Coverage Tab to show you the utilization data of your scripts. Once you identify which scripts are suboptimal, you can do a few things to fix them. However, these steps will require quite a bit of coding prowess to implement them successfully. You’ll at least need a basic understanding of functional JavaScript programming.

Joining a coding tutorial course (or Bootcamp) is also a good idea to help develop your skills further. On average, a coding bootcamp can take up to fifteen weeks to complete, and while this may sound like a long time, it’s well worth it when you consider how basic code literacy is an important skill to have in the modern world. Nevertheless, here are five ways to fix render-blocking scripts and increase the speed of your webpage.

1. Optimize the load order

The head section (</head></head>) of the web page is used for pre-loading elements. The foundation of your web page should go here, so a white screen does not greet the user when they load your web page. While embedded CSS is fine, you should avoid placing JavaScript in here.

Once you have optimized the head section, you need to optimize the body. Most web browsers render web pages from top to bottom. You need to order calls to scripts according to their importance and complexity. You should place calls to scripts that are not crucial for the web page’s rendering last along with complex scripts that take time.

2. Minify code

Minifying code involves rewriting it and deleting unnecessary characters such as white spaces, comments, commas, line breaks, etc. This makes the code more concise and compact, which ultimately reduces the size of the script and increases loading times for your web page.

Plugins and tools such as W3TC have modules that minify the JavaScript and CSS in your themes. Alternatively, you can manually minify your script code with a free online tool like JavaScript Minifier.

3. Use deferred and asynchronous loading of JavaScript

Web browsers read code from top to bottom. When they encounter a script tag, they stop loading the web page and read the script file. This slows rendering down.

You can use the async attribute to load the script in parallel with the web page and execute it as soon as it’s available. Alternatively, you can utilize the defer attribute to defer the parsing of scripts. This means it will also load the script parallel to the web page but only executes it when the browser parses the web page.

We advise that you don’t use the async or defer attributes on scripts used to render and display visual elements. The JavaScript keyword equivalents to these attributes are the async and await keywords. You can use them to load your Javascripts more asynchronously without editing the HTML tags on your web page.

4. Replace JavaScript Visual Elements with CSS3

In the past, CSS wasn’t as versatile as it is today. For instance, CSS 1.0 and 2.0 were devoid of UI tools like basic controls and sliders.

Then CSS 3 came along. It presented new colors, box shadows, opacity, etc. JavaScript is great for adding complex user interface controls. However, Javascript is heavier on resources than CSS.

Thus, using excessive amounts of JavaScript slows down your website considerably. If you notice that your web page is using JavaScript to pick up the slack where previous versions of CSS fell flat, you should alter it and replace all unnecessary JavaScript with CSS – where you can. This will allow web pages to load faster.

5. Eliminate All Unnecessary Scripts

The purpose of JS and CSS is to expand the functionality to web pages and add logic where HTML can’t. However, HTML 5.3 arrived with new tags that would make some CSS and JS operations unnecessary. Using HTML instead of scripts naturally makes your web pages load faster.

Thus the best way to optimize the speed of your website is to eliminate all underutilized scripts. You’ll need to analyze which scripts are completely unnecessary and remove them. Again, you can use Chrome DevTools’ Coverage Tab or GTmetrix to find the most underutilized scripts on your web page and then remove them.

Once you remove all unnecessary functions or tags, you can combine scripts whose functions are similar. If you already know how to maneuver your way around the source code of your web page, then this shouldn’t be a difficult task for you. However, users who aren’t as experienced or knowledgeable in web design should not fret. WordPress makes it easier for you to identify scripts on your website and edit them using various optimization plugins. We’ll cover those next.

6. Using Plugins to Optimize Your WordPress Website

Again, you do not need a working knowledge of programming to optimize your WP website. Although some experience would help. Nevertheless, there is a range of plugins geared towards script optimization. Some of them use AI to minify code, change the load order and replace underutilized scripts with more efficient code and scripts.

Some of the best plugins for script optimization include:

• WP Rocket: This is one of the most popular plugins for web optimization. It can automatically detect which scripts are problematic and fix them for you. You can use it for quick caching, deference, compression, and minification.
• Autoptimize: This can defer and eliminate non-essential scripts, integrate inline CSS and minify scripts, HTML, and images. Autoptimize is highly customizable through an open API and advanced options.
• W3 Total Cache: This plugin requires a bit of work to use. You will need to track and identify scripts manually before you remove or edit them. In most cases, this plugin is already available with your WordPress package.
• Async Javascript: An open-source plugin presented by WordPress. It allows you to detect render-blocking JavaScript and then defer it or asynchronously load it.

So why didn’t we just recommend plugins in the first place? Unfortunately, some of these plugins will cost you. For instance, Autoptimize costs $49 per year. While it’s a reasonable fee, it may be unideal for people who are already paying a large chunk of money for hosting and other applications and plugins.

Nevertheless, regardless of whether you’re using plugins or finding scripts manually, you need to understand concepts such as minification, asynchronous loading, and load order. It will make it easier for you to troubleshoot any loading issues should one of your scripts fail.

Most websites need a way for customers, potential clients or regular readers to reach out. You could buy a theme that has a custom contact page built-in or try to code a contact page yourself, but these options are typically either costly or complicated. You don’t have time for that – which brings us to Contact Form 7.

What is Contact Form 7?

Contact Form 7 is a free WordPress plugin that you can use to create a variety of contact forms for your website. Not only is this plugin free, but the custom shortcode for each contact form you create makes it easy to add your contact forms to any post, page or widget area.

We love this plugin so much that practically every WPExplorer theme supports it, even our top-selling premium WordPress theme Total. And other developers agree as you’ll be hard-pressed to find a theme it isn’t compatible with.

Why Choose Contact Form 7?

So now that you know what Contact Form 7 is, your next question may be why this plugin? There are tons of awesome contact form plugins to choose from so what makes Contact Form 7 the right choice?

Well first, it’s free – as in there is no premium version. So compared to other “free” form plugins you won’t see tons of up-sells built into the main dashboard which is really nice. It’s also customizable. There are also easy ways to tweak your forms with available parameters or with a bit of CSS. And as we mentioned, it’s compatible with a very wide range of free and premium themes, so should you decide to change your theme later on your contact forms should remain functional.

With that cleared up, let’s take a look at how you can use Contact Form 7 on your WordPress site.

How to Get Started with Contact Form 7

Installation is easy. Just navigate to Plugins > Add New and use the Search option to find the Contact Form 7 plugin. Install and activate the plugin.

Once active you should see a handy dandy “Contact” menu item in your WordPress dashboard. Click on it to go your main contact form management page.

The plugin authors were nice enough to include some helpful information in the dashboard – feel free to dismiss this notice at any time. By default there will also already be an example “Contact form 1” waiting for you. We recommend deleting this form so you can start from scratch.

Add New to create your first contact form. You’ll see a lot of options when your contact form opens. Don’t be scared – I promise it’s easy.

First you’ll notice a box at the top of the page. This is where you can change the name of your form. We recommend naming the form something that makes sense to its purpose – like where or how you will be using it.

Now, moving on to the available settings. We’ll go through these tab by tab.

Form Settings

The Form tab is where you will actually build your contact form. Contact Form 7 uses various tags to add different form sections. The default contact form includes name, email, subject, message and send button fields.

To delete a field simply delete its code from the form.

To add a field just click on any of the available tags to insert the code into your form section. A popup will open so you can confirm relevant information before inserting it.

You can generate tags for text, email, URL, phone, number, date, text area, drop-down menu, checkboxes, radio buttons, acceptance (e.g. terms), quiz, file upload, and submit button.

Mail Settings

This is where you can make changes to the email you receive when users submit contact forms. By default the plugin will use your site admin’s email address, but you can easily change this to a support email or multiple email addresses.

Also, if you choose to add custom tags to your form be sure to add the shortcode chunk generated into the Message body. If you don’t paste in that bit of code you won’t receive the answers users submit for that field.

The Mail 2 option allows you to create an autoresponder that lets a user know their message has been received. Or it can be used if you’d like to send a different email to different recipients. Maybe you want to receive emails with the full contact form information included, but you only want your support staff to receive emails with one or two fields. There are multiple ways you can utilize this feature.

Messages Settings

Edit the messages displayed to users for a variety of completed (or incomplete) tasks. You can create customized messages for events such as a successful contact submission, validation errors, incorrect formatting and more.

Additional Settings

The last tab for Additional Settings allows you to enable various built-in options for subscribers only, demo mode (so no emails are actually sent), acceptance validation, message storing options and more. You can view more Contact Form 7 additional settings in their documentation.

Once you’re done editing make sure to save your changes.

Using Your Form

With your contact form done and ready to use you can copy the form shortcode  to insert into a page, post, widget area etc. The shortcode can be found at the top of the contact form creation page just below the form title once you save (it’s highlighted). It should look something like this:

[contact-form-7 404 "Not Found"]

Or if you are using a page builder like WPBakery or Elementor, you can simply use the related Contact Form 7 builder module to select and insert your form on a page.

Contact Form 7 Advanced Tips

Now if you want, you can get really fancy with Contact Form 7 with just a tiny bit of custom code. Here are a few of my favorite tricks that you can use to create an impressive contact form for your website.

Place Holder Text

Maybe you don’t want headings on your forms fields, or maybe you’d like to add text to demonstrate to users what they should be entering in a particular field. Adding a placeholder is easy, just remove the labels from your fields, then add your preferred text with quotes to the end of your code within the square brackets like so:

[text* your-name "Your Name"]

Full-Width Entry Fields

I personally don’t love how the default text fields are so short. There are two ways to change the width of a text field. The cheater way is to simply add the character length width you want to the code for that field in the form section. So if you want a full-width field with room for 300 characters, add 300 followed by a backslash like so:

[text* your-name 300/ "Your Name"]

If you want to do it the right way, you’ll need to add the following code to your CSS stylesheet:

input.wpcf7-text { width: 100%; }

But this will effect ALL the Contact Form 7 text fields on your entire WordPress installation.

If you are using the WPBakery page builder you have the option to work around this and target a specific row on a specific post or page so only one isolate contact form is style. First click on the the row and add a custom Row ID. Then save.

Next click on the gear icon just above the main content area of your post or page and type #YOUR-ROW-ID followed by the CSS code mentioned above.

Side-by-Side Entry Fields

Another neat trick is to add your fields side by side. I think this keeps the contact form super clean and professional. To do this with the Total WordPress Theme we’ve made it easy for you and added a custom class. Just add in class=”one-half” to your p tags like so:

<p class="one-half first">[text* your-name "Your Name"]</p>

<p class="one-half">[email* your-email "Your Email"]</p>

<p>[textarea your-message]</p>

<p>[submit "Submit Form"]</p>

Note: This tip is specifically for Total theme users, but other themes may have similar form styling built-in.

Fancy Email Tags

Sometimes you need more information than the user submits. This is where Contact Form 7’s special email tags come in handy. With these, you can add email time stamps, submission IP address, the ID or title for the post containing the contact form and more. All these tools can help you keep your form submissions organized.

Learn More About Contact Form 7

For more tips on using Contact Form 7 please reference their documentation. Here you will find detailed explanations of the various tags and what they are capable of, useful tips from the plugin authors, and helpful articles on troubleshooting if for some reason the plugin isn’t working for you.

Contact Form 7 is one of the best free plugins available, and it’s one of the best options for creating contact forms on any WordPress website. Hopefully, this guide was helpful, but if you have any questions or want to share your thoughts on Contact Form 7 please leave us a comment below!