Contact Form Setup

Add a working contact form to your website without coding.

Introduction

A contact form is an essential element of most websites, allowing visitors to get in touch with you without revealing your email address to spammers. This guide will show you how to add a professional, working contact form to your website with minimal technical knowledge.

What You'll Need

  • An active website where you can edit HTML
  • Access to your website's files via FTP or a website builder/CMS
  • An email address where you want to receive form submissions

Contact Form Options

There are several ways to add a contact form to your website, depending on your technical skills and what platform you're using:

Method Difficulty Best For
Website Builder Tools Very Easy Wix, Squarespace, Weebly users
WordPress Plugins Easy WordPress website owners
Form Service Providers Moderate Custom HTML websites
HTML + Form Processor Moderate-Hard Custom websites with some technical knowledge

Method 1: Using Website Builder Tools

If you're using a website builder like Wix, Squarespace, or similar, adding a contact form is straightforward:

Wix Instructions

  1. In the Wix Editor, click the "+" (Add) button
  2. Select "Contact & Forms"
  3. Choose your preferred contact form layout
  4. Click "Add to Page"
  5. Select the form and click "Settings" to customize fields and email settings
  6. Set the email address where you want to receive submissions
  7. Customize confirmation messages and design as needed
  8. Publish your website

Squarespace Instructions

  1. In the Squarespace editor, add a new section/block
  2. Select "Form" from the options
  3. Choose from available templates or start with a blank form
  4. Click the "Edit" button to customize fields
  5. Click the gear icon to configure form settings
  6. Set your receiving email address and other options
  7. Save and publish your changes

Website Builder Tip

Most website builders include form spam protection like CAPTCHA automatically. If not, look for this option in the form settings to prevent spam submissions.

Method 2: Using WordPress Plugins

WordPress makes it easy to add contact forms using plugins:

Contact Form 7 (Most Popular)

  1. Log in to your WordPress dashboard
  2. Go to Plugins > Add New
  3. Search for "Contact Form 7"
  4. Click "Install Now" then "Activate"
  5. Go to Contact > Contact Forms
  6. You'll see a default form already created. Click "Edit" to customize it
  7. Modify the form fields as needed
  8. In the "Mail" tab, set your email address
  9. Save your changes
  10. Copy the shortcode provided (looks like [contact-form-7 id="1234" title="Contact form 1"])
  11. Create or edit the page where you want the form
  12. Paste the shortcode where you want the form to appear
  13. Publish or update the page

WPForms (More User-Friendly)

  1. Log in to your WordPress dashboard
  2. Go to Plugins > Add New
  3. Search for "WPForms Lite"
  4. Click "Install Now" then "Activate"
  5. Go to WPForms > Add New
  6. Choose the Simple Contact Form template
  7. Customize fields using the drag-and-drop builder
  8. Go to Settings > General to configure form name and description
  9. Go to Settings > Notifications to set your email address
  10. Click "Save" when finished
  11. Create or edit the page where you want your form
  12. Click the "Add Form" button in the editor
  13. Select your form and add it to the page
  14. Publish or update the page

WordPress Form Protection

Most WordPress form plugins include spam protection features. For Contact Form 7, you can install the "Really Simple CAPTCHA" or "reCAPTCHA" extensions for better spam filtering.

Method 3: Using Form Service Providers

For custom HTML websites, third-party form services make it easy to add forms without server-side programming:

Formspree (Free for Basic Use)

  1. Go to Formspree.io
  2. Create a free account
  3. Create a new form
  4. Enter your email address and form name
  5. Copy the HTML code provided
  6. Paste the code into your website's HTML where you want the form to appear
  7. Upload the updated file to your server
<!-- Example Formspree Code -->
<form action="https://formspree.io/f/your-form-id" method="POST">
  <label>
    Your Name:
    <input type="text" name="name" required>
  </label>
  <label>
    Your Email:
    <input type="email" name="email" required>
  </label>
  <label>
    Message:
    <textarea name="message" required></textarea>
  </label>
  <button type="submit">Send</button>
</form>

Google Forms (Free)

  1. Go to Google Forms
  2. Create a new form
  3. Add questions and customize as needed
  4. Click the "Send" button
  5. Select the "Embed" tab (looks like <>)
  6. Copy the iframe code provided
  7. Paste the code into your website's HTML where you want the form to appear
  8. Upload the updated file to your server

Method 4: Custom HTML + Form Processor

For more control, you can create your own HTML form and connect it to a form processing service:

Creating the HTML Form

Start with this basic HTML contact form template:

<form action="https://formsubmit.co/your-email@example.com" method="POST">
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" name="name" id="name" required>
    </div>
    
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" name="email" id="email" required>
    </div>
    
    <div class="form-group">
        <label for="subject">Subject</label>
        <input type="text" name="subject" id="subject" required>
    </div>
    
    <div class="form-group">
        <label for="message">Message</label>
        <textarea name="message" id="message" rows="5" required></textarea>
    </div>
    
    <button type="submit">Send Message</button>
