How to Create a Secure Contact Form in WordPress

Do you want to create a secure form in WordPress?

Forms allow users to submit information on your website. However, they can also be used by hackers to steal information, attack websites, and install malicious code.

In this article, we will show you how to create a secure contact form in WordPress. We’ll explain how to ensure secure WordPress form submissions on your site.

Here is a summary of what we’ll cover in this article.

• What you need to secure WordPress forms
• Creating a secure contact form in WordPress
• Securing WordPress contact form email notifications
• Securing WordPress forms against spam and DDoS attacks
• Restricting WordPress form access (password protected, members only, and more)
• Keeping your WordPress site secure

What You Need to Secure WordPress Forms?

To make your WordPress contact form secure, you need two things.

• A secure WordPress contact form plugin
• A secure WordPress hosting environment

Let’s start with the form plugin.

1. Choosing a Secure Contact Form Plugin

A secure contact form plugin allows you to save form entries securely on your website. It also allows you to use secure email methods to deliver your form notifications.

We recommend using WPForms, which is the best WordPress contact form plugin on the market.

It comes with a tons of powerful features to secure WordPress forms and protect your website from spam, hacking, and data theft.

There is also a free version available called WPForms Lite. It is equally secure but has limited features.

2. Choosing a Secure Hosting Platform

Choosing the right WordPress hosting is crucial for the security of your website and your contact forms.

We recommend using Bluehost. They are one of the largest hosting companies in the world and officially recommended WordPress hosting provider.

More importantly, they are offering WPBeginner users free domain and SSL certificate (you’ll need it for better WordPress form security).

You can also use other popular WordPress hosting companies like SiteGround, WP Engine, HostGator, etc because they all offer free SSL.

What is SSL? And why do you need it to secure WordPress forms?

SSL stands for Secure Sockets Layer. It switches your WordPress site from HTTP to HTTPs (secure HTTP). You’ll notice a padlock icon next to your website indicating that it is using SSL protocol to transfer data.

SSL protects your information by encrypting the data transfer between a user’s browser and the website. This adds WordPress form encryption support which makes it harder for hackers to steal data.

For more details, see our article on how to get a free SSL certificate for your website.

That being said, now let’s take a look at how to create a secure contact form in WordPress.

Creating a Secure Contact Form in WordPress

Creating a secure WordPress contact form is easy if you already checked the above-mentioned requirements. See our tutorial on how to quickly add a contact form in WordPress if you haven’t already done so.

Next, is to add more security layers to your WordPress contact form. This helps you keep form data safe and also helps you reduce spam and improve your website performance.

The following are some of the most common ways someone can steal information or abuse your WordPress forms.

First, they can sniff the information as it is submitted by a form. You can address this by using a secure WordPress hosting platform and enabling SSL encryption on your website.

The next part is when your WordPress form sends notification emails. Business email services are not part of WordPress, and if you are not properly sending those emails, then they can be insecure.

Lastly, your WordPress forms can be abused to send spam messages and DDoS attacks. If you are using a custom WordPress login form, then hackers can use brute force attacks to login to your WordPress site.

Now let’s address each one of them to make your WordPress forms more secure.

Securing WordPress Contact Form Email Notifications

As we mentioned earlier, insecure emails can be spied upon and are unsafe. There are two ways you can handle form notification emails.

1. Don’t send form data via email notifications

The first thing you would want to consider is not sending form data via emails.

For instance, when someone submits your contact form, you only get an email alert that someone has submitted form and not the form data itself.

WPForms comes with a built-in entry management system that stores your form data in your WordPress database. You can simply go to WPForms » Entries page to view all form submissions.

Note: You’ll need to upgrade to the paid version of WPForms for entry management features.

2. Send secure WordPress form notification emails

For some users, sending form notification emails is necessary for their business.

For instance, if you have an online order form, a donations form, or a payment form, then you may need to send email notifications to your users.

For this, you need to set up a proper SMTP service to securely send emails.

SMTP stands for Secure Mail Transfer Protocol. It is the industry standard to securely send emails on the internet.

