How to Build a Website Step 7: Create Contact Forms on Your Website

You want people to be able to contact you from your website. In the old days, when I first started building sites with straight HTML, I would simply put my email address blatantly on the website.

Boy, was that a mistake! My inbox was flooded with all sorts of crazy and oftentimes vulgar emails.

There’s a lot of malicious activity that’s out there, and there are bots out there which will scan websites to find security holes, personal contact information, and other protected information. We hear about security breaching all the time, right?

So, if you publish your email directly to a website, be prepared to receive tons of spam on a constant or at least consistent basis. And, I’m talking about some of the worst kind of spam out there.

“Well, what if I only hyperlink my email and hide the text from public view?” Here’s the thing, bots crawl the code of the site. That means that they will see that “mailto:” hyperlink anyway.

To protect you from this kind of intrusion, we really should use web forms.

There are several ways you can do this:

1. You can code forms from scratch using Javascript – been there, done that, don’t recommend it unless you are very confident in your coding ability including doing automated checks on conditions before submitting (i.e. that an email is actually an email).
2. You can use a third-party form builder – I really actually like this option sometimes. FormSite is a great tool for this, if you can afford it.
3. You can use a WordPress plugin – Now you’re talking! There are a few plugins I regularly use depending on budget and requirements:
   1. WP Forms – this is a great little plugin, and it’s free. The free version is somewhat limited. But, you can also pay for a yearly subscription and get more features unlocked including storage, custom fields, and other elements.
   2. Contact Form 7 – this is one of the oldest WP plugins out there that’s still updated and supported. It’s customizable, it’s pretty easy to set up (though you do need to know a little code), and it can integrate with some other systems such as Constant Contact and Flamingo (a plugin that stores your form submissions in WordPress).
   3. Divi Theme Form Builder – I’ve used this with some success, but I’m not a huge fan. It looks great, but the information isn’t stored anywhere. There are some third-party plugins you get to help with this, though.
   4. Gravity Forms – this is the one I’ll be using. It’s a premium plugin which means you have to pay for it. But, it offers a lot of flexibility including the ability to take payments, store submissions, and integrate with other systems.

To build a form, have and idea of what kind of information you want to gather. I recommend not asking any more than 5 required data points. Each form should minimally have:

• First Name – text box: required
• Last Name – text box: required
• Email – email text box: required

But, other elements can be phone numbers, text areas (for longer messages), dropdown pick lists, multi-select checkbox pick lists, radio button lists, and even hidden fields (i.e. the name of the page where the form was found).

Sending your form responses via email

You want to be sure that your form submissions make it to your inbox. WordPress and the plugins I mentioned above allow you to send using PHP. But, that’s not always reliable. So, you may want to consider using a plugin called Easy SMTP. SMTP is Simple Mail Transfer Protocol. This is used to sent email from your email service provider out to other inboxes. Most of these services allow you to use Gmail SMTP. But, I prefer to use the SMTP from the hosting provider you have.

1. Login to your host.
2. Go to your email section. In SiteGround, you’ll navigate to your website section and use the tools in the right sidebar to get to email.
3. Create a new email address such as yourname@yourdomain.com. Set a password, and set your box to be unlimited in size. Save it.
4. Go to the email client setup area (this is where you would go to get the information you need to set up Outlook or your mail phone app).
5. You should be able to find the SMTP information including the username (usually your email address), the hostname (usually mail.yourdomain.com or webmail.yourdomain.com), and the port number.
6. Keep that window open, and in another window open the Easy SMTP plugin on your site.
7. Input the information for your custom SMTP, and you should be all set.

When you are setting up your forms, make sure that you are using an email you created for your website with your domain as the sender. Don’t use a Gmail address or something like that… you’re sure to go to SPAM if you did that.

reCAPTCHA

To prevent SPAM messages and bot attacks to your forms, it’s a great idea to set up Google reCAPTCHA. There are plugins available for this for WordPress depending on your form of choice. There are instructions in the plugin to help you set up the connection to reCAPTCHA. I’m not going to go through those in this tutorial only because there are secret keys that shouldn’t be shared.

Once you have reCAPTCHA installed you’ll be pretty safe and secure. You might still from time to time get someone who will post something stupid on your form, but at least it’s not a ton of emails daily.

Thank-You Page

While a thank-you page isn’t necessary… most forms will display a thank-you message… I think that having a thank-you page is a good idea. It allows you to give them another call-to-action or at least an opportunity to stay on the site and further engage with you.

You can build a thank-you page exactly as you build any other static web page on your site at the Pages part. Publish the page and view it live. Copy the URL of the page. Then, you can go to your form and you can input the URL where it asks you if you want to send them to a custom thank-you page. Contact Form 7 requires an additional plugin for this functionality.

Thank-You Email

You may want to acknowledge receipt and give a call-to-action to the person who filled your form with an automated email. Many form builders offer that as a default option. You can build a text email or an HTML email straight in the system (depending on the plugin).

Yeah, forms aren’t the easiest things in the world, and you want to test them thoroughly. However, they are really one of those must-have functions on your website.