Love at first Syte™
Add a working contact form to your website without coding.
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.
If you're using a website builder like Wix, Squarespace, or similar, adding a contact form is straightforward:
Most website builders include form spam protection like CAPTCHA automatically. If not, look for this option in the form settings to prevent spam submissions.
WordPress makes it easy to add contact forms using plugins:
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.
For custom HTML websites, third-party form services make it easy to add forms without server-side programming:
<!-- 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>
For more control, you can create your own HTML form and connect it to a form processing service:
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>
FormSubmit is a free service that processes HTML forms and sends the submissions to your email:
To make your form look better and work well, consider these additions:
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; }
HTML5 includes built-in validation with attributes like "required", "type="email"", etc. For more advanced validation, you can use JavaScript.
Spam protection is essential for any contact form. Here are some methods:
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">
Google's reCAPTCHA is the most popular option:
<!-- 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>
Before announcing your website, thoroughly test your contact form:
If your form doesn't work as expected:
Once your basic form is working, consider these enhancements:
If your site might have European visitors, consider these GDPR requirements:
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>
With most web traffic now on mobile devices, ensure your form works well on small screens:
Contact us for personalized assistance with setting up your website's contact form.
Get in Touch