We recommend using G Suite which allows you to create a professional business email address. Powered by Google, it allows you to use the familiar Gmail interface to send and receive emails.

However, if you’ll be sending a lot of emails, then we recommend using Sendinblue, Amazon SES, or any of the reliable SMTP service providers.

Next, you need to connect your email service to WordPress so that all your WordPress form notifications are sent using your secure email connection.

To do that, you need to install and activate the WP Mail SMTP plugin. It works with any SMTP email service and allows you to easily send WordPress emails securely.

For detailed instructions, see our guide on how to set up WP Mail SMTP in WordPress.

Securing WordPress Forms Against Spam and DDoS Attacks

Your website forms are publicly accessible. This means anyone can access and fill them. We’ll cover restricting form access to specific users in the next step, but for this step we will address public forms.

When your form is accessible by anyone on the internet, it can become a target for spammers and hackers. While spammers try to use your form for fraudulent activities, hackers may try to use it to gain access to your website or even bring it down.

Luckily, WPForms comes with several spam-prevention features. It also automatically enables honeypot anti-spam technique on all forms.

Honeypot basically obscures form fields from automated spambots. However, it is not the most effective way to protect online forms.

If you suspect that your forms are abused or under attack, then you can deploy the following spam protection tools.

1. Enable Google reCAPTCHA in Your Forms

WPForms comes with Google reCAPTCHA support. Simply go to WPForms » Settings page and click on the reCAPTCHA tab.

Google offers three types of reCAPTCHA tools. We recommend using checkbox reCAPTCHA v2 because it is more user-friendly.

You’ll need site key and secret key to enable reCAPTCHA on your site. Simply go to the reCAPTCHA website and click on the ‘Admin Console’ button at the top.

Next, you can go ahead and your website details. Provide a label for your site and then choose reCAPTCHA v2 with ‘I am not a robot’ checkbox.

Click on the Submit button to continue and you’ll see the API keys.

Go ahead and copy these keys and paste them in WPForms settings page. Don’t forget to click on the ‘Save Settings’ button to store your changes.

You can now edit your form and add the reCAPTCHA field to your form.

You’ll see a notification that reCAPTCHA is now enabled for your form. You can go ahead and save your form.

If you haven’t already added form to your website, then you can simply edit the post or page where you want to display the form and add the WPForms block to the content area.

Simply select your form in the drop down menu and WPForms will load a preview of your form. You can now save your post or page and visit it in a new browser tab to see your form with the reCAPTCHA field in action.

2. Enable Custom Captcha for Your WordPress Forms

If you don’t want to use Google reCAPTCHA, then you can use your own math quiz or questions with WPForms Custom Captcha addon.

Note: You’ll need pro version of the plugin to access custom captcha addon.

Simply head over to WPForms » Addons page to install and activate the Custom Captcha addon.

After that, you can edit your contact form and add the Captcha field to your form.

By default, it adds a random math question. You can change that to add your own custom captcha by changing the captcha type to text.

You can now save your form, and it to a post or page using the WPForms block.

You can now visit your post or page to see the custom captcha in action.

Restricting WordPress Forms Access to Certain Users

Another way to protect your WordPress forms is to restrict access to logged-in members, or through a unique form password.

WPForms comes with a Form Locker addon that lets you enable various form permissions and access control rules.

With form locker you can:

• Password Protect Forms – this requires users to enter a password to submit the form. This added protection helps decrease the number of unwanted form submission.
• Close Form Submissions After Specific Date / Time – this is great for any kind of application forms or other time-sensitive forms.
• Limit the number of total submissions – this is great for contests or giveaways. Once the max number of entries are in, the WPForms will automatically close the form.
• Limit one entry per person – if you want to avoid duplicate submissions, then you will love this option. This is very useful for scholarship applications, giveaways, etc.
• Restrict Forms to Members Only – you can restrict your forms to logged-in users of your WordPress site. This is great for membership sites or businesses who want to restrict support to paid customers only.

You can access the Form Locker settings inside the Form Builder Settings panel:

