How to Add a Contact Form to WordPress

how to add a contact form to wordpress

The most important piece of your public-facing website is the contact form.

If you are an online business, then it’s vital that your customers (or potential customers) can easily contact you for support or even to sign up.

Luckily, having a WordPress website makes it super simple to easily add a contact form to your website. With the power of plugins and a little bit of setup, you can install a contact form on your WordPress website in as little as 5 minutes.

In this article, we are going to show you how to successfully add a contact form to your WordPress website.

Why Install a Contact Form?

If you sell anything online, then you must have a contact form on your website.

A contact form makes it easier for anyone to reach you include clients, customers, partners and anyone else trying to get in touch with your business.

If you don’t have a contact form on your WordPress website, then I would highly suggest setting up one right now so you can easily be contacted.

Adding a Contact Form to WordPress

Below is a step by step guide to setting up a contact form on your website.

Step 1: Install Ninja Forms Plugin

There are a ton of great contact form plugins for WordPress but our favorite is Ninja Forms. It’s free to use and has some very powerful features that can streamline your contact system.

Head to your WordPress Admin area and click the Plugins tab on the left pane. Choose ‘Add New’ Plugin and then search for ninja forms in the plugin search box.

ninja forms install plugin

Once installed, there will be a new tab on the left called ‘Ninja Forms’. Click the tab to see your Ninja Forms dashboard.

ninja forms tab

This is where you can view your created forms, add new forms, see form submissions and Ninja Form’s general settings. Head to the dashboard page to create a new form.

Step 2: Create a Form

The dashboard will show you all of your created forms, their shortcode, date created and a button to add a new form. By default, there will already be a Contact Me form, but we are going to create a new one for examples-sake.

ninja forms add new form

When you click ‘Add New’, you will see a number of different template options you can use, but we are going to choose ‘Blank Form’ to create a form from scratch.

blank form ninja forms

On the next page, you will see a blank space on the left where you can drag form fields from the right to add to your form.

ninja forms build form

Simply drag the fields over to the left pane in order to add them to your form, based on what details you want to collect in your contact form.

To update the settings for each form field, hover over the field on the left and click the settings icon.

field settings ninja forms

This is where you can set the field as required, change the field label, design settings and more.

In order to hide the label of the form, you can click the Advanced option and then choose ‘Hidden’ on the label position dropdown.

hide label

This will hide the label so you can add a field placeholder to save space and create a more user-friendly and smaller form. Next, go to the Display settings and add ‘Name’ to the Placeholder.

ninja forms add placeholder

Now your form field will have a placeholder inside the field with no label to save space and create a better UI.

ninja forms field

Then just add all of the other form fields you want to add and update the settings for each of the fields.

Once you have added all of the fields you want on your contact form, you can publish your form and it will generate you a shortcode that you can add anywhere throughout your website.

Step 3: Add Form Shortcode

Your shortcode for your form should look something like this:

ninja forms shortcode

Now all you have to do is add this shortcode to your Contact page.

If you are using a drag and drop page builder like Visual Composer, then it’s likely it will have the option to easily add your Ninja Form. Or you can simply paste your shortcode in the WordPress WYSIWYG editor and it will display the newly created form.

contact us form example

The final step should be to test your form to make sure it works.

Step 4: Test Form

In order to test the form, simply fill in the fields and click ‘Submit’.

It should send your WordPress admin email notification of a new form filled out as well as send a confirmation to the email you added in the contact form.

Step 5: Add Integrations

Now that the form is working, you will want to set up what you want to do with the contact form submissions.

There are a number of different options you can use to send the data to your CRM or even a WebHook. In order to add an integration, go back to your form and click the ‘Emails & Actions’ tab to choose what to do when someone fills out the form.

wordpress ninja forms options

Another great thing about Ninja Forms is that you can connect almost any CRM, service, or action after someone fills out the form.

Here are some of the services you can connect to your Ninja Forms:

  • Google Sheets
  • Google Calendar
  • Excel
  • Infusionsoft
  • Hubspot
  • Zendesk
  • Mailchimp
  • Freshbooks
  • MySQL
  • Hubspot
  • Zapier

Depending on your process and what you want to do with the submissions, you can add the relevant integration and your form should now send the data to the chosen services upon submission.

Wrapping Up

In conclusion, its very simple to add a robust contact form to your WordPress website with the Ninja Forms plugin. There are plenty of other great WordPress contact form plugins that you can use if you are not comfortable using Ninja Forms.

Either way, its vital that you have a contact form on your WordPress site that is easily found and allows anyone to send your business a message online.

Leave a Reply

Your email address will not be published.