</form>

Form Processor: FormSubmit

FormSubmit is a free service that processes HTML forms and sends the submissions to your email:

  1. Replace "your-email@example.com" in the form action with your actual email
  2. Upload the form to your website
  3. The first time someone submits the form, you'll receive an activation email
  4. Confirm the activation, and future submissions will be sent directly to your email

Customizing Your Form

To make your form look better and work well, consider these additions:

Add Basic CSS Styling

Add this to your website's CSS file or in a <style> tag in the <head> section:

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button[type="submit"]:hover {
    background-color: #45a049;
}

Add Form Validation

HTML5 includes built-in validation with attributes like "required", "type="email"", etc. For more advanced validation, you can use JavaScript.

Preventing Form Spam

Spam protection is essential for any contact form. Here are some methods:

1. Honeypot Field

Add an invisible field that humans won't fill out, but bots will:

<!-- Add this to your form -->
<div class="honeypot-field" style="display: none;">
    <label for="website">Website (leave empty)</label>
    <input type="text" name="website" id="website">
</div>

<!-- For FormSubmit, add this to prevent spam -->
<input type="text" name="_honey" style="display:none">

2. CAPTCHA

Google's reCAPTCHA is the most popular option:

  1. Go to Google reCAPTCHA
  2. Register your site and get the site key and secret key
  3. Add the reCAPTCHA script to your page's head section
  4. Add the reCAPTCHA element to your form
<!-- Add this in the head section -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<!-- Add this to your form, before the submit button -->
<div class="g-recaptcha" data-sitekey="YOUR-SITE-KEY"></div>

3. Using Service-Provided Protection

  • Formspree includes spam filtering on all plans
  • WordPress plugins like Akismet can be integrated with contact forms
  • FormSubmit offers built-in spam protection

Testing Your Contact Form

Before announcing your website, thoroughly test your contact form:

Test Checklist

  1. Submit the form with valid information – check that you receive the email
  2. Try submitting without filling required fields – form should prevent submission
  3. Enter an invalid email format – form should show an error
  4. Submit a very long message – make sure it's handled properly
  5. Test on different devices (desktop, tablet, phone)
  6. Test in different browsers (Chrome, Firefox, Safari, Edge)

Troubleshooting

If your form doesn't work as expected:

  • Check the email address in the form configuration
  • Look for typos in your HTML code
  • Check if the form submission URL is correct
  • Verify that your form processor service is working
  • Check spam/junk folders for test submissions

Form Customization Ideas

Once your basic form is working, consider these enhancements:

Additional Fields to Consider

  • Phone number: For visitors who prefer a call
  • Dropdown menu: To categorize inquiries (e.g., "General Question," "Support," "Business Inquiry")
  • File upload: For documents or images related to the inquiry
  • Checkbox for newsletter signup: To build your email list
  • Checkbox for privacy policy acceptance: For GDPR compliance

Design Enhancements

  • Match form styles to your website's color scheme
  • Add icons to input fields for visual appeal
  • Use animations for form submission feedback
  • Add a progress indicator for multi-step forms

User Experience Improvements

  • Add placeholder text in fields to guide users
  • Implement inline validation to show errors as users type
  • Create a custom "thank you" page after submission
  • Add autofocus to the first field to save users a click

Contact Form Best Practices

Usability Tips

  • Keep it simple: Only ask for information you truly need
  • Label clearly: Use descriptive labels above or to the left of fields
  • Indicate required fields: Use an asterisk (*) or "Required" text
  • Provide feedback: Show a clear confirmation message after submission
  • Make the submit button standout: Use contrasting colors and clear text

GDPR Compliance (for European Visitors)

If your site might have European visitors, consider these GDPR requirements:

  • Include a checkbox for consent to process data
  • Link to your privacy policy
  • Only collect necessary information
  • Explain how you'll use the submitted data

GDPR Consent Example

Add this to your form:

<div class="form-group">
  <input type="checkbox" id="consent" name="consent" required>
  <label for="consent">I consent to having this website store my submitted information so they can respond to my inquiry. See our <a href="privacy-policy.html">privacy policy</a> to learn more about how we use data.</label>
</div>

Mobile Optimization

With most web traffic now on mobile devices, ensure your form works well on small screens:

  • Use responsive design techniques
  • Make input fields large enough to tap easily
  • Use appropriate input types (e.g., type="tel" for phone numbers)
  • Test on actual mobile devices

Next Steps

After setting up your contact form, consider these follow-ups:

  • Create an auto-responder: Send automatic confirmation emails to users after submission
  • Set up form analytics: Track form submissions to measure conversion rates
  • Create a form management system: Organize and track inquiries more effectively
  • Test form accessibility: Ensure your form works for visitors with disabilities
  • Optimize SEO for your contact page: Learn more with our SEO Basics guide

Need Help With Your Contact Form?

Contact us for personalized assistance with setting up your website's contact form.

Get in Touch