Keeping Your WordPress Site Secure

The security of your WordPress forms depends on the security of your entire WordPress website. With some simple steps, you can strengthen your WordPress website security.

We recommend using Sucuri, as the best WordPress security plugin on the market. It comes with a website firewall that blocks any suspicious activity even before it reaches your website.

For more practical tips, see our complete WordPress security guide for beginners.

We hope this article helped you create a secure contact form in WordPress. You may also want to see our guide on how to create an email newsletter and our list of must have WordPress plugins.

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

The post How to Create a Secure Contact Form in WordPress appeared first on WPBeginner.

July 02, 2020 at 05:23PM

How to Setup Delivery Time Slots in WooCommerce (Step by Step)

Have you ever needed to set up delivery time slots for your online store?

Creating delivery time slots allows you to keep up with customer demand for more convenient delivery. At the same time, it also allows you to create a more manageable schedule to match your delivery capacity.

In this guide, we’ll share our step by step process on how to easily set up delivery time slots in WooCommerce.

What are Delivery Slots and Why Set Them up in WooCommerce?

Delivery slots allow customers on an online store to select a specific time and date ‘slots’ for delivery.

This convenient delivery model allows customers to know exactly when they’re going to receive their goods, which in turn increases customer satisfaction and confidence in your brand.

For store owners, offering specific delivery time slots for customers can drastically reduce non-deliveries. As a result, you can save money on delivery costs and make your store more profitable.

On a smaller scale, offering delivery or collection slots to customers allows store owners to manage their schedule and optimize delivery times. They can complete more orders quickly and deliver them on-time.

With that in mind, let’s take a look at how to easily add delivery or collection time slots in WooCommerce.

Creating Delivery Time Slots in WooCommerce

For this tutorial, we’ll be using the WooCommerce Delivery Slots plugin. It is a powerful plugin that adds the essential date and time-based features to the default WooCommerce delivery functionality.

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

Upon activation, you need to visit WooCommerce » Delivery Slots page in your WordPress dashboard.

Next, you need to select the General Settings tab. From here you can change where to display the date and time fields and which shipping methods to offer.

After that, switch to the Date Settings tab. On this screen, you can select the days of the week you’ll be offering delivery slots. You’ll also be able to add a maximum number of orders per day, set additional fees for same-day or next-day delivery, and more.

Now you can switch to the Time Settings tab to create your delivery time slots.

Make sure to ‘Enable Time Slots’ is checked and scroll down to the ‘Time Slot Configuration’ section to customize.

Here you’ll be able to fill the Slot Duration and Slot Frequency fields to dynamically generate slots. You can also leave them empty to create a single time slot.

For this tutorial, we’re creating time slots every 30 minutes from 6 am – 10 am every day of the week. We’re also creating premium time slots every 30 minutes from 10 am – 12 p.m noon on Thursdays and Fridays which costs an extra fee.

Tip: WooCommerce Delivery Slots allows you to fully customize your time slots, so you can add additional fees for certain slots, offer slots only for specific shipping methods, and set the maximum number of orders per slot.

Once you’re done creating your delivery time slots, go ahead and click Save Changes.

On the checkout page, your customers will now be able to select a delivery date and time slot to suit them.

Once the customer has selected their time slot and purchased their items, they’ll be presented with an ‘Order received’ page after checkout.

This page contains a confirmation of their order, and the time slot they selected which will also be confirmed in their order email.

Tip: Make sure your WooCommerce email notifications are working. See our guide on how to fix WordPress not sending emails issue to set up and test your email notifications.

As the store owner, you will be able to see the selected delivery date in the orders overview and details. You can also go to WooCommerce » Delivery Slots » Deliveries page to see all deliveries.

Creating a Reservation Table in WooCommerce

The WooCommerce Delivery Slots plugin also allows you to enable delivery reservation. This enables customers to reserve a delivery slot in advance.

Simply go to WooCommerce » Delivery Slots page and switch to the ‘Reservation Table’ tab.

