A contact form is one of those little things that every website should have. A big part of running a successful online business is doing collaborations and communicating with your audience. Without a simple way for people to contact you, those things become much more difficult.
Luckily, it’s easy (and free) to add a contact form on WordPress. There are several plugin choices, but here at Coded Creative we’re fans of the Ninja Forms plugin. There are paid add-ons for this plugin, but none are needed if you’re looking for a simple way for readers to reach out.
[Tweet “Learn to add a simple contact form on your WordPress blog for free!”]
How to add a contact form on WordPress
To start, go to Plugins > Add New and search for “Ninja Forms”. Install and activate the first result by The WP Ninjas.
After the plugin is activated, click Forms from your WordPress menu, right under Pages and Comments.
You’ll then be brought to the main page of Ninja Forms, where you’ll see a “Contact Me” form already made. This has most of what you need, but requires some customizations. Click Contact Me to be brought to the settings for that form.
You’ll see that the premade form has fields for Name, Email, Message, and a Submit button. You can click any of the premade fields to edit the name, whether or not the field is required, or where the label for that field appears.
Add a new field
Let’s go over an example of adding a field for a website address.
To add a new field to your form, click the Plus button in the bottom-right corner.
There are some premade options available in the User Information Fields section, but since there isn’t an option available for a website address, click the Single Line Text option in the Common Fields section.
That will add the new field to the bottom of the fields you already have on your contact page. To reposition it, simply click and drag it to where you’d like it to appear.
Then, click on the new field to bring up the options for you to edit. Change the Label field to something like “Website” and if you’d like the field to be required you can click the Required Field toggle button.
Repeat these steps for any additional fields you’d like to add.
Create placeholder values
We like to have all the labels for our contact form appear inside of the fields themselves (see our form for an example) so we need to set a placeholder. To do the same, click the Name field and set the Label Position to Hidden.
Next, click Advanced and enter the placeholder value you’d like to appear inside of the Placeholder field.
Repeat those steps for each of the form fields you add.
Set form options
After your form is finished you’ll want to double-check the pre-filled actions from Ninja Forms. To do that, click the Emails & Actions tab at the top of the screen.
We recommend leaving these options enabled. The one you may want to turn off is the Email Confirmation option. If you don’t want those who submit a contact form to get an email copy of their submission you can toggle this option off.
Other than that, you’ll want to check the Email Notification settings to make sure everything is set up correctly to email you once a form is submitted. To do that, click the Email Notification row.
If you deleted any of the default fields, you may need to make some edits here. As you can see, it’s pulling from the Name, Email, and Message forms to create an email. Clicking the gray icon that looks like a notebook will bring up a list of options you can use if you did delete any default fields.
The most important thing to check here is that the To setting is correct. If you’re not sure that the system administrator email address is correct, you can always delete the default setting and replace it with your email address.
Once you’re finished, click the blue Done button.
Add the form to your website
If you haven’t yet, click the blue Publish button to save the changes of your form. Then, click the X in the top-right corner of the screen to go back to Ninja Form’s main page.
To add your new form to a page of your website, simply copy the Shortcode shown in the table.
Then, go to your Contact page and paste it in.
That’s all there is to it! Once you preview the page you’ll see that your new contact form appears with the default styling of your WordPress theme. Before you Publish the changes, be sure to test the form to make sure you get an email notification when the form is submitted. If you don’t, double-check the Email Notifications settings we went over above.
You’re all set!
Now you’ve got a new contact form, making it nice and easy for potential collaborators, fans, or even clients and customers to reach out. If you have any questions or have a new form you’d like to show off, let us know in the comments. We’d love to celebrate with you!
Need more WordPress Tutorials?
Click to view my library of tutorials just like this one for WordPress users!