Maintenance is a complex process that involves checking your page for any errors, bugs, or issues. It also includes keeping it updated (installing the new versions of plug-ins, adding visual elements). Luckily, TemplateMonster is always ready to provide professional maintenance services for WP sites. Wonder why website maintenance is important? Let’s get the answer.
Why Website Maintenance Is Important
Performance improvement – it decreases the loading time, providing visitors with the best user experience;
Increasing the visitors’ rate – helps improve SEO, which makes your page easier to find using search engines. Traffic growth increases boost up sales;
Data protection – by installing new versions of plug-ins, you guarantee a high level of information protection;
Backup – even if something wrong happens –restore the information using a backup;
Accessibility – a page should always be available. Otherwise, they search for the information somewhere else. When the site is unavailable, you lose potential clients and money;
Major updates – install a new version of the platform, implement features, etc.
Website Monitoring and Updating
This process requires special knowledge. You should be aware of all aspects of web development. It is also necessary to understand all the nuances of a platform. It’s obligatory to track various parameters, gather information, and analyze it to create a proper updating strategy.
Website maintenance makes it possible to:
Remove spam – if you have comments, then some visitors may add the links to other resources;
Test pages – to ensure that they load properly;
Test forms – they should perform correctly;
Add new (and renew old) content – add videos, photos, articles, or other content to engage users;
Analyze statistics – to find the best ways to attract visitors;
Redesign – follow the trends, add widgets, animation;
Renew domain name, etc.
Many factors require tracking. Some of the tasks should be performed weekly. Others are done monthly, quarterly, and yearly.
Keeping everything up-to-date is a very challenging task. It becomes super difficult if you have much content because you need to take care of everything. Assure that all the links work properly, and visitors get to the necessary page.
What if you have multiple projects? What if you aren’t tech-savvy, and you don’t know all the aspects of web development? What if you have no time to spend on analyzing and renewing everything? What if you don’t understand why website maintenance is important at all? That’s where TemplateMonster maintenance services for WordPress come into play.
Website Updates from Professionals
Taking care of everything is difficult. Even an experienced developer who works on one project needs some time. What if you run an online business? It is better to let professionals do it, because:
They know all the nuances of the platform (WordPress and WooCommerce);
You lose no time on keeping everything up-to-date.
It’s an excellent option for people who have an online business because they can deal with other tasks. They may spend time working on selling strategies, finding partners, and potential customers. You can do everything yourself, but it takes a lot of time.
Website Monitoring and Updates Service from TemplateMonster
Up-time monitoring – we install a plug-in that helps us monitor your site. If something is wrong (like it goes down) – the team gets an immediate notification. They start working on it right away;
Security protection – the crew, tries to find security and malware issues. Our staff will know about any problems immediately, so visitors shouldn’t worry about their data protection. Our experts check such components as custom admin panel URL, Captcha for login forms (including the admin panel login form), Contact Form 7, custom database prefix. They will also configure WordFence and Akismet Anti-Spam;
Daily backups – we save such content as files and pages. An owner can restore everything if necessary. The data is stored on your hosting and our side (if it’s required);
Weekly updates – our team updates everything within the current branch (from 5.1 to 5.2). Our experts can perform a major update (from 5.9 to 6.0) for an additional fee. The fee depends on complexity. Sometimes, it requires many changes to install the new version correctly;
Monthly reports – on the last business day (usually, on Friday) of the month, we provide you with a detailed log. It includes the information on the performed tasks and their effect;
Team assistance (5 hours per month) – our team is available to you. It’s an excellent option when you need to make some basic changes. Our experts can install a template, add some content or graphics, change the color scheme, install and configure widgets. We also can make some minor HTML/CSS changes. Please consider that the not used hours don’t get transferred to the next month;
15% customization services discount.
Cases Why Maintenance is Important for Your Project
It is an excellent option for:
A businessperson who run an online store or a startup;
A developer without a team;
Novices who don’t know much about web-development or the WordPress platform.
Don’t worry about anything – we do everything to make your site work fast and correctly. This service is great for professionals who provide web development services. Request it to avoid wasting your time taking care of various projects. It helps you stay focused on current ones, instead of spending your time monitoring the old projects and creating reports.
If you still don’t understand why website maintenance is important, then answer the following questions:
Do you want your website to work stable?
Do you need to protect the users’ data?
Do you want your project to be up-to-date?
Do you want everything to be fast and look modern?
Do you want to avoid wasting your time and money dealing with maintenance?
If you have answered “yes” at least three times, then this is for you. The result is impossible to overestimate. If you invest in it – you will get a modern, reliable site that is always available to customers. The most crucial factor is that it will be useful, and people will use it regularly. Clients may recommend your project to their friends. It increases the number of potential customers and visitors.
With SEO improvement, you increase the number of visitors and potential clients. A high number of customers may increase sales and your income. Without spam removing, it turns into a place where everyone adds suspicious links. It negatively affects users’ engagement. It is hard to find the necessary information among multiple spam messages, and people leave it. Keeping the number of active users and increasing it is another reason why website maintenance is important.
The Reason Why Website Maintenance is Important for Data Protection
One of the main reasons why website maintenance is important is its security. Nowadays, the number of online stores is high, so everyone buys goods or services online. The stores are mobile-friendly, and people access them immediately. Online shops request the required information, and clients share the necessary information. Without all of the optimizations, your page becomes not only slow but also dangerous. An outdated plug-in is a security threat.
Hackers may want to steal the information to sell it. A data breach is a serious threat to all websites that require any information from users. It results in financial losses and hurts your reputation. Project support is crucial here – install the latest versions of plug-ins, and the platform (especially if it has protection-related fixes), scan for malware. It is the only way to protect your project and your customers from hacking. Your online shop may look a bit outdated, but if it’s not reliable, you lose all the potential clients. That is why website maintenance is important – it helps to build trust.
The competition among internet shops is very high – online stores appear, and the existing ones evolve and become bigger. A high level of security is one of the key advantages. Use all the available means to make people notice your project and trust it.
Don’t miss out these all-time favourites
The best hosting for a WordPress website. Tap our link to get the best price on the market with 30% off. If Bluehost didn’t impress you check out other alternatives.
Website Installation service – to get your template up and running within just 6 hours without hassle. No minute is wasted and the work is going.
ONE Membership – to download unlimited number of WordPress themes, plugins, ppt and other products within one license. Since bigger is always better.
Ready-to-Use Website service is the ultimate solution that includes full template installation & configuration, content integration, implementation of must-have plugins, security features and Extended on-page SEO optimization. A team of developers will do all the work for you.
Must-Have WordPress Plugins – to get the most essential plugins for your website in one bundle. All plugins will be installed, activated and checked for proper functioning.
Finest Stock Images for Websites – to create amazing visuals. You’ll get access to Depositphotos.com to choose 15 images with unlimited topic and size selection.
SSL Certificate Creation service – to get the absolute trust of your website visitors. Comodo Certificate is the most reliable https protocol that ensures users data safety against cyber attacks.
Website speed optimization service – to increase UX of your site and get a better Google PageSpeed score.
Do you want to add push notifications to your WordPress site?
Push notifications let you send messages to users even when they are not visiting your website. This helps you bring back users to your website, increase traffic, and make more money.
In this article, we will show you how to easily add web push notifications to your WordPress site.
What are Push Notifications?
Push notifications are short, clickable notification messages that appear as a popup on users’ desktop or mobile devices.
They appear on top of the desktop or in the notification area on their mobile device. The best thing is that they can be shown even when the user’s browser is not open.
Here’s an example of a push notification in Windows 10:
Push notifications let you reach users across devices with your latest updates and offers. Web push notifications are a very effective way to convert website visitors into loyal followers and customers.
Why Add Web Push Notifications to Your WordPress Site?
Did you know that 70% of people who leave your website will never come back? This is why you need to convert those website users into subscribers or customers.
You can do this by using multiple channels at once. This includes email marketing, social media, mobile or SMS marketing, and web push notifications.
Email lists are still the most powerful marketing tool available. However, we are finding that push notifications are also very effective.
On WPBeginner site, push notifications are consistently the top 5 traffic source.
The following are just some of the reasons that make push notifications a great marketing tool:
Users need to give their explicit permission to receive push notifications. This means they are already interested in what you have to offer and are more likely to engage with notifications.
Push notifications are shorter and demand less attention than email or social media updates.
There is no algorithm like on social media to limit your reach. Nearly 100% of messages are delivered.
Users can control how their devices display notifications. They can snooze them or turn them off entirely.
Not as many companies are using push notifications.
Popular sites including Facebook, Pinterest, LinkedIn, and many others understand the importance. They are already using web push notifications.
According to a survey, push notifications have a 50% higher open rate than email and twice as much click-rate. They are more engaging than SMS, email marketing, and social media platforms.
Having said that, let’s take a look at how to easily add web push notifications to a WordPress site.
Setting up Web Push Notifications in WordPress with PushEngage
PushEngage is the best push notification service on the market. It allows you to easily add push notifications to your WordPress site.
We’re in the process to switching to PushEngage for WPBeginner, so we can leverage their powerful automatic user segmentation features to further boost our engagement.
Creating Your PushEngage Account
First, you need to go to the PushEngage website and click the Get Started For Free button:
The free plan covers you for up to 2,500 subscribers and 120 notification campaigns each month. You’ll need to upgrade as you get more subscribers and need to send more campaigns.
Upon sign up, you will reach the PushEngage dashboard. If you signed up using your Google account, PushEngage will prompt you to enter your website details:
You should now see the Settings » Site Settings » Installation Settings page in your PushEngage dashboard.
Here, you need to upload an image to use in your push notifications. Go ahead and click the ‘Change’ button below the empty image box.
Your image needs to be in PNG or JPG file format and the recommended size is 256x256px. This image will display in your push notifications.
You’ve now completed the key information for your PushEngage account.
Connecting Your WordPress Site with PushEngage
The next step is to connect your website to PushEngage.
To do this, you need to install and activate the PushEngage WordPress plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon installation, you also need to download the JavaScript file for PushEngage if your site uses HTTPS. You need to unzip this and upload it to your website’s root folder.
To dowlnoad the file, go to Settings » Site Settings » Installation Settings in your PushEngage account.
Under ‘Choose Website Type and Add Script’, you need to click the WordPress tab. Then, go ahead and click the ‘Download Package File’ button:
Next, unzip the file on your computer. Simply right-click on it and then select the Extract option:
You should then see the file service-worker.js:
Now, you need to upload that file to your website’s root folder in your WordPress hosting account. The root folder is the one where all the other folders and files are stored for your site. Normally, it’s the same folder where you’ll see /wp-content/ folder.
Simply connect to your website via FTP and upload the file. For help with this, check out our beginner-friendly guide on using FTP to upload files.
Tip: Not sure if you have the root folder? Look for an index.php file. If you see that, you’re in the right folder.
Now that you’ve uploaded the file, you can continue connecting WordPress to PushEngage.
The next step is to get your API key. Simply go to Settings » Site Settings » API Keys in your PushEngage dashboard. Then, go ahead and click the ‘Generate a New API Key’ button:
You should then see your API key.
In a new tab, go to the PushEngage page in your WordPress admin. Then, click the ‘Setup’ tab. You will see a box for your API key.
Simply enter your API key here, then click the Submit button.
Setting Up Your Push Notification Messages
Now, you will see your PushEngage settings. Check that you’re happy with the General Settings. You can change your account details here or on the PushEngage website:
Next, it’s time to set up the message that people will see when they arrive on your website. Just click on the ‘Subscription Dialogbox’ tab to view and change the settings.
You will see your logo in the message, plus the default text. You can change this to your own message. Don’t forget to click the ‘Update Optin Settings’ button to save your changes.
Below this, you can change the message that’s shown on the intermediate page. This is the page that appears after the user first clicks Allow.
Note: You can’t change what’s shown in the browser’s own popup box. This will always have the ‘Show notifications’ text plus Allow and Block buttons.
Just type in the text you want to use. Don’t forget to click the ‘Update Page Settings’ button.
You may want to create a welcome notification to thank people for subscribing. This also lets you easily test that your notifications are working.
Just click on the ‘Welcome Notification Settings’ tab to set it up. Here, you need to type in the title and message for the welcome notification. You can use your homepage as the URL, or you could send users to a specific page.
Make sure you check the ‘Send Welcome Notifications to Subscribers’ box to activate welcome notifications. You also need to click the Update button to save your changes.
Testing the Push Notifications on Your Website
Once you’ve set up push notifications, it’s best practice to check that they’re working as you expected.
To test your push notifications, open your website on your computer or phone.
You should immediately see the subscription dialog box that you set up. Here’s ours on a desktop computer:
And here’s our subscription dialogbox on a mobile device:
Go ahead and click the ‘Allow’ button. You should then see the intermediate page in a popup window. Here’s how it looks on a computer:
You need to click ‘Allow’ here too. Now, you’ve successfully subscribed to push notifications from your site.
Your welcome notification should appear on your screen within a few minutes. Here’s ours, showing the welcome message we created earlier:
What if a user chooses not to enable notifications but later wants to subscribe? This is automatically enabled with PushEngage. The user will see a bell widget in the bottom right corner of your website:
They can simply click on this to subscribe to your website. To change the bell notification widget, simply go to Settings » Subscription Settings » Opt-in Management in your PushEngage account.
You can change the color, position, and label of the widget:
You can even swap the bell for a button that appears along the side of the website like this:
Sending Push Notifications to Your Subscribers
By default, PushEngage will send out a notification for each new post. These notifications will include the post title and a small version of the featured image. When a user clicks the notification, they’ll be taken straight to your blog post:
If you don’t want automatic notifications, then you can turn them off by visiting PushEngage » General Settings in your WordPress dashboard.
Simply scroll down to the ‘WordPress Post Settings’ section and uncheck the ‘Auto Push’ box. Don’t forget to click on the ‘Save WordPress Settings’ button.
You can create custom notifications at any time in PushEngage. Just log into your account on the PushEngage website then go to Notifications » Create » New Notification.
This screen gives you the option to set the title, message, URL, image, and more. You can schedule notifications to go out at a later time or you can send them immediately.
Tip: If you’re pre-scheduling notifications, make sure your time zone is correct. It’s easy to check or change this under Settings » Site Settings » Site Preferences in your account on the PushEngage website.
We’ve created a special notification for our blog post with a custom title and message.
Other PushEngage Features to Use for Your Website
PushEngage offers a wide range of other features, even on the free plan.
For instance, you can set up an overlay. This appears on top of your website content and shows the user where to click to allow notifications. Here’s an overlay in action on the PushEngage website:
You can set up an overlay in your account on the PushEngage website. Simply go to Settings » Subscription Settings » Opt-in Management and scroll down to the ‘Subscription Overlay’ section.
Then, check the ‘Enable Subscription Overlay’ button. You can use the default overlay label or type in a different one:
Due to the way the Safari browser works, you need to go through some extra steps if you want Safari users to be able to subscribe to your push notifications. To enable web push notifications for Safari, you need an Apple developer account ($99/year). You can then create a unique Push ID for your website.
Once you have your Push ID and you’ve created a certificate, you then need to add these under Settings » Subscription Settings » Safari Web Push:
Other Good WordPress Push Notification Plugins
It is important to choose the right web push notification service from the start. Many providers try to lock you into their platform. That means changing your push notification service can mean losing your subscribers. So if you switch, you will be starting again from scratch.
This is why we suggest asking the provider you choose for all settings you need to configure to make your subscriber list portable.
We recommend PushEngage because it has a generous free plan plus lots of powerful paid features. With PushEngage’s paid plans, you can:
Set up a drip autoresponder, such as for a welcome campaign
Send notifications when a user has abandoned their cart
Trigger campaigns based on users’ actions
Allow users to add product alerts for when a product goes on sale or is back in stock
… and more
WordPress is all about choices. Here are some other WordPress push notification plugins that you may want to try:
PushCrew – Connects your website to PushCrew’s push notification service. They offer a free plan limited to 2000 subscribers.
PushAlert – Web Push Notifications – Helps you connect to PushAlert web push notification service. They also offer a free plan limited to 3000 subscribers.
PushAssist – Connector plugin for the PushAssist web push notification service. Their free plan is limited to 2000 subscribers.
OneSignal – Has a limited free plan that includes basic web push notification features. Their upsell tactics are very aggressive and support isn’t helpful. This is why we’re switching away from OneSignal in the coming weeks.
We hope this article helped you learn how to add web push notifications to your WordPress site. You may also want to see our guide to the best email marketing services, and how to get a free business email address for your website.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The post How to Add Web Push Notification to Your WordPress Site appeared first on WPBeginner.
In 2020, staying in touch with your audience is very important. Establishing an email list with a service like MailChimp helps you deliver content straight to your subscribers.
Email lists are great, but what if a reader or potential customer wants to get in contact with you directly? That’s where contact forms come in! In this article, we’ll cover how to configure the popular Contact Form 7 plugin for your WordPress site.
How to Install Contact Form 7
Contact Form 7 has been around since 2009, and it’s garnered over 5 million downloads in the past decade. Contact Form 7 can be installed directly from the WordPress plugin repository. If you search for “contact form 7”, you’ll be able to find the plugin along with a variety of add-ons.
Install the Contact Form 7 plugin from the WordPress plugin repository.
After the plugin is installed, you’ll see a menu item labeled “Contact” in the sidebar of your WordPress dashboard. This is where all of Contact Form 7’s settings can be configured.
Customize Contact Form 7 settings.
The Pros and Cons of Having a Contact From
Before we dive into how to configure Contact Form 7 for your WordPress site, let’s quickly go through a few of the pros and cons of adding a contact from to your site.
Pros of Having a Contact Form
A contact form allows readers, customers, and fans to contact you directly. Depending on the purpose of your WordPress site, the ability for a visitor to communicate with you can be very important. For example, not adding a contact form to an ecommerce site can be financially damaging to your business because interested parties won’t be able to reach out to you if they have questions about your product.
A contact form adds legitimacy to your WordPress site or business. Many people see the presence of a contact form as a trust factor of sorts. The idea of being able to reach out to you, the site owner, makes your content more trustworthy.
Cons of Having a Contact Form
Spam can be an issue for public forms like comment boxes and contact forms. Luckily with Contact Form 7, you can filter out spam with reCAPTCHA. You can even configure a Cloudflare page rule to protect yourself even further. We’ll get into the nitty-gritty how to set up spam protection in Contact Form 7 later on in the article.
After adding a contact form to your site, you’ll likely need to devote time to responding to messages. This isn’t necessarily a bad thing depending on how you look at it. Some people dread the process of responding to emails, while others genuinely enjoy it. From our experience, the relationships that manifest from having a contact form on your site typically outweigh the cost of moderation, so we recommend powering through it!
An Overview of Contact Form 7 Settings
Creating a contact form with the Contact Form 7 plugin is super easy. To get started, click Contact > Contact Forms in your WordPress sidebar. On this page, you can view all of your contact forms along with their associated metadata details.
Contact form in Contact Form 7.
When Contact Form 7 is first installed, it creates an example form as well. Before we get into how to create a custom contact form, let’s first take a look at the example form to get a better idea of how Contact Form 7 works. Click on Contact Form 1 to view the form settings.
Configure your WordPress contact form.
The “Edit Contact Form” page is split into four sections.
Form – Customize your HTML contact form template with a variety of field options like “text”, “email”, “checkboxes”, etc. You can also write custom HTML in the form customization box.
Mail – Customize the email template and settings used for notification emails.
Messages – Customize messages that are displayed after specific actions. For example, you can set a unique message to display after someone submits a contact form.
Additional Settings – Specify snippets to enable additional features like subscribers-only mode, demo mode, and mail skipping.
Now let’s take a closer look at each section and create a custom contact form!
How to Create a WordPress Contact Form
To create a new contact form, click on Add New next to “Contact Forms”.
Create a new contact form in Contact Form 7.
Give the new contact form a name, and click “Save”.
Save your new WordPress contact form.
In the “Form” section, add the necessary HTML for your contact form. You can use the various preset buttons to generate shortcodes for popular form tags. To make things easier, check out the descriptions below for the preset form tags that come with Contact Form 7.
Text – Create a form tag for a single line of text. Text fields are useful for first names, last names, and other text-based snippets that don’t require multiple lines.
Email – Create a form tag for an email address.
URL – Create a form tag for a URL.
Tel – Create a form tag for a telephone number.
Number – Create a form tag for a number. Unlike the “text” or “text area” input fields, “number” fields only allow numeric digits.
Date – Create a form tag for a date.
Text Area – Create a form tag for a text area. Unlike the normal “text” input field, a “text area” field allows for multiple lines of text. They’re ideal for inputting the body of the message.
Drop-down Menu – Create a form tag for a drop-down menu.
Checkboxes – Create a form tag for checkboxes.
Radio Buttons – Create a form tag for radio buttons.
Acceptance – Create a form tag for an acceptance checkbox.
Quiz – Create a form tag for a question-answer pair.
File – Create a form tag for a file upload field.
Submit – Create a form tag for a submit button.
Now let’s go ahead and customize a contact form. For the sake of completeness, we’ll create a contact form that uses all the preset form tags in Contact Form 7.
The “Text” Form Tag
When you click on a preset form tag in Contact Form 7, you’ll see a popup menu like the one below. In this menu, you can configure the form tag’s settings. At the bottom, you’ll see a shortcode that can be embedded into your contact form template.
A “text” form tag in Contact Form 7.
For the “text” form tag, we’re using the settings below to create an input field for a name.
Field Type – Required Field
Name – text-711 (auto-generated)
Default Value – Your Name (used as default placeholder text)
In some cases, you may want to have an input field on your contact form for collecting someone’s website. While you can technically use a normal “text” form tag for this in Contact Form 7, we recommend using the “URL” form tag instead. The “URL” form tag will generate an input field that validates URLs to ensure they’re formatted correctly.
A “URL” form tag in Contact Form 7.
For the “url” form tag, we’ve configured the settings below.
Similar to URLs, you can also use a standard “text” form tag to collect phone numbers. However, it’s better to use the “tel” form tag instead to ensure the phone number is valid.
A “tel” form tag in Contact Form 7.
For the “tel” form tag, we’ve configured the settings below.
Contact Form 7’s “date” form tag lets you generate a calendar-style date picker. This “date” input field is useful for specifying appointment dates in a contact form.
A “date” form tag in Contact Form 7.
For the “date” form tag, we’ve configured the settings below.
The “textarea” form tag lets you create a multi-line text box that lets visitors submit longer messages. Textareas are most useful for capturing the body of a message.
A “textarea” form tag in Contact Form 7.
For the “textarea” form tag, we’ve configured the settings below.
Contact Form 7’s “drop-down menu” form tag lets you create a drop-down menu with multiple options. Drop-down menus are useful for situations where you want a visitor to select a specific option to submit with the form. For example, if you run a WordPress maintenance company, you can configure a drop-down menu that lets a visitor choose between the services you offer.
A “drop-down menu” form tag in Contact Form 7.
For the “drop-down menu” form tag, we’ve configured the settings below.
The checkbox form tag lets you create HTML checkboxes. Similar to drop-down menus, checkboxes can also be used to select predefined options. Depending on the nature of your contact form, checkboxes may work better than drop-down menus. For example, if you have a small number of options to choose from, a checkbox reduces the number of clicks required to make a selection. On the other hand, if your contact form has a lot of options, a drop-down menu may work better because it takes up less vertical space.
A “checkbox” form tag in Contact Form 7.
For the “checkbox” form tag, we’ve configured the settings below.
The “radio buttons” form tag lets you create radio buttons with multiple options. Unlike checkboxes and drop-down menus, radio buttons only allow you to select a single option.
A “radio buttons” form tag in Contact Form 7.
For the “radio buttons” form tag, we’ve configured the settings below.
Contact Form 7’s “acceptance” form tag can be used to generate a single checkbox for the purpose of accepting terms and conditions. With the acceptance form tag settings, you can specify a message to display.
An “acceptance” form tag in Contact Form 7.
For the “acceptance” form tag, we’ve configured the settings below.
Name – acceptance-545 (auto-generated)
Condition – Check this box to accept the terms.
ID Attribute – cf7-acceptance
Class Attribute – cf7-acceptance
These settings generate the shortcode below.
[acceptance acceptance-545 id:cf7-acceptance class:cf7-acceptance] Check this box to accept the terms. [/acceptance]
The “Quiz” Form Tag
The “quiz” form tag can be used to create basic question and answer quizzes in your contact form. To create a quiz question, use the following format to separate the question and answer – Question|Answer. In the screenshot below, our question is “What year was WordPress released?”, and the answer (separated by a “|” character) is 2003.
A “quiz” form tag in Contact Form 7.
For the “quiz” form tag, we’ve configured the settings below.
Name – quiz-461 (auto-generated)
Condition – Check this box to accept the terms.
ID Attribute – cf7-quiz
Class Attribute – cf7-quiz
These settings generate the shortcode below.
[quiz quiz-461 id:cf7-quiz class:cf7-quiz "What year was WordPress released?|2003"]
The “File” Form Tag
Contact Form 7’s “file” form tag lets you add file upload functionality to a contact form. This is useful for situations where you want a visitor to be able to upload an image or PDF file to submit with the form. For example, if you run a photography blog that posts guest submissions, you can add file upload functionality for people to upload images.
In the form tag settings, you can specify a variety of settings to secure your form. We recommend always setting a file size limit to prevent malicious users from uploading huge files. Similarly, specifying “acceptable file types” helps you lock down your form to file formats that you want and expect. With the photography blog example in mind, you may want to limit file size to 1 MB (1024 KB) and acceptable file types to known image formats like JPG and PNG only.
A “file” form tag in Contact Form 7.
For the “file” form tag, we’ve configured the settings below.
Last but not least is Contact Form 7’s “submit” form tag. As you may have guessed, this form tag lets you generate a submit button for a contact form.
A “submit” form tag in Contact Form 7.
For the “submit” form tag, we’ve configured the settings below.
Label – Submit
ID Attribute – cf7-submit
Class Attribute – cf7-submit
These settings generate the shortcode below.
[submit id:cf7-submit class:cf7-submit "Submit"]
How to Structure a Contact Form with Form Tags
Now that we have all our form tags set up, it’s time to create the contact form. At this point, your contact form settings should look like the screenshot below. Take note of all the form tags we created above. With the form tags in place, you can use the [contact-form-7] shortcode to embed the form into a WordPress post or page.
Embed a contact form with the contact-form-7 shortcode.
In the WordPress editor, paste the shortcode into an empty block.
Add the Contact Form 7 shortcode to a post or page.
If you’re using the WordPress Classic Editor, you can paste the shortcode anywhere in the content editor.
Use Contact Form 7 with the WordPress Classic Editor.
You should now be able to see the contact form on the page where you added the Contact Form 7 shortcode. Here’s what our contact form with the settings mentioned above looks like. As you can see, Contact Form 7 automatically converts form tags into valid HTML that renders with the default CSS styles included with your WordPress theme.
A contact form created with Contact Form 7.
Our contact form in its current state is a good starting point, but it’s lacking one key feature. Form tags like “text”, “email”, and “URL” support placeholders, but other elements like “checkboxes” and “radio buttons” do not. Without proper labels, the checkbox and radio buttons won’t be very useful for visitors because they don’t have any context. Luckily, adding labels in Contact Form 7 is very easy!
How to Add Form Tag Labels in Contact Form 7
There are two ways to add labels to Contact Form 7 form tags. For the form tags below, you can simply wrap the form tag with a tag.
To add a label to this form tag, we can replace the form tag with the snippet below. Notice the additional instance of “Your Name” right after the opening tag.
Here’s what this change looks like on our contact form. In this case, the newly created label serves the same purpose as the placeholder. However, if we didn’t want to specify a placeholder within the form tag, then the label would help identify the purpose of a specific input box.
Add a label to a form tag in Contact Form 7.
For form tags that render multiple form controls like checkboxes, radio buttons, and dropdown menus, wrapping the form tag inside a tag results in an error. This happens because a tag is only supposed to be used with a single form control. The nature of checkboxes, radio buttons, and dropdown menu options involve multiple form controls, so they are incompatible with the default labeling solution.
For checkboxes, radio buttons, and dropdown menus, you had to add a use_label_element parameter within the shortcode. Take a look at the checkbox form tag example below where use_label_element is in bold.
Once the use_label_element parameter has been added, you can add a label directly above the form tag in the contact form editor.
Add a label to checkboxes, radio buttons, and dropdown menus in Contact Form 7.
For the sake of completeness, we’ve added labels to all the form tags in our contact form. You probably wouldn’t need to do this for a production site because some form tags already include placeholders. Regardless, we wanted to demonstrate how labels work.
Here’s what our contact form looks like:
A contact form with labels.
Configuring Mail Settings in Contact Form 7
Now that we’ve configured the structure of our contact form, it’s time to take a look at the email delivery settings in Contact Form 7. While the default mail delivery settings should work just fine for most sites, it’s still important to understand the various settings in case your site or use case requires a special configuration.
To access the mail delivery settings, go to the contact form editor and select the “Mail” tab.
Mail delivery settings in Contact Form 7.
Contact Form 7’s mail delivery settings let you customize the templates and parameters that are used to generate and send a notification to you after someone makes a form submission. If you use incorrect settings, it’s possible that you won’t be notified of form submissions. Thus, it’s important to test the form delivery after creating a contact form and changing settings.
Contact Form 7 lets you configure the following mail delivery settings.
To – the email address to send a notification to.
From – the email address to send a notification from.
Subject – the subject of the notification email.
Additional Headers – specify additional email headers like “reply-to”.
Message Body – the body of the notification email.
File Attachments – specify any attachments to include with the notification email.
Now, let’s go through each setting to get a better understanding of how they can impact mail delivery in Contact Form 7.
The “To” Field
Be sure to specify a real email address for the “To” setting. By default, Contact Form 7 will assign the email address associated with your WordPress user account to the “To” setting. If your WordPress email address is not valid, be sure to update it in your profile settings and change the email address in Contact Form 7 as well.
The “From” Field
The “From” setting should use the following format – Your Name . For our contact form mail settings, we’re using kinstalife <wordpress@kinstalife.com>.
By default, Contact 7 will fill in this field with wordpress@your-domain.com. You’ll want to make sure that this email address is a valid one because some WordPress hosts block outgoing email to invalid addresses. There are multiple ways to make this email address valid. You can either set up a dedicated email account for wordpress@your-domain.com or you can enable catch-all functionality at your email service provider. If you’re unable to set up this email address, we recommend changing it to a valid email address to avoid deliverability issues.
The “Subject” Field
The “Subject” setting can be used to specify a subject line for notification mails. By default, Contact Form 7 sets the subject as Site Name “[your-subject]” – the subject name in Contact Form 7’s default form template.
If you don’t have a form tag named “[your-subject]” in your form, be sure to change it to something else. For example, if you only have a form tag to capture a visitor’s name (e.g. [your-name]), you could change the subject line to You’ve Received a Message from [your-name].
The “Additional Headers” Field
Under “Additional Headers”, you can specify email headers like reply-to, CC, and BCC. By default, Contact Form 7 adds the following header – Reply-To: [your-email]. This header lets you reply to the email address specified in a submitted contact form.
The default reply-to header is fine if you’re using Contact Form 7’s default email form tag. If you’re not, be sure to change it to match the name of your email form tag. For our contact form, the name of the email form tag is “email-632”, so the reply-to form tag would have to be changed to Reply-To: [email-632].
The “Message Body”
Next up is the “Message Body”, which determines the body content of the notification email. Contact Form 7’s default template uses [your-name], [your-email], [your-subject], and [your-message] form tags, and looks like this:
From: [your-name]
Subject: [your-subject]
Message Body:
[your-message]
--
This e-mail was sent from a contact form on kinstalife (http://kinstalife.com)
Be sure to change these form tags if you’re not using them in your contact form template. Since the contact form we created collects a lot of information, we can set up the message body with additional form tags like so:
Hello Brian, you’ve received a message from [text-711] ([email-632]).
Website: [url-601]
Phone Number: Tel-842
Appointment Date: date-389
Message: textarea-795
Customize the message body for Contact Form 7 notification emails.
Contact Form 7 Mail Settings – File Attachments
If your contact form involves uploading a file, you can include the file with the notification email. In our contact form, we have a file upload form tag named “[file-658]”. Thus, we can add this form tag under “File Attachments” to ensure the file will be included with the email notification.
Include file attachments in Contact Form 7 notification emails.
Contact Form 7 Mail Delivery Issues
If you find that Contact Form 7 is not sending emails, there are a few things you can check before reaching out to a WordPress developer for assistance.
Check if your server is sending other types of emails. To test this, you can trigger another email delivery action by making a test comment on a blog post or submitting a password reset request on your WordPress login page. If you receive an email after performing one of these actions, then the issue is likely related to Contact Form 7’s configuration. If you do not receive emails, reach out to your host’s support team and let them know you’re having an issue with email delivery.
Make sure the “To” and “From” fields in your contact form’s mail delivery settings are configured correctly. For Contact Form 7 to work properly, both of these fields should be populated with real email addresses.
Contact Form 7 Form Submission Messages
Contact Form 7 lets you customize a variety of form submission messages. These messages display after a certain condition is met. For example, if a visitor forgets to fill in a required field, Contact Form 7 will display a “The field is required” message. For most use cases, the default messages should work just fine. However, if you want to customize the messages, you can do so by clicking on the “Messages” tab in the contact form editor.
Customize Contact Form 7 situational messages.
How to Secure Your Contact Form
As automated bots have gotten smarter and more pervasive over the years, spam has become a major issue for contact forms. Since contact forms are typically open to the public Internet, it’s fairly easy for web scrapers to detect them and fire off spam messages to your email inbox. Fortunately, there are various ways to ward off spammers and protect your contact form.
Secure Your Contact Form 7 with reCAPTCHA
If you’ve ever submitted a form on the Internet, you’re probably already familiar with reCAPTCHA, a technology developed by Google for identifying automated bot behavior. Older versions of reCAPTCHA (V2) required users to pass a puzzle or challenge.
The latest version of reCAPTCHA (V3) does not require any interaction from users. Instead, it transparently monitors user activity in the background to distinguish between human and bot visitors. Since Contact Form 7 supports reCAPTCHA V3, we recommend using this latest version because it provides a better user experience for visitors.
To set up reCAPTCHA, you’ll first need to generate an API key. To do this, log in to your Google account and go to the reCAPTCHA setup page.
Register a new site for reCAPTCHA integration.
Go through the registration form to create your reCAPTCHA.
Label – Specify a label of your choosing.
reCAPTCHA Type – Contact Form 7 supports reCAPTCHA v3, so select that version.
Domains – If your site uses a root domain, add the non-www and www version of your domain. If your site uses a subdomain, just add the subdomain.
Owners – The email address associated with your Google account will be added as an owner by default. Feel free to add additional email addresses if needed.
After you’ve filled in all the options, click Submit. You’ll then be presented with your site-specific “site key” and “secret key”. Be sure to keep these keys somewhere safe because you’ll need to add them to Contact Form 7.
Google reCAPTCHA site and secret keys.
Next, click on “Contact” in your WordPress dashboard sidebar, and click Integration. Select the reCAPTCHA option, and paste your site key and secret key into their respective fields. Finally, click Save Changes to finalize the reCAPTCHA integration.
Configure reCAPTCHA in Contact Form 7.
After configuring reCAPTCHA in Contact Form 7, you’ll see a reCAPTCHA logo in the lower right corner of your contact form page. This means reCAPTCHA is active and protecting your contact form from spam submissions.
WordPress contact form protected by reCAPTCHA V3.
Secure Your Contact Form with Cloudflare (Optional)
If you use Cloudflare to protect your site, you can set up a special page rule for your contact form page to reduce spam contact form submissions.
Protect your contact form with Cloudflare.
To add a page rule, click on the “Page Rules” tab, and use the following settings to help secure your contact page.
If the URL Matches – *your-domain.com/your-contact-page/*
Browser Integrity Check – On
Security Level – High
Cloudflare’s “Browser Integrity Check” feature analyzes HTTP headers. If it detects an HTTP header that’s commonly used by automated bot and spammers, it denies the request to your site. Setting the “Security Level” to high will challenge all visitors that exhibited malicious behavior within the past two weeks.
By limiting these settings to your contact page with the URL match rule, other pages on your site will be unaffected by these page rules. We recommend this configuration because normal “read-only” pages on your site do not typically require a heightened security level setting.
Summary
Contact Form 7 is the most popular contact form plugin and for good reason! It can be used to create everything from basic contact forms, to question-answer quizzes, to complex forms that support file attachments and dropdown menus.
Best of all, it comes with built-in reCAPTCHA support to help secure your contact form against spammers.
Do you use Contact Form 7 on your WordPress site? If not, what’s your preferred choice? Let us know in the comments section below!
If you enjoyed this article, then you’ll love Kinsta’s WordPress hosting platform. Turbocharge your website and get 24/7 support from our veteran WordPress team. Our Google Cloud powered infrastructure focuses on auto-scaling, performance, and security. Let us show you the Kinsta difference! Check out our plans