From here you’ll be able to adjust the settings for your table including setting limits on how long a reservation lasts before a purchase is made and changing its style to suit your store.

Once happy, click Save Changes and copy the shortcode [jckwds] at the top of this settings page.

You can now add this shortcode to any page in your site to allow customers to reserve their delivery time slot before purchase.

We hope this article helped you learn how to easily set up delivery time slots in WooCommerce. You might also like our list of the best WooCommerce plugins for your store and best email marketing services to grow your sales.

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 Setup Delivery Time Slots in WooCommerce (Step by Step) appeared first on WPBeginner.

July 01, 2020 at 05:00PM

How to Create a Custom Instagram Photo Feed in WordPress

Recently, one of our readers asked if it was possible to add a customized Instagram photo feed to their site?

Specifically, they wanted to customize the Instagram photo feed to only show select photos instead of all photos from their profile.

In this article, we’re going to show you exactly how to create a custom Instagram photo feed in WordPress.

Why Include an Instagram Feed on Your WordPress Site?

Adding an Instagram feed on your WordPress site lets you add fresh content without a lot of work. It also encourages readers to follow you on Instagram.

Instead of adding photos manually to your site, you can simply upload them to Instagram, and they’ll appear on your website. You can also include other people’s photos by using a hashtag feed.

This could be a great way to show people using your products, providing valuable social proof that could help you make more money online.

How to Create a Custom Instagram Photo Feed in WordPress

To set up a custom Instagram photo feed on your site, you’ll need to install and activate the Smash Balloon Instagram Feed plugin. For more details, see our step by step guide on how to install a WordPress plugin.

This is the premium version of the free Instagram feed plugin which is used by over 1 million websites.

After you’ve installed the plugin, go to Instagram Feed » Settings page in your WordPress admin and click the License tab to enter your license key. You can find this in your Smash Balloon account.

Don’t forget to click the ‘Save Changes’ button at the bottom after activating your license key.

Once you’ve activated your license, go to the ‘Configure’ tab and click the ‘Connect an Instagram Account’ button.

You’ll then see a popup asking you to choose whether you’re using a Personal or Business Instagram profile.

If you simply want to display a feed of your photos, you can use a Personal Instagram account. However, if you want to show a hashtag feed, you’ll need a Business Instagram account.

Tip: Don’t have a Business Account? To convert your Personal Instagram account into a Business Account, you can follow Smash Balloon’s step by step instructions.

It’s free to create a Business Account with Instagram. You can switch back at any time in the Instagram app.

When you click the ‘Connect’ button in the WordPress dashboard, you simply need to follow the prompts and connect your account.

After that, you’ll see your account listed next to the ‘Instagram Accounts’ like this:

Note: You can connect more than one account. Later in this tutorial, we’ll look at how to show several different Instagram feeds on your site.

Showing a Feed of Your Instagram Photos in WordPress

If you want to keep your WordPress site looking fresh and up to date, it’s easy to add a feed of your latest Instagram photos. We’ll take a look at the basic method first, then cover how to customize your feed.

First, click the ‘Add to Primary Feed’ button next to your connected Instagram account:

After that, you can open up a post or page where you’re going to add your feed. Alternatively if you prefer, you can add it in a sidebar widget.

We’re going to create a new page under Pages » Add New for our feed.

Click the (+) symbol to add a new block, then select the ‘Instagram Feed’ block from the Widgets section:

Your Instagram feed will be instantly added to your page, with a Follow button:

If you are using the classic editor, then simply enter the shortcode [instagram-feed] where you want your feed.

You can use the shortcode or the Instagram Feed widget to add your Instagram posts in your sidebar or footer, too. Just go to Appearance » Widgets and drag the Instagram Feed widget to wherever you like.

Customizing Your Instagram Feed Style in WordPress

By default, your Instagram photos will be displayed in a four column grid. To begin with, users will see 20 photos from your account, but they can click ‘Load More’ to see additional photos.

The Instagram Feed plugin gives you full control over these settings.

To change how your Instagram Feed looks, go to Instagram Feed » Settings » Customize.

