Adding a Contact Form to WordPress: A Simple Guide

A working contact form is essential for any business website. Without one, potential customers have no easy way to reach you. That means missed opportunities and lost revenue.

The good news? Adding a contact form to WordPress is straightforward. You don't need coding skills or technical expertise. Just follow these steps and you'll have a professional contact form running in under 30 minutes.

What You'll Learn

By the end of this guide, you'll know how to:

• Choose the right contact form plugin for your needs
• Install and configure your contact form
• Add the form to any page or post
• Customise fields and styling
• Set up email notifications
• Test everything works properly

Let's get started.

Step 1: Choose Your Contact Form Plugin

WordPress doesn't include a contact form by default. You'll need a plugin. Here are the best options:

WPForms (Recommended for beginners)

• Drag-and-drop form builder
• Pre-made templates
• Free version available
• Great support

Contact Form 7 (Free but more technical)

• Completely free
• Very flexible
• Requires some technical knowledge
• Most popular contact form plugin

Gravity Forms (Premium option)

• Advanced features
• Conditional logic
• Payment integration
• Annual licence required

For most business websites, we recommend WPForms. It's user-friendly and handles 99% of contact form needs without fuss.

Step 2: Install Your Contact Form Plugin

1. Log into your WordPress admin area
2. Go to Plugins > Add New
3. Search for "WPForms"
4. Click Install Now next to "WPForms Lite"
5. Click Activate once installation completes

You'll see a new "WPForms" menu item in your WordPress dashboard.

Step 3: Create Your First Contact Form

1. Click WPForms > All Forms
2. Click Add New
3. Choose the "Simple Contact Form" template
4. Give your form a name (like "Contact Us")
5. Click Create Form

The form builder will open. You'll see a preview of your form with these default fields:

• Name
• Email
• Comment or Message

These cover most contact form needs. But you can easily add, remove, or modify fields.

Step 4: Customise Your Form Fields

To add a field:

1. Click the field type from the left panel
2. Drag it to your form
3. Click to edit the field settings

To modify existing fields:

1. Click on any field in the preview
2. Edit the label, placeholder text, or requirements
3. Toggle "Required" on or off

Common fields to consider adding:

• Phone number
• Company name
• Service/product of interest
• How did you hear about us?

Keep forms short. The more fields you add, the fewer people will complete it. Stick to essential information only.

Step 5: Configure Form Settings

Click the Settings tab at the top of the form builder.

General Settings:

• Form Name: Keep it descriptive
• Form Description: Optional, appears above the form
• Submit Button Text: "Send Message" or "Get In Touch"

Notifications: This tells WordPress where to send form submissions.

1. Click Notifications on the left
2. Check the "Send To Email Address" is correct
3. Customise the subject line
4. Add a reply-to email if needed

Most default settings work fine. The key is making sure notifications go to the right email address.

Step 6: Add the Form to Your Website

You can add your contact form to any page or post.

To add to a page:

1. Go to Pages > All Pages
2. Edit your Contact page (or create one)
3. In the content editor, click Add Block
4. Search for "WPForms"
5. Select your contact form from the dropdown
6. Click Update or Publish

To add to the sidebar:

1. Go to Appearance > Widgets
2. Add the "WPForms" widget
3. Select your form
4. Configure display settings

Your form is now live on your website.

Step 7: Style Your Contact Form

Most WordPress themes will style your contact form automatically. But you might want to make adjustments.

Basic styling options in WPForms:

1. Go to WPForms > Settings
2. Click General
3. Choose from preset colour schemes
4. Enable/disable CSS styling

For more control over appearance, you'll need custom CSS. Add this to Appearance > Customize > Additional CSS.

.wpforms-container {
    max-width: 600px;
    margin: 0 auto;
}

.wpforms-field-label {
    font-weight: bold;
    margin-bottom: 5px;
}

.wpforms-submit {
    background-color: #0073aa;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
}

Step 8: Test Your Contact Form

Before going live, test everything works properly.

1. Visit your contact page
2. Fill out the form completely
3. Submit it
4. Check your email for the notification
5. Try submitting incomplete forms to test validation

Common issues at this stage:

• Email notifications not arriving (check spam folder)
• Form doesn't submit (plugin conflict)
• Styling looks broken (theme compatibility)

Common Issues and Solutions

Form submissions aren't arriving:

• Check your spam folder
• Verify the notification email address is correct
• Test with a different email address
• Contact your hosting provider about mail delivery

Form looks broken or unstyled:

• Try switching to a default WordPress theme temporarily
• Disable other plugins one by one to find conflicts
• Check for JavaScript errors in browser console

Spam submissions: Enable reCAPTCHA in WPForms settings. This stops most automated spam while remaining user-friendly for real visitors.

Form is too wide/narrow: Add custom CSS to control width:

.wpforms-container {
    max-width: 500px; /* Adjust as needed */
}

Advanced Tips

Add conditional logic: Show/hide fields based on user selections. Useful for service enquiry forms.

Create multiple forms: Different forms for different purposes (quotes, support, general enquiries).

Integrate with email marketing: Connect to MailChimp, ConvertKit, or other services to build your mailing list.

Add file uploads: Let users attach files to their enquiries. Useful for project briefs or support requests.

These features require the paid version of WPForms or alternative plugins.

What's Next?

You now have a working contact form on your WordPress site. Here are logical next steps:

Improve your contact page: Add your phone number, address, and opening hours. Include a map if you have a physical location.

Set up website maintenance: Keep your plugins updated and forms working smoothly.

Monitor form performance: Track how many people submit forms versus visit your contact page. Low conversion rates suggest your form needs improvement.

Add more pages: Consider creating dedicated landing pages for different services. Check our guide on WordPress websites for more ideas.

Enhance security: A contact form can be a target for spam and attacks. Regular maintenance keeps everything secure and working properly.

Your contact form is now ready to capture leads and enquiries. Test it regularly, keep it simple, and respond quickly to submissions. That's how you turn website visitors into customers.