Even if you’re just an amateur and have only just started an online portfolio it’s always a good idea to have a contact form on your website. Someone out there might find you and like your style. The easiest way for that person to get in touch with you is by using a contact form. After all, not everyone uses Twitter or Instagram. That is why I’ll be showing you how you can build and integrate a contact form using the WordPress plugin Ninja Forms.
I used to be a big proponent of Contact Form 7, one of the oldest and most-used contact form plugins out there. To this day I still like some of its aspects. There’s no form builder involved and everything is done using simple code. This makes styling your form a breeze and there are practically no limits to the customization.
But Contact Form 7 does have one big downside and that is related to its age. It is slow. And it’s not just the contact form that is slow. Contact Form 7 has a tendency to slow down your whole website. There are ways of optimising it but to be honest that seemed too much of a hassle to me.
So I set out to find a new contact form WordPress plugin. The one I finally settled on was Ninja Forms. Here’s why:
- It’s free. At least for how I use it. I didn’t want to pay for yet another plugin, especially one as simple as a contact form.
- It stores submissions. So if your personal spam filter were to block a message you could still view it in the backend.
- It’s lightweight. My pagespeed increased quite a bit when switching from Contact Form 7 to Ninja Forms.
- It allows for basic styling. While Ninja Forms does sell a premium option that allows for more customisation, the free version offers enough options for me.
- It supports reCAPTCHA. As soon as your website gains any kind of traction, it will attract bots and spammers. This integration takes care of them.
With that out of the way let’s take a look at how to set up Ninja Forms on a WordPress website. As with any other plugin you simply have to search for it in the plugins, install it, and activate it. An option named Ninja Forms should now appear in your WordPress backend.
Next we’re going to take a look at the Ninja Forms settings. You’ll want to set up reCAPTCHA for your forms. I suggest you do this now and not before it’s too late. Simply click on the link and follow the instructions on the Google site it takes you too. Be aware that you want reCAPTCHA version 2 and not version 3 for this, as Ninja Forms doesn’t yet support version 3. Once done simply copy and paste your site key and secret key into the appropriate fields.
Then you’ll want to scroll down a bit and select none from the dropdown labelled opinionated styles. This will tell the form to use the style of your existing theme and not it’s own style. All that’s left to do is to save the settings.
Now we get to creating our contact form. Go to the Ninja Forms dashboard and you’ll see they’ve already provided us with a basic contact form. Perfect! We can build on that. Open up the contact form by clicking on its name.
There’s one setting I like to disable under the advanced settings. And that is the option to display the form title. My reasoning is that I want to style my contact page using the WordPress page editor and that includes the contact form title.
With that out of the way we can publish our contact form and copy the shortcode from the dashboard. Paste that shortcode into your contact page using a shortcode block, hit update and take a look at your brand spanking new contact page. Alternatively, and perhaps easier than using the shortcode, you can also embed your contact form using the ninja form block. This has the added advantage that you can see what your contact form looks like in the page editor.
There is one thing missing from my form though and that is the reCAPTCHA field. To add that I’m simply going to head back into my contact form, click on the plus in the bottom right-hand corner and drag a reCAPTCHA button above the submit button. You can now publish your contact form and head back to your contact page. And there is our reCAPTCHA field.
If you set up WordPress using your personal email address but don’t want messages from this contact form to go into that inbox, you can simply head back into the settings and change the email address under Email notification. Which is found under the tab Emails & Actions. After changing the settings don’t forget to hit publish again.