Here, you can change the width and height of your feed, switch the layout, change the number of photos, columns, and more.

To change the Layout, simply click on the option you want. We’re going to use a Highlight layout for our Instagram photos, with every 3rd photo highlighted.

You can also choose how many columns to split the photos into, and how many to display to begin with. We’ve chosen to have 6 photos in 3 columns.

Make sure you click the ‘Save Changes’ button at the bottom of the screen after making any changes.

Here’s how the Instagram feed now looks on our website:

Displaying a Hashtag, Tagged, or Mixed Instagram Feed in WordPress

Instagram Feed defaults to showing the most recent posts from your connected Instagram account.

In some cases, you might want to show something different. For instance, you might want to display Instagram posts from any account so long as they use a specific hashtag. This could be a great way to showcase photos from an event or conference.

You can change your feed type by going to Instagram Feed » Configure. Under Feed Type, you can switch to a hashtag or tagged feed. You can click the (?) icon next to an option for more information.

We’re going to switch to a hashtag feed by using the Public Hashtag option. We’ll order it by most recent posts:

Note: You can’t create a mixed feed here. A mixed feed is one that combines different types, such as photos from a user account plus photos from a hashtag. You can follow the instructions in the next part of the tutorial to create a feed like that.

Here’s how the feed now looks on our site:

Creating Multiple Instagram Feeds in WordPress

What if you want to include several different Instagram feeds on your WordPress site? That’s possible as well with few simple configurations.

First, go to Instagram Feed » Settings and click on the ‘Display Your Feed’ tab.

You’ll see a number of different settings that you can use within the [instagram-feed] shortcode.

Tip: If you only want to create one feed for your site, then you can change these settings under the Configure tab, as shown above.

If you have several user accounts connected, you can use [instagram-feed type="user" username="wpbeginner"] to specify an account. Change wpbeginner to the username you want.

You can also choose to create feeds based on hashtags here. In this case, you’ll need to use [instagram-feed type="hashtag" hashtag="#wpbeginner"] where #wpbeginner is your chosen hashtag.

Another option is to create a feed that has tagged a specific user account. This option is only available if your connected Instagram account in the plugin settings is a business account.

You can even use shortcodes to create a mixed feed that combines different feed types, such as your Instagram user account plus all photos with a specific hashtag.

If you’re using the Instagram Feed block in the WordPress visual editor, you don’t need to create the whole shortcode. You can simply add your shortcode settings in the block’s settings:

Make sure you click the ‘Apply Changes’ button after making changes here.

Other Popular Instagram Feed Settings in WordPress

You might be perfectly happy with the default display of your photos, as Instagram Feed does a great job without any customizations.

However, there are some common tweaks you may want to make depending on how you want to display your Instagram photos.

For instance, you might want to display just the photos without the captions. This is especially helpful if you’re adding the photos in a fairly narrow sidebar:

You can switch the captions off by adding showcaption="false" to your shortcode. Then, your photos will display like this:

You may want to filter posts if you’re using a hashtag feed. For instance, you might want to avoid posts that mention one of your competitors or posts that use rude words in the caption.

You can use excludewords="competitor, rude" in your shortcode. This will exclude any posts that use any of the words within the list of comma-separated words. Change “competitor” and “rude” to whatever words you want to exclude.

Another option you may want to use is to change the text of the Load More button. You can do this adding buttontext="See More Photos" to your shortcode. Simply replace “See More Photos” with the text you want to use.

There are lots of other settings you can use. Smash Balloon’s Instagram Feed plugin lets you tweak everything about how your Instagram photos display on your site.

If you want to see all the possible settings, just go to Instagram Feed » Settings » Display Your Feed to get the full list:

We hope this article helped you learn how to create a custom Instagram feed in WordPress. You might also want to see our comparison of the best WordPress giveaway plugins to grow your social following, and best email marketing services to increase your website traffic.

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

The post How to Create a Custom Instagram Photo Feed in WordPress appeared first on WPBeginner.

June 30, 2020 at 05:30PM