If you typically spend 30 minutes or more creating forms on WordPress sites, you are going to love Forminator’s exciting new feature … Preset and Cloud Templates! Oh, and did we also mention that you can now easily add star ratings to your forms too?
Save time creating forms with Forminator’s Preset and Cloud Templates.
Forminator now lets you easily create professional forms to suit all kinds of purposes in just a few clicks.
Simply select the type of form you’d like to create from the template gallery, customize it to suit your needs, copy and paste the shortcode where you would like to display your form, and voilá — the task is done … next!
In this short and practical tutorial, we’ll cover the following:
From Forminator v. 1.32 onward, you can easily create forms for different purposes using 27 pre-designed templates (more templates coming soon!).
You can also create custom form templates, save it to the cloud, and reuse these on any site that you manage via the Hub.
The Template Gallery
To access Forminator’s templates, click on the new Templates submenu in the plugin’s menu.
Forminator has a new Templates submenu.
This brings you to the Templates section, where you can preview all templates, create new forms using any selected template, and create, save, and manage your own custom Cloud templates.
Browse all of Forminator’s preset templates in the Templates section.
In addition to viewing and selecting templates, you can use the section’s tabs, search, and filter features to quickly locate a form template and speed up the form creation process.
The Templates section is divided into two main sections:
Preset Templates: Here, you’ll find a well-organized collection of predesigned templates created by WPMU DEV’s Forminator team. You can filter the templates by clicking on any Category name or explore the entire range. Additionally, the smart Search field allows you to find templates quickly.
Cloud Templates: In this section, you will find all the custom templates you’ve created from forms across all sites linked to your Hub. These templates can be used to build forms on the same site or any other site connected to your Hub.
Use the tabs, search, and filter features to select templates and speed up form creation.
Blank – Use this template to create a form from scratch without any pre-set fields.
Contact Form – Use this template to collect user information such as name, email, subject, and message.
Quote Request – Customers can use a form created with this template to ask for quotes on products or services.
Newsletter Signup – Users can subscribe to newsletters using a form created with this template.
Registration – Use this versatile template to create registration forms suitable for events, services, or websites.
Login – Use this template to create a typical login form for returning users with fields for username or email and password, along with links for account recovery or registration.
Create Post – Use this template to easily create frontend forms tailored for user-generated content submissions, with fields for title, content, and attachments.
As well as the basic templates listed above, Forminator Pro includes many other useful preset templates, such as:
Event Registration Template
Customer Feedback Form
Appointment Booking Form
Order Form for Small Businesses
Job Application Form
Volunteer Sign-up Form
Course Enrollment Form
Real Estate Inquiry Form
Medical History Form
Restaurant Reservation Form
Donation Form
Travel Booking Form
Return Merchandise Authorization (RMA) Form
Customer Complaint Form
Course Evaluation Form
RSVP Form
Conference Registration Form
Event Feedback Form
Home Service Request Form
Fitness Class Registration Form
How to Create A Form Using a Template
As mentioned earlier, creating a form with Forminator using templates is really simple, easy, and fast.
For this example, let’s create a Quote Request form.
Head over to Forminator’s Templates section and locate the Quote Request template in the Preset Templates tab.
Let’s create a quote request form using Forminator’s templates.
Hovering over the template item brings up options to preview the template or create a form using the template.
Hover over the template to preview or create a form.
If you choose to preview the template, a full-size preview will load on your web browser, allowing you to see exactly what your form will look like.
Here’s a preview of what our Quote Request form will look like.
Click on the Create Form button to create your form.
Click the Create Form button to create and edit your form.
This will load the template into Forminator’s Edit Form screen.
From here, you can simply customize the template’s fields, appearance, behavior, etc. as you would when creating any other form.
Additionally, if you have Forminator Pro installed, you can easily integrate your quote request form (and all other forms for that matter) with Forminator’s PDF Addon, and all the plugin’s other add-ons and services.
Edit your template or use the default template to create your new form … easy!
If you need help editing, customizing, or publishing forms, check out these great Forminator tutorials:
When you’re done editing your form, save it as a draft or publish it to generate the form’s shortcode.
Your form’s now ready to publish!
After creating the form, it will be listed in your Forminator Forms section with all other forms you have created for that site. Go here to edit the form, view stats and submissions, etc.
Manage your new form in Forminator’s dashboard.
Note: You can also access the Template gallery by clicking on the +Create button in Forminator’s Forms menu or in the plugin’s main dashboard.
Clicking on the +Create button is another quick way to bring up Forminator’s templates.
This will bring up a popup modal, allowing you to easily filter, search, and select any of the templates available in the Preset or Cloud template sections.
Select a present or custom template from the pop-up modal to create your new form.
For more information on using templates, see the Forminator Templates documentation section.
Saving Your Own Templates
Forminator not only lets you create forms from preset templates, but you can also create and save any Forminator form as a custom cloud template that can be used on any site that you have connected to your Hub.
To save a form as a cloud template, simply click the Save to Cloud button at the top of the Edit Form screen.
Click the button to save your template.
You will be given the choice of either saving your form as a new template or overwriting an existing one.
To save your form as a new template, select New Template, give your form a name, and click the Save Template button.
Save your form as a new template or overwrite an existing one.
All of your saved templates will be listed in Forminator’s Templates section under the Cloud Templates tab.
View saved templates in the Cloud Templates section.
Creating a form using a custom template across all of your different managed WordPress sites is a simple one-click option that serves as an alternative to exporting a form from one site and importing it to another via the Import/Export feature.
Creating forms from saved custom templates across different sites is easier than using the import/export feature.
Preset and Cloud Form Templates isn’t the only exciting new feature of Forminator.
Let’s look at what else is new in Forminator from version 1.32 onward.
Rating Field
You can now add ratings to your forms using Forminator’s new Rating field.
Meet Forminator’s newest star … Rating field!
This is a great way to allow users to submit reviews and feedback on your site about your products, services, ideas, etc.
For example, here is a front-end form you can add to your site using the Create Post template with the Rating field added that will allow a site owner to collect user-generated submissions.
Use the Rating field to collect user reviews on your site.
The Rating field also offers a great deal of customization options under the Settings tab.
This includes specifying a ratings value (from 0 – 50), and adjusting the style and size of the icons, including using different icons (stars, hearts, thumbs, or smiles), different icon sizes (small, medium, and large), and whether or not to display a suffix alongside the ratings (e.g. 3/5).
Forminator’s Rating field offers many customization settings.
For more information on how to use the Rating field and configure its settings, see the Rating Field documentation section.
Select Field – New Multi-Select Style
We’ve also improved Forminator’s Select field.
Forminator’s Select field is now improved.
It now supports modern multi-selection styles and tags, allowing you to provide form users with a better experience.
Improve user experience with the Modern Multi Select style option for the Select field.
With the Modern style set, users can easily add and delete selected items from a dropdown menu into forms as tags.
Selected items display in forms as tags.
For more information on how to use the Multi-Select field and configure its settings, see the Multi Select Style documentation section.
Create Even Faster Forms with Forminator
So, there you have it!
WPMU DEV’s All-in-one WordPress platform is all about helping agencies and web developers grow their business. We not only offer one-click site templates to save time, increase production, and speed up the WordPress site creation process, but we now also have one-click form templates to speed up the process of creating all kinds of forms on all your WordPress sites.
If you have Forminator installed on your site, give the new preset and cloud templates a try (and don’t forget to try out the new Rating field and Multi Select style in the Select field).
If you are a WPMU DEV member, Forminator Pro offers many more templates (and more are coming soon!)
Looking to create an online portfolio website in WordPress?
The freelance market has grown rapidly. Resumes and LinkedIn profiles are important, but to beat out the opposition, you’ll need a portfolio website to showcase your best work and land more clients.
In this article, we will show you how to easily create an online portfolio website in WordPress, step by step.
Why Do You Need an Online Portfolio Website?
Think of your online portfolio website as your digital business card.
Portfolios are assets for everyone, including freelancers, job seekers, and small businesses.
While you may think a portfolio is only for artists or creatives, that’s simply not true. They work for any profession, whether you’re a graphic designer, writer, or developer.
It’s a chance to put your best foot forward in your industry. In a nutshell, your website portfolio helps you to stand out from the crowd and build trust. When you design a professional portfolio website, you instantly gain credibility and show off your experience.
Plus, you can optimize your site for search engines based on specific keywords so that more people can find you.
How to Create an Online Portfolio Website in WordPress with SeedProd
You don’t need to learn how to code or write HTML to build your portfolio site. Simply follow our step by step instructions, and you’ll have your website up and running in minutes.
1. Choose a WordPress Host
To start with, you’ll need a domain name and web host. The web host stores your website files and is your site’s home on the internet.
A good web host should be scalable enough to handle demanding sites, offer support in case anything goes wrong, take web security seriously, and have features to keep you safe.
Hostinger is the best choice for small businesses that want affordable, beginner-friendly hosting.
Fortunately, Hostinger has agreed to offer our readers a free domain name and up to 78% off on WordPress hosting. You can get started for just $2.69 per month.
To get set up with Hostinger in a few minutes, simply click this button:
If you need help signing up for Hostinger, check out our post on how to get a free domain name, where you find a step by step tutorial.
Once you’ve registered and set up your hosting plan, you can just go into your dashboard and select the ‘Domains’ tab.
From there, you’ll need to enter a new domain name.
You’ll be prompted to create a new website or migrate an existing website.
For the sake of this tutorial, you can click the ‘Skip, create an empty website.’
Next, click on the ‘Select’ button under ‘Claim a Free Domain.’
You can simply enter the domain name that you want to use for your portfolio website.
If you need help deciding on a domain name, WPBeginner offers a free business name generator to help you find a company name that is easy to read and promote online.
Of course, if you’re creating a personal portfolio, the easiest thing to do would be to use your first and last name as a domain name. If it’s taken, you can add your profession along with your first name.
For example, if johndoe.com is taken, you might find johndoephotography.com or janedoewriter.com.
Ideally, you should stick to a .com domain extension since it’s the most recognizable and trustworthy for small businesses.
2. Install WordPress
One of the most common mistakes most beginners make is choosing the wrong website platform. Many freelancers or small business owners gravitate towards Squarespace or Wix.
While those are easy to use, they lack tons of functionality, customization, and control.
Using a content management system like WordPress gives you much more flexibility with thousands of designs and addons for your portfolio site. WordPress is free, open-source, and has thousands of pre-built extensions and website designs.
With the right WordPress plugins and themes, you’ll also get the same drag-and-drop builder that makes platforms like Squarespace or Wix so easy to use.
Next, in your Hostinger dashboard, click on the ‘Admin Panel’ button with the WordPress logo to go to your WordPress website’s dashboard.
You can also go to yoursite.com/wp-admin directly in your browser.
3. Choose a Portfolio Theme
Once you have your WordPress set up, you’re ready to customize your website design by choosing a theme and creating new pages.
For this tutorial, we’ll be using SeedProd to create a theme specifically for portfolio websites.
SeedProd is the best WordPress page builder on the market. It lets you quickly and easily create any type of page without writing a single line of code.
Whether you want to make a portfolio website to land potential clients, start a WordPress blog, or an online store, SeedProd is a one-stop solution that gives you templates tailored to your needs.
You’ll want to install and activate the SeedProd plugin. For more help, see our in-depth guide on how to install a WordPress plugin.
Upon installation, you’ll be prompted to complete the setup wizard. You can click ‘Get Started’ and just follow along the step by step instructions so that SeedProd can configure the plugin to best suit your needs.
When you’ve completed the setup wizard, head over to SeedProd ≫ Settings and enter your license key. You can find your license key under your accounts page on the SeedProd website.
After entering the information, click on the ‘Verify Key’ button.
You will now have access to all of SeedProd’s features.
4. Build Your Portfolio Landing Page
Next, go to SeedProd ≫ Theme Builder.
From there, select the orange button that says ‘Theme Template Kits.’
You’ll land on a page with a searchable library of WordPress themes to choose from. Type in ‘portfolio’ in the search bar and select the theme template that best fits your website idea.
Also, you may want to search other keywords if you’re in a specific niche. For example, if you are a realtor, you can find real estate WordPress themes on SeedProd.
We’ll be choosing the ‘Freelance Portfolio’ theme, but feel free to pick any theme that fits your needs.
We’ll be creating a one-page portfolio site, where your portfolio page is on the Homepage of your website. This lets you have your portfolio site up and running fast without the hassle of designing multiple pages.
In the WordPress dashboard, head over to Settings ≫ Reading. Next to the Homepage, select the ‘Portfolio’ dropdown to make your portfolio page your Homepage.
Then head back to SeedProd ≫ Theme Builder, and you’ll see a list of all the pages within the theme.
Scroll down and hover over the ‘Portfolio’ page. Then click on ‘Edit Design.’
5. Edit the Portfolio Website
Now it’s time to edit the content and make it your own. You’ll be sent to SeedProd’s visual, drag-and-drop page builder. There are plenty of Standard and Advanced widgets to choose from, such as a headline, text, list, header, featured image, and so on.
Simply drag the widget you want and move it to the exact location you want that element.
You can also customize the background to your liking by choosing a solid color, gradient color, or background image.
Just click on the outer layer box, and under ‘Content’ in the sidebar menu, you’ll see options to customize your background.
If you need help working with the SeedProd interface, you can watch our SeedProd video tutorials.
When editing the contents of your main portfolio page, there are several key components you want to include, such as:
Strong Call to Action (CTA): Portfolio sites should have a clear call to action to allow visitors to hire or get in touch with you. The CTA button should be placed both above the fold and at the bottom of your page.
Just find the ‘Button’ box in the left-hand menu and drag it to your page on the right.
When editing any element, you must click on the specific element or area you want to customize.
Then, the options for that block appear to the left. As you can see below, the Content tab lets you edit the button text and link it to your contact page or even to an embedded form lower in this same page.
The ‘Templates’ tab lets you choose the button style, and the Advanced tab lets you change the padding, fonts, and more.
Services you offer: Visitors want to know what you offer so they can be sure you can do what they’re looking for. For instance, as a WordPress developer, do you code custom plugins, offer website customizations, or build websites from scratch?
To create a services section, just add a Column widget and insert an Icon Box for each service we offer.
Then, you can customize the text and icons as needed by clicking on the element and using the sidebar.
About Me section: Potential customers and clients also want to know more about your background and experience. This is a chance to build a connection with people and showcase why you’re passionate about what you do.
To create an About Me section, all you need to do is add the ‘Image Box’ widget to the page. Then, add a portrait photo of yourself and write a description that tells people more about you.
If you are creating a portfolio for a business or brand, you could use your custom logo here instead.
Testimonials: Providing testimonials from previous clients helps to build trust, especially if you’ve worked with reputable brands. Seeing that other people are satisfied with your work gives others the confidence that you can also do a great job.
Simply add the Testimonials widget to your page. Then, you can add a photo of the client and edit their name and testimonial. If you want to add more reviews, click on the ‘Duplicate’ icon next to the person’s name.
6. Add a Gallery to Showcase Examples of your Work
Creating a portfolio website gives you a chance to showcase all of the awesome work you’ve done. When potential clients see what you can do, they’ll trust that you’re the right person for the job.
To do that, we’ll be using Envira Gallery, which is the best WordPress gallery plugin. While you can use the ‘Advanced Gallery’ widget on SeedProd, Envira Gallery gives you more functionality.
For example, it comes with Lightbox images, meaning when someone clicks on a photo, it automatically displays the full dimensions without needing to crop or resize them. You can even add slideshows and organize your galleries into albums to better categorize your work.
First, install and activate the Envira Gallery plugin. You can follow our guide on how to install a WordPress plugin for detailed instructions.
Head over to Envira Gallery ≫ Add New in the WordPress dashboard. Then, name your gallery in the title bar. From there, click ‘Search Files from Your Computer’ to add images of your portfolio projects.
Once you’ve uploaded the portfolio items, scroll down and select the ‘Config’ tab.
Here, you can change the number of gallery columns you want to display. Setting it to ‘Automatic’ will set the number of images to automatically fill each row.
If you want to change the image sizes, scroll down in the ‘Config’ tab and find the Image Size option.
Select the size that best showcases your portfolio items.
You can also adjust the Lightbox image size so that it displays the original size image when someone clicks on the picture.
Go to the ‘Lightbox’ tab and adjust the Image Size to ‘Original Image.’
Scroll up to the top of the page and hit ‘Publish.’ Underneath the publish button, you’ll see a shortcode.
Copy the shortcode so that we can add the gallery to our WordPress portfolio page.
Go back to your portfolio page in SeedProd. Drag and drop the Shortcode block anywhere you’d like on the page.
Then, simply paste the shortcode into the ‘Shortcode’ box in the sidebar menu.
If you want to preview the shortcode, click on the ‘Preview’ button on the top right corner of the page.
This will show you what the entire page looks like.
Here, you should be able to see that your Envira Gallery is embedded in your portfolio site.
With the lightbox feature from Envira Gallery, you can click on each item to see the full image.
7. Add a Contact Form
Now that you’ve reeled in your potential clients, it’s time to get them to contact you. Sure, you can just drop an email in there, but contact forms let them send you a message directly without opening up their email app.
The best way to create a simple and professional contact form is with WPForms.
To learn how to create a simple contact form for your website so that potential clients can contact you, just follow our step-by-step tutorial on how to create a contact form in WordPress.
Once you’ve completed your form, go back to your portfolio page. You can use the ‘Contact Form’ widget to add a form from WPForms. Under ‘Select a Form,’ choose the one you’ve created.
8. Make It Live
If everything looks good, you’re ready to launch your website.
All you have to do is click the arrow under the green ‘Save’ button on the top right corner. Then click ‘Publish.’
Go ahead and check the live site.
Everything should appear, including the portfolio gallery, buttons, and contact form.
Once you have a professional-looking portfolio website made, you’re ready to start sending more traffic to your site or nurture interested prospects.
Are you looking for the best 404 error page design examples?
The right 404 page will keep visitors on your site for longer and encourage them to convert. By creating an engaging, helpful, and entertaining 404 page, you can give visitors a great experience, even when they see an error.
In this article, we’re sharing some of the best 404 error page designs.
Why You Need to Optimize Your 404 Design
A 404 error happens when the server can’t reach the page someone is trying to visit. Instead of showing them a blank screen, the server displays a 404 page instead.
Most WordPress themes come with a basic 404 template, but these designs are usually basic and simple.
They also won’t show any content from your website, such as popular posts that the visitor may want to read, or your site’s navigation menu.
If you show visitors a boring, unhelpful 404 page then they’re more likely to leave your WordPress website, which will increase your bounce rate and hurt your WordPress SEO.
With that in mind, it’s smart to create a custom 404 page that has your own branding and content. You can also help visitors find what they’re looking for by adding search bars, menus, links, and other helpful content.
The easiest way to create a custom 404 design is by using the SeedProdplugin. It is the most popular drag and drop landing page builder, so you can create a custom 404 page without writing any code.
SeedProd also has lots of professionally-designed 404 templates to help you create a beautiful error page, fast.
Once you’ve installed SeedProd, it’s a good idea to turn to your competitors for inspiration. With that in mind, we’ve collected the best 404 error page designs for you to look at.
1. DFY
Many websites use countdown timers to create a sense of urgency and get more conversions using FOMO. However, DFY had made the unusual decision to add a countdown timer to their 404 page.
This timer counts down the seconds until the visitor is automatically redirected to the homepage. By creating a time limit, DFY immediately makes their 404 page more engaging and pushes visitors to make a decision before time runs out. It’s also an unusual design choice, so it’s guaranteed to grab the visitor’s attention.
The 404 page’s messaging adds to this sense of urgency, making this a very dramatic and compelling page design.
Unsurprisingly, OptinMonster uses their 404 page as a lead generation tool with an eye-catching animation and clear call to action.
Even better, their pitch relates to the visitor’s situation.
When someone lands on a 404 page, there’s a big chance they’ll give up and abandon your website, since they can’t find what they’re looking for.
OptinMonster’s pitch plays into this, by asking: ‘Did you know that over 70% of visitors who abandon your website will never return?’
Since the visitor is already thinking about website abandonment, they’re more likely to act on this statistic. The call to action then offers visitors a free ebook that promises to convert abandoning website visitors into subscribers.
Clicking on the ‘Download Now’ button opens a popup where the person can type in their email address and get their free download.
As we can see, OptinMonster uses the 404 error to their advantage by creating a pitch that feels very relevant and timely.
If you want to use your own 404 page for lead generation, then you can collect email addresses using SeedProd’s Giveaway, Contact Form, and Optin Form blocks.
Kualo have taken this one step further and gamified their 404 page.
Instead of helping visitors find their way back to the main Kualo website, the 404 page challenges them to a space invaders game.
This turns a frustrating error message into a fun surprise.
Even better, when you run out of lives Kualo gives you an incentive to carry on playing.
The popup offers players a discount on hosting if they manage to score over 1000 points. This is a perfect example of a 404 page that keeps visitors on your website for longer, and adds value to the user experience.
4. TripAdvisor
TripAdvisor’s 404 page is fun and functional, and opens with a joke that’s specific to the travel industry.
When someone lands on your 404 page, they may be frustrated with their experience. Humor can be a great way to re-engage these people.
Even better, the jokes always tie into the TripAdvisor brand.
Branding is one of the major benefits of replacing the standard WordPress 404 page with a custom design, and TripAdvisor’s page shows that branding isn’t just custom logos and images. The words on your 404 page are just as important as the graphics.
The 404 page also highlights all the major areas of the TripAdvisor website, which helps visitors find what they’re looking for.
Since navigation is so important, we recommend looking at SeedProd’s Nav Menu block as it lets you build all kinds of menus directly inside the page editor.
5. Brett Terpstra
At first glance, Brett Terpstra’s 404 page may look basic but the real power lies in its list of suggested posts.
Brett Terpstra’s 404 page shows a list of posts containing keywords related to the link the visitor was trying to access when they got the 404 error.
It’s a simple trick that adds a lot to the visitor experience.
Personalized content can make your site more useful, engaging, and appealing so it makes sense to extend this to your 404 page.
Constant Contact is another 404 page that uses humor to win over frustrated visitors. The email service provider uses informal language to appeal to their target audience, while also giving visitors an easy route back to the homepage.
If you scroll down the page, then you’ll find links to some other important areas of the Constant Contact website.
However, what we really like is the short hover animation that plays every time you move the mouse over one of the blue blocks.
Animation can make a page more engaging, and the multiple hover animations creates a storytelling element as the visitor moves around the 404 page.
There are a few different ways to animate your 404 page, including highlighting and rotating your text using the SeedProd Animated Headline block. For more information, please see our guide on how to add CSS animations in WordPress.
7. IMDB
Most people will encounter your 404 page when looking for something else entirely. Since the 404 error is unexpected, it’s important to reassure visitors that they’re still on your site by maintaining brand familiarity.
IMDB do this in a very subtle and light-hearted way, by showing a famous quote from a movie or TV show.
They also include a link to learn more about the TV show or movie that they’re quoting.
In this way, IMDB’s 404 page reinforces their brand while also giving visitors a fun way to explore their content.
Showing random quotes on your 404 page can be fun and engaging. However, it’s still a good idea to provide links to your site’s most important content, just in case the visitor isn’t interested in the link that you’ve chosen at random.
IMDB shows this doesn’t have to be complicated, by including a link to their homepage.
8. Steve Madden
Steve Madden tries to turn an error message into sales by showing their best selling products on the 404 page.
Even better, they’ve added filters so customers can browse the different products directly from the 404 page.
If you run an online store, then you can easily display your most popular products, products that are on sale, your newest products, and more. Simply add the ‘Best Selling Products’ block to your 404 page and SeedProd will find these products and then add them to your 404 page automatically.
When designing your own 404 page, it’s a good idea to use the same header and footer as the rest of your website. This will reinforce your branding and stop visitors from wondering whether they’re in the right place.
This is exactly what we see with Steve Madden’s 404 page, but we particularly like how much content they manage to fit into these two small areas.
The header and footer helps visitors jump straight to any part of the Steve Madden store, or even third-party sites such as the company’s Twitter and Facebook page.
This 404 design from Apartment Therapy immediately catches the visitor’s attention with a big hero image.
Apartment Therapy also uses this space to reinforce their brand identity, by showing a stylish photo of a kitchen along with a joke about washi tape.
If you want to add a hero image to your design, then SeedProd has lots of ready-made hero sections. These are collections of images, call to actions, and even simple lead collection forms that you can add to your 404 design with a click of a button.
There’s even a section that would look right at home on the Apartment Therapy website.
10. Screaming Frog
Similar to some of the other 404 pages on this list, Screaming Frog uses humor to try and engage with visitors.
However, unlike the other businesses on this list, Screaming Frog creates a tool that helps website owners find and fix broken links. Their 404 page wastes no time pointing out the irony of the Screaming Frog website having a broken URL.
By poking fun at themselves, Screaming Frog delivers a memorable 404 page that doesn’t take itself too seriously.
The animated background also helps this 404 design stand out from the crowd.
Videos and animations are a great way to make your 404 page more engaging. However, they can add to the 404 page’s loading times so we recommend following our tips to speed up WordPress performance, particularly if you’re using lots of large or high-resolution videos in your 404 design.
11. MonsterInsights
MonsterInsights is the best WordPress plugin for Google Analytics. It allows you to easily install Google analytics in WordPress and shows helpful reports in the WordPress dashboard.
The MonsterInsights is a good example of a branded page. As soon as visitors arrive on this page, they’ll see a unique graphic based on the MonsterInsights logo.
This is a fun way to let visitors know that they’re still on the MonsterInsights website, even if they’ve followed a broken link.
This page also explains what a 404 error is and suggests some things the visitor can do to fix the error. Helping people solve the 404 error themselves can improve the visitor experience, so it’s a good idea to include this information on your own 404 page.
Even if you encourage visitors to fix the problem themselves, it’s still important to include links to your site’s most important content. The MonsterInsights 404 page gives people a few options by including links to the support page, the MonsterInsights documentation, and the pricing page.
12. MAD
MAD has created a simple but highly interactive page by using toggles to create a 404 error message. You can remove this message by turning all the toggles off, or even create your own message by activating the toggles.
It’s a very straightforward but enjoyable experience that’s designed to get lots of interaction from visitors. It’s also a very unique 404 page that visitors will remember, and perhaps even share with other people.
This striking design proves that you can build a memorable and entertaining 404 page from a simple idea.
13. Southwest
Southwest’s 404 page tries to help visitors get back on track by explaining what a 404 is and why they may be seeing the error. They even suggest some possible fixes, which might be helpful if your target audience isn’t very familiar with 404 errors.
Where this design really stands out is the sheer number of links it manages to display and how neatly these URLs are organized.
If you scroll to the bottom of the screen, then you’ll notice social media links, contact information, a link to join their email list, and dozens of other links all arranged in clear and user-friendly categories.
The Southwest 404 page is a great example of how much information you can pack into a page without overwhelming the visitor.
Here, the right layout is key and Southwest does a great job of using categories, lists, and different sections to create a 404 page that’s information-packed but still easy to read.
We hope this article has helped you find the best 404 error page design examples. You may also want to check out our guide on the best WordPress page builder plugins and our comparison of best email marketing services to turn potential leads into paying customers.
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.
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 is a fantastic free plugin for adding contact forms to a WordPress site. But despite its ease of use and reliability, it’s missing a lot of features out-of-the-box.
I recently showed how you can style Contact Form 7 with the help of plugins. In this post, I’ll show you how to extend Contact Form 7 even further to do the following:
Add conditional logic to your form
Add dynamic values to your form fields
Save contact form submissions to the WordPress database
Send out a PDF generated from your form
Protect your form from spammers
Sell simple products without an eCommerce solution
All the plugins mentioned throughout this post are free to download from WordPress.org.
Let’s get started.
Tip: if you’re a WPMU DEV member, you can use our very own Forminator plugin as an alternative to Contact Form 7.
7 Useful Plugins for Adding Features to Contact Form 7
Contact Form 7 Conditional Fields brings conditional logic to your contact form. Form fields can be set to appear only when the user has given a particular response.
For this example, I created a question for a company contact form that collects some useful marketing information by asking the user how they heard about the company.
There are 5 options for that question:
Word of mouth
Search engine
Email
Social media
Other
These options are added as radio buttons. My radio button group was named where.
When the “Other” option is chosen, it should show a text field for the visitor to add the other method that they discovered us. I named this text field where-other.
But this field should only show if the Other option is selected, so it’s wrapped in a conditional field group which uses the shortcode [group other][/group]. My conditional field group is called other-input.
To set the display condition go to Conditional fields and create a rule.
A conditional rule: If where equals Other then show other-input
Here is the final contact form code for the radio button group and text field:
The [other-input]What other place? [where-other][/other-input] line will only show the [where-other] content when it’s been completed.
It’s also good practice to check the Exclude lines with blank mail-tags from output option. This stops any incomplete fields from being output in the email text.
2. HubSpot
HubSpot’s WordPress plugin will collect all of your Contact Form 7 submissions and organize them into a free CRM. This allows you to see all the pages your contacts have viewed, live chat with them while they are on your site, and send marketing emails to them, all for free.
HubSpot makes it really easy to manage all of your contacts and segment them into lists. All their information is captured into a tidy timeline so you can truly understand the people behind the forms.
With HubSpot’s plugin, you can save up to 1,000,000 detailed contact and company records, and send up to 2,000 automated emails for free.
3. Redirection for Contact Form 7
With the Redirection for Contact Form 7 by Qube One, you can redirect to any page you choose. You can also fire scripts after submission, save submissions in the database, and more:
Redirect to any URL
Open page in a new tab
Run JavaScript after form submission (great for conversion management)
Pass fields from the form as URL query parameters
Add Honeypot to minimize spam
Save form submissions to your database
Actions are simple to use. Choose the form you want, and go to editing mode. Select the Actions tab, and choose from the options in the dropdown menu.
Creating an Action in Redirection for Contact Form 7 plugin.
For Redirect, after selecting it from the Choose Action dropdown menu, you’ll see it listed in the Actions panel, with the title New Action. Click on that to open it, then name your rule, select the URL redirect (custom or a page), and toggle any desired options in the settings page. Make sure to click the Save button when you’re done.
The Redirect action you create is enabled by default.
There is also a pro version, which adds quite a few additional features, along with associated fees. Some of these are: Conditional Logic of Actions, Hubspot Integration, Subscription to MailChimp, and Collect Payments (Stripe and PayPal). You can buy these individually, or as an Action Bundle.
Redirection for Contact Form 7 offers free trials of their pro features.
The plugin allows easy free trial for many of the pro features from within its WordPress dashboard.
4. Contact Form Submissions
Contact Form Submissions saves all Contact Form 7 submissions to the database and allows you to export them to a CSV file as well.
This is a useful plugin, but be sure that you have good reason to collect and keep form data before using it. This applies especially if you are gathering personal data such as names and email addresses. Make sure you have a robust data protection policy and delete the data after it is no longer needed.
The plugin creates a new menu item called Submissions under Contact Form 7 where you will find your form entries.
Contact Form 7 Submissions
Submissions are for all forms with the newest at the top. They can be reordered by date, but not by form.
If you use the Mail(2) setting to create an autoresponder when someone submits a form, these entries will also be shown in your submissions. Each shows below the email sent to you.
First, select the form you want to send the PDF with from the dropdown.
You now have quite a number of options:
Email a PDF to the sender, recipient or both.
Email a CSV file to the sender, recipient or both.
Name the PDF file. You can include form tags in the name such as [name]. It’s a good idea to make the filenames unique.
Choose whether files will be saved on the web server or deleted after sending. (Think about data protection!) Saved files go to / wp-content / uploads / * YEAR * / * MONTH * / You can change the destination folder.
Redirect the user to a new page after the contact form is submitted.
Add a link to download the PDF.
Password protect your PDF file.
Add an image header to your PDF.
Add tags such as date, time and page number to the footer.
Personalize your PDF layout, including the form tags. You can include files uploaded by users if you have enabled file upload on your form.
Here’s an example.
When submitted, this form sends a booking confirmation PDF for a workshop
In my contact form, I’ve made use of hidden dynamic fields from the Contact Form 7 – Dynamic Text Extension plugin. I also embedded a Google map.
To email a PDF to the person making the booking, you must have the Mail(2) autoresponder for the form enabled. The PDF is attached to the confirmation email.
Otherwise, enable the PDF download link when the form is submitted.
A booking confirmation PDF file
6. Contact Form 7 Honeypot
Problems with spammers? Then Contact Form 7 Honeypot is for you. It deters spammers without annoying users with fiddly CAPTCHAs or quiz questions.
The plugin creates a new [honeypot] tag.
The honeypot tag generation dialog recommends renaming the form tag from honeypot and not disabling the accessibility message
When the tag is added to the form it creates an invisible text field which is intended to be left blank. If the field is completed, the form submission is flagged up as spam.
The code for the hidden field created by Contact Form 7 Honeypot
Should the contact form be inspected or viewed without style, the invisible field shows a “Please leave this field empty.” message.
There are filter functions available to customize this message and the HTML and CSS of the honeypot.
7. Contact Form 7 – PayPal Add-on
Do you have a single product to sell and don’t want the hassle of setting up a full-blown eCommerce store? Then Contact Form 7 – PayPal Add-on may be for you.
The plugin integrates with your form to send the user to PayPal to make a payment.
Set your PayPal general settings at Contact > PayPal Settings. You will need to add your language and currency, add a PayPal account ID and choose between Sandbox or Live mode. Test your form in Sandbox mode before making it live.
I chose an example of a form for preordering an ebook which would be delivered on a future date.
Here’s what the order form looks like on the front-end:
Order form for an ebook linked to PayPal
To enable PayPal on the contact form check the box on the PayPal tab for that form. Enter the product information, which will be passed to PayPal.
Enable PayPal on a form and set item description, price and item ID
When the user submits the form, two things happen:
An email is sent to the person ordering the product.
The person is sent to PayPal to pay for the item.
1. Sending the email
The wording of the email sent has to be careful, as the order isn’t confirmed until payment is made. The user might navigate away from the payment screen or cancel the order.
Here is the wording I came up with to be sent to the person who preorders:
Thanks for your interest in [productname], [your-name], <[your-email]>.
Your order is not confirmed until you have paid by PayPal.
When payment is confirmed, your order of [productname], ID [productid] costing [price] will be sent out after publication on September 30, 2017.
Again I used dynamic hidden fields from the Contact Form 7 – Dynamic Text Extension plugin.
2. Sending the user to PayPal to pay
This happens automatically when the form is submitted successfully.
The sequence is:
The customer is prompted to log in if they are not logged in already.
The customer reviews their order.
The customer pays for the order and gets a payment confirmation screen and email.
PayPal Checkout – Payment complete
On the Settings page, the plugin allows you to set a redirect URL in case of cancellation, as well as one for making a successful payment.
As you’ve just seen, Contact Form 7 isn’t just a mere contact form. It can be enhanced to do quite a bit more, from adding dynamic data to logging entries to taking online orders.
Hopefully, you’ve picked up some tips in this post to extend your own implementation of Contact Form 7 on your site.
Page builders have revolutionized the website building process. As is the case with many other WordPress tools, the number of available options can make it difficult to find the best one for your particular needs.
With BeTheme’s exciting new page builder, your quest may be at an end.
See for yourself how the new Muffin Live Builder tool provides you and other web designers with a more intuitive and faster way to create superior websites for clients:
You have more than likely come across various live editing features in other page builders. But nothing like the way in which they have been placed at your fingertips in this live builder. And in a way that will transform your website building workflows and processes.
Let’s check out five of them.
Muffin page builder features that will change your approach to building websites
At first glance you might think there’s all not that much new about the Muffin Live Builder; but see how it differs from the others.
1. The Muffin Live Builder is a part of a fully-loaded website builder platform
Finding the right WordPress page builder plugin to work with can be frustrating. One of the problems you may encounter is a need to upgrade to get features you need but are missing. If you are already paying for a premium theme, why would you want to pay even more for an additional design and editing tool?
With BeTheme you don’t have that problem since everything you need, including a premium page builder, is already included in your license:
100+ pre-built section templates you can mix and match
60+ customizable elements
The Muffin Builder and Live Builder premium page builders
WooCommerce, Slider Revolution, Contact Form 7, and other premium plugins
Top-of-the-line 24/7 support
With BeTheme you have at your fingertips an all-in-one solution for creating WordPress websites that will bring smiles to the faces of your clients or visitors.
2. BeTheme comes with Pre-built sections you can use to create any type of website to serve any purpose
BeTheme’s pre-built website sections encompass features and functionalities that effectively address the majority of design and content decisions you are likely to be faced with.
These features and functionalities include basic website structure, home page and internal page layouts, and image and text placement.
That’s not to say that a given pre-built website will satisfy every client’s needs.
For example: You’re building an online surf shop for a client. Be Surfing fills the bill, with one exception. Your client wants to have a carousel on the home page to promote recent blog posts.
The Live Builder takes care of that problem by enabling you to add a new section (in this case the carousel section) by using an existing pre-built section or creating it yourself.
Pre-designed sections aren’t new to page builders, but when they are included, as is the case with the Live Builder, you won’t waste time searching for a section that matches your site or having to strip out existing designs or content to make things fit.
The Live Builder features more than 100 of these pre-built sections for you to choose from. They are nicely organized into “Call to Action”, “Contact”, and other practical categories.
Since these pre-built section templates more closely resemble wireframes than fully designed sections, they can easily be repurposed to fit in with any type or style of website you might happen to be working on.
3. The Live Builder’s adeptly-organized toolbars make customizing sites a simple task
A shortcoming amongst most of the visually editing page builders is that their toolbars don’t always gives users a clear insight as to what their functions actually are. This can cause the web designer to have to search for ways to find which settings they need to configure.
The Live Builder avoids this problem. Any time a new element is added, or one is selected for editing, a custom toolbar appears on the left of the screen:
Every available setting for that particular element is displayed on the toolbar. You don’t have to waste time trying to figure out where the settings you need to access are located. Everything is in one place and right in front of you.
The Live Editor’s admin tool bar is equally well organized and, like the information in the settings toolbar, the most frequently used admin actions are located in one place on the left of the screen.
The Live Builder makes is so easy to get around. The admin action you need to invoke, whether its Save, Undo, Return to WordPress, or something else, you won’t find your self having to dig through layers of information before you can take the desired action.
4. Live Builder’s Autosave and backup tools come in handy for maintaining version control
Among the actions that you can access from the admin toolbar are four different save tools, which combine with the standard Publish and Update tools to establish and maintain version control.
These save features consist of:
Autosave, that every five minutes makes a copy of the page you are working on
Updates, that stores copies of a page when you hit the “Update” button
Revision, which enables you to save special versions of the page
Backup, that stores copies of a page prior to restoring an older one
This feature makes it easy to create an historical record of the building of a page, automatically manage backups, and take you back to a preferred version with a single click. Put another way, it can shorten your website building workflows dramatically.
5. Lightweight editor for fast editing
It can be frustrating indeed when editing becomes a ponderous process because of the time it can take for a page builder to load. When you’re designing and/or editing multiple pages, and taking into account multiple revisions, you get the feeling that you could compose a symphonic work during the wait time you have to put up with.
The Live Editor is so super lightweight that you barely have time to catch your breath before your work is right in front of you and ready to be acted on.
The 12-second clip you see here illustrates how quickly the Muffin page builder loads in real time:
According to BeTheme developers, the Live Builder is 60% faster than its previous version. Of even greater importance is that the Live Builder, when stacked up against other premium WordPress page builders, does not keep you in suspense when you try to open a page.
Faster is better, but howfast, in terms of page loading speed, can be crucial.
The Core Web Vitals tool comes in handy for checking a website’s ranking factors, one of which is loading speed. The BeTheme team used this tool to compare the loading speed of a Be Mechanic website built with Elementor compared to the same website built with the Muffin Live Builder.
This is what they found for the Elementor-built site:
The page with the largest byte content took 6.116 seconds to load.
The team compared that with the same page on the Live Builder site:
It took only 1.232 seconds to load.
Google knows that when a page takes more than three seconds to load, visitors start leaving in droves to look for a site that might have something better to offer.
That is why having a lightweight page builder capable of creating a speedier and more pleasant experience for your visitors is so very important.
Will you be choosing the new Muffin Live Builder for your next website building projects?
Between its intuitive design, easily accessible features and settings, and fast loading, the Muffin Live visual page builder can be a WordPress web designer’s best friend.
As this sampling of rave reviews is quick to point out:
Don’t forget that the Muffin Live Builder is only one part of a powerful WordPress toolkit that features:
600+ customizable pre-built websites
100+ pre-built sections,
60+ elements
bundled premium plugins
and a host of other features at your fingertips for building websites that other web designers can only dream of.
Are you wondering what to add to the footer of your WordPress site?
The footer is the area at the bottom of your website. Although it’s easy to overlook, the footer can improve the user experience on your site in lots of significant ways.
In this checklist, we will share the top things that you should add to the footer of your WordPress website.
What is the Footer in WordPress?
The footer is the area that appears below the content part of your website. It is a common website design feature used by millions of websites.
‘Footer’ can also refer to the footer code area. Third-party services like Google Analytics, Facebook Pixel, and many others may ask you to add code snippets to your website’s footer.
This sort of footer code doesn’t appear to visitors but it allows you to add features, services, and other content to your WordPress website.
With so many options, beginners may struggle to decide what to add to the footer area. As a result, many website owners miss out on opportunities to improve their sites and provide a better visitor experience.
That being said, let’s take a look at some of the things to add to the footer of your WordPress site, and how to make it more useful.
Here are all the things we’ll add, so feel free to jump straight to the items that interest you.
1. Adding Links to The Footer of Your WordPress Site
Many websites add links to the footer area. This helps visitors find your site’s most important content such as the about page, products page, checkout, contact form, and more.
All popular WordPress themes come with a footer widget area where you can add different content and elements.
To add links to the footer area, go to the Appearance » Menus page and click on the ‘create a new menu’ link.
After that, type in a name for the menu. This is just for your reference so you can use anything you want.
With that done, click on the ‘Create Menu’ button.
Now, check the box next to each item that you want to add to the menu.
Then, click on ‘Add to Menu.’
When you’re happy with how the menu is set up, click on the ‘Save Menu’ button to store your changes. For more help, see our guide on how to create navigation menus in WordPress.
Now you’ve created a menu, let’s add it to the footer area of your website by going to Appearance » Widgets. Here, click on the blue ‘+’ button.
In the ‘Search’ field, type in ‘Navigation Menu.’
When the right block appears, drag and drop it onto the ‘Footer’ or similar area.
After that, open the Select Menu’ dropdown and choose the footer menu you created earlier.
You may also want to type in a title, which will appear above the links in your website’s footer.
With that done, click on the ‘Update’ button.
Now, if you visit your website you’ll see all the links in the footer area.
You can also add links to the footer using a drag-and-drop page builder plugin like SeedProd. You can even create different footers for individual WordPress pages.
Adding a Menu to Your Footer with the Full-Site Editor
If you’re using a block-based theme such as ThemeIsle Hestia Pro or Twenty Twenty-Three, then the process of adding a menu to the footer is slightly different.
Simply create a navigation menu following the same process described above. Then, go to Themes »Editor in the WordPress dashboard to open the full-site editor.
Here, click on the downwards-pointing arrow in the toolbar and select the ‘Footer’ template.
In the footer area, go ahead and click on the ‘+’ button to add a new block.
In the ‘Search’ bar, type in ‘Navigation.’
When the right block appears, click to add it to the footer area.
The full-site editor will show one of your navigation menus by default.
If you want to show a different menu instead, then open the ‘Select menu’ dropdown in the right-hand panel and choose the menu you want to use.
When you’re happy with how the menu looks, click on ‘Save’ to make your changes live.
2. Adding Code in WordPress Footer
Sometimes you may need to add snippets to your WordPress blog or website’s footer.
You could edit your theme files directly and paste the new code in the footer.php template. However, this isn’t recommended as the custom code will disappear if you change the WordPress theme, or update that theme.
Editing your theme files directly can also be risky. Even a simple typo or mistake could cause lots of common WordPress errors.
The best way to add code in the WordPress footer is by using a code snippets plugin. WPCode is the best code snippets plugin for WordPress. It makes it easy to insert code into your WordPress site’s headers and footers without needing to edit your theme files.
First, you need to install and activate the WPCode plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, go to Code Snippets » Header & Footer. From here you can paste your code snippet into the ‘Footer’ box.
To comply with GDPR and other privacy-related laws in different countries, you need to add a privacy policy page in WordPress and then link to it from all the other pages.
Since the footer appears across your entire website, it’s the perfect place to add this URL.
First, you need to go to Settings » Privacy in the admin area. You’ll notice that WordPress has already created a Privacy Policy page draft for you.
To use the default Privacy Policy page, simply click on ‘Use This Page.’ If you want to use a different page instead, then open the dropdown menu and choose a new page from the list.
You can also create a new privacy policy page from this screen. Simply click on the ‘Create’ button and WordPress will generate a new post with some basic privacy policy text.
No matter how you create the privacy policy page, you can edit it just like any other page in WordPress. For example, you can add more information about your requirements, and terms and conditions.
When you’re happy with the information you’ve entered, click on the ‘Publish’ button to make the privacy policy live.
With that done, you’ll need to add a link to your website’s footer. To add a navigation menu to the footer area, simply follow the same process described above.
4. Adding Copyright Date in WordPress Footer
You may also want to add a copyright date in the WordPress footer area to let visitors know that your content is copyrighted. One way to do this is by simply adding the text to your theme settings.
Many top WordPress themes allow you to add text in the footer area, so it’s worth checking whether your theme has this setting.
Simply go to the Appearance » Customize page and look for any footer settings in the left-hand menu. These are usually labeled ‘Footer Options,’ ‘Footer Settings’ or similar.
To add the copyright symbol, simply paste the following into the ‘Footer Credits,’ ‘Copyright Text’ or similar section.
The WordPress Theme Customizer will update automatically so you can see how the copyright text will look on your website.
Depending on your theme, you may also be able to change the font size and text alignment using the theme settings.
If you’re happy with how the copyright notice looks, then click on the ‘Publish’ button to make your changes live.
Pro Tip: With this approach, you’ll still need to update the copyright notice every year. To add the new year automatically, see our guide on how to add a dynamic copyright date in the WordPress footer.
Adding a Copyright Date to Your Footer with the Full-Site Editor
If you’re using a block-enabled theme, then it’s easy to add a copyright date to the footer. Simply go to Themes »Editor to open the full-site editor.
Then, scroll to the footer section and click on the ‘+’ to add a new block. You can now start typing in ‘Shortcode’ and select the right block when it appears.
After that, simply click on the ‘Save’ button to make the copyright notice live.
5. Remove Powered by Links from Footer in WordPress
Some free WordPress themes add links to the footer area. Typically this is a ‘Powered by WordPress’ disclaimer that links to the official WordPress website, but some theme developers also include links to their own websites.
These outgoing links encourage visitors to leave your website and can have a negative effect on your WordPress SEO. With that in mind, it’s a good idea to remove them from the footer area by going to Appearance » Customize.
Some themes make it difficult to remove these links so you may have to spend time looking through the different settings.
To start, we recommend looking for any settings labeled ‘Footer Options,’ ‘Footer & Copyright Options,’ or similar.
Here, you should be able to delete the links or even replace them with your own URLs.
Some themes hard-code the links in the theme files and don’t give you the option to remove them using the WordPress Customizer.
Removing Powered By Links with the Full-Site Editor
To remove the ‘Powered By’ links in a block-enabled theme, simply open the full-site editor by following the same process described above.
In the editor, find the ‘Proudly powered by WordPress’ or similar text. You can replace this with your own text by typing into the ‘Paragraph’ block.
If you want to remove the text completely, then simply click to select the ‘Paragraph’ block. After that, click on the three-dotted ‘options’ button.
Finally, click on ‘Remove Paragraph’ to delete the block.
You can then go ahead and click on ‘Save.’ Now, if you visit your website you’ll see that this text has been removed.
6. How to Add Instagram Feed in WordPress Footer
Do you regularly post beautiful photos and videos to Instagram?
People won’t see your Instagram content if they just visit your website. With that in mind, you may want to show recent Instagram photos in your website’s footer.
This is an easy way to promote your social media page and encourage more people to follow you on Instagram.
After adding the social media feed to your footer, Smash Balloon will fetch new Instagram photos automatically. In this way, your footer will always show your latest Instagram photos to the people who visit your website.
Smash Balloon has all the tools you need to fine-tune how the Instagram feed looks in your footer. For example, you can choose between different layouts, add a ‘Follow’ button, optimize your feed for mobile devices, and more with the user-friendly Smash Balloon editor.
When you’re happy with how the feed looks, it’s time to add it to your website’s footer. Simply go to Appearance » Widgets and click on the blue ‘+’ button.
In the search field, type in ‘Instagram Feed’ to find the right block. Just be aware that WordPress has a built-in Instagram Feed button, so make sure you use the block that has the official Instagram logo.
You can now drag and drop the block onto your site’s footer.
With that done, simply click on ‘Update.’ After that, you can visit your website to see your Instagram feed in the footer.
Adding an Instagram Feed with the Full-Site Editor
It’s easy to add the Smash Balloon Instagram feed to a block-enabled WordPress theme.
Simply open the full-site editor following the exact same process described above, and then click on the ‘+’ button in the footer template.
With that done, type in ‘Instagram Feed’ and select the right block when it appears to add it to the footer.
The full-site editor will automatically show the Instagram feed you created.
With that done, simply click on ‘Save’ to make the Instagram feed live.
7. Add a Sticky Footer Bar in WordPress
Want to show special offers or notifications in the footer area?
You can create a footer bar that stays stuck to the bottom of the screen as the visitor scrolls.
To create this kind of sticky footer bar, you’ll need OptinMonster. It is the best conversion optimization software in the market and allows you to turn website visitors with a high bounce rate into users and customers.
OptinMonster also comes with powerful display rules so you can show personalized custom messages in your website’s footer.
After that, install and activate the OptinMonster plugin on your WordPress website. Upon activation, select Connect Your Existing Account.
You can now type in the email address and password for your OptinMonster account.
Once connected, go to the OptinMonster » Campaigns page and click on the ‘Create your first campaign’ or ‘Add New’ button.
On the next screen, choose ‘Floating Bar’ as your campaign type and then select a template.
To preview an OptinMonster template, simply hover your mouse over it and then click on the ‘Preview’ button.
When you find a template you like, click on its ‘Use Template’ button.
You can then type in a name for the campaign. This is just for your reference so you can use any title you want.
With that done, click on Start Building.
This will take you to OptinMonster’s drag-and-drop campaign builder where you can design the footer bar. Simply click on any element you want to edit, or drag and drop new blocks from the left-hand column.
When you’re happy with how the campaign looks, simply click on the ‘Publish’ button.
Then, select ‘Publish’ to make the campaign live.
You can now select the ‘Save’ button to store your changes and then click on the ‘X’ in the upper-right corner to close the OptinMonster campaign builder.
Back in the WordPress dashboard, open the ‘Status’ dropdown and select ‘Published.’
Finally, click on ‘Save.
Now, visit your WordPress website to see the floating footer bar in action.
You can use OptinMonster to create all kinds of high-converting campaigns including slide-in footer popups, countdown timers, and targeted footer notifications that can help you recover abandoned cart sales.
8. Add Social Buttons in WordPress Footer
Another good way to use the footer space in your WordPress theme is by displaying social media icons. This is an easy way to promote your different profiles and get more followers on Twitter, Facebook, and other popular platforms.
The best way to add these buttons is by using the Social Icons Widget plugin. This plugin supports all the major social networks and comes with multiple icon styles that you can choose from.
After activating Social Icons Widget, go to the Appearance » Widgets page. You can then click on the ‘+’ button and search for ‘Social Icons Block.’
When the right block appears, drag and drop it onto the footer area.
By default, the Social Icons Block already has a few social media icons built-in.
To link any of these icons to your own social profiles, simply give it a click. In the little bar that appears, type in the URL of the page you want to promote.
Want to use a different icon for this social media platform?
Then simply click on the ‘Edit Details’ link. This opens a window where you can choose a new image for the social icon.
Simply repeat this process for each built-in social media icon.
If you want to remove one of these default icons, then click on the ‘Delete icon.’
There are countless social media platforms and other websites that you may want to add to the footer area.
To do this, click on the ‘+’ button.
You can now choose a social media icon and add a link by following the same process described above.
When you’re happy with how the social media icons are set up, click on ‘Update.’ Now, simply visit your website and scroll to the footer area to see the social buttons in action.
Bonus: Want to add more social features to your website? Take a look at our expert pick of the best social media plugins for WordPress to grow your audience.
Adding Social Buttons with the Full-Site Editor
Are you using a block-enabled theme? Then you can add social icons to the footer by going to Themes »Editor.
In the footer, click on the ‘+’ button and then type in ‘Social Icons block.’
When the right block appears, click to add it to the footer.
This adds a block with the default social icons.
You can now customize these icons and add new social buttons, by following the same process described above.
When you’re happy with how the buttons look, simply click on the ‘Save’ button. Now if you visit your website you’ll see the social icons in the block-enabled footer.
9. Add a Phone Number in WordPress Footer
If you offer customer support over the phone, then adding your phone number in the WordPress footer area can help users contact you.
For this, you’ll need a business phone number. We recommend using Nextiva, which is the best business phone service for small businesses.
Nextiva allows you to make cheaper calls and use advanced features like call forwarding, unlimited free domestic calling, voicemail to email and text, and more. You can also use the same number on multiple devices and handsets, and manage calls from any device that has an internet connection.
Once you have a business phone number, you’ll need to add it to your website. The easiest way is by using the WP Call Button plugin, which adds a click-to-call button to your WordPress site.
After activating the plugin, go to Settings » WP Call Button in the WordPress dashboard.
Here, click on the ‘Call Now Button Status’ switch so it shows ‘Active.’
Next, type your business phone number into the ‘Phone Number’ field.
By default, the button shows ‘Call Us’ text but you can replace this with your own custom messaging by typing into the ‘Call Button Text’ field.
After that, scroll to the Call Button Position section and choose where you want to show the button on your website. For example, you can show the button in the bottom-right corner, or create a banner that covers the whole footer area.
When you’re happy with how the button is set up, click on ‘Save Changes.’ After that, simply head over to your website to see the call-to-click button in action.
Your website’s footer doesn’t have to be a dead-end. If you’ve added a navigation menu following the process described above, then you’re off to a great start. However, you can also encourage customers to connect with you by adding a contact form to the footer area.
WPForms is the best WordPress contact form plugin and comes with a ready-made Simple Contact Form template that allows you to create a contact form with just a few clicks.
After activating the plugin, go to WPForms » Add New and type in a name for the contact form. This is just for your reference so you can use anything you want.
Simply find the ‘Simple Contact Form’ template and click on its ‘Use Template’ button.
WPForms will now open the template in its form builder. The template already has all the fields you’ll typically need, but you can add more fields by dragging them from the left-hand menu and dropping them onto your form.
You can also click on any field to edit it, and rearrange them in the form using drag and drop.
To delete a field, simply hover your mouse over it and then click on the small trash can icon when it appears.
When you’re ready, click on the ‘Save’ button to store your changes.
To add the contact form to your footer, head over to the Appearance » Widgets page in the WordPress dashboard.
Here, click on the ‘+’ button and search for ‘WPForms.’ When the right block shows up, drag and drop it onto your theme’s footer area.
After that, open the ‘Form’ dropdown and select your contact form.
You can also add an optional title, which will appear above the contact form.
Once you’ve done that, click on the ‘Update’ button.
Now, if you visit your website you’ll see the new contact form in the footer.
Adding a Contact Form with the Full-Site Editor
Want to add a contact form to the footer of a block-enabled theme?
Then you’ll need to head over to Themes »Editor. Here, scroll to the bottom of the screen and click on the ‘+’ in the footer area.
With that done, type in ‘WPForms’ to find the right block.
Give this block a click to add it to the footer area.
In the WPForms block, open the ‘Select a Form’ dropdown and choose the contact form we just created.
When you’re ready to make the contact form live, simply click on the ‘Save’ button.
We hope this article helped you decide which things to add to your WordPress footer to make it more useful. Next, you can see our guide on how to improve your WordPress website speed and performance, and our expert pick of the best WordPress plugins to use on your site.
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.
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 […]
