Adding and Managing Forms

Forms are one of the most important conversion tools on a website — they capture leads, collect feedback, handle support requests, and process orders. This guide explains how to add forms to your site, configure them correctly, and keep them compliant with Canadian privacy law (PIPEDA).

1. Common Form Types

Choose the right form type for each task:

2. Netlify Forms (Static Sites)

If your site is hosted on Netlify (as this one is), you can collect form submissions without any backend code. Netlify intercepts form posts and stores submissions in your dashboard.

To enable a Netlify form, add two attributes to your <form> tag:

<form name="contact" method="POST" action="/thank-you.html"
      data-netlify="true" netlify-honeypot="bot-field">
  <input type="hidden" name="bot-field">
  <input type="hidden" name="form-name" value="contact">
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

• data-netlify="true" — tells Netlify to capture submissions from this form.
• netlify-honeypot="bot-field" — adds a hidden spam trap field.
• name="form-name" value="contact" — identifies which form the submission belongs to.
• action="/thank-you.html" — redirects the user to a confirmation page after submission.

3. Choosing the Right Fields

Every extra field reduces form completion rates. Research consistently shows that fewer fields = more conversions. Guidelines:

• Ask only what you need: If you will not use a piece of information within 48 hours, don't collect it at sign-up.
• Mark required fields: Use an asterisk (*) or "required" label. HTML's required attribute prevents submission if a required field is empty.
• Use the right input types: type="email" triggers the email keyboard on mobile; type="tel" triggers the number keypad.
• Avoid CAPTCHA if possible: Traditional CAPTCHAs frustrate users. Netlify's honeypot method catches most bots without any user friction.

4. Spam Prevention

Forms attract spam bots. Use a layered approach:

• Honeypot field: A hidden input that humans never fill but bots do. Netlify automatically rejects submissions where the honeypot is filled.
• Time-based check: Block submissions that arrive within 1–2 seconds of the page loading (bots submit instantly; humans take longer).
• Email validation: Reject addresses with obvious fake patterns (e.g., aaa@bbb.ccc) using a regex check.
• Netlify spam filters: In your Netlify dashboard under Forms → Spam, you can review flagged submissions and mark false positives as ham.

5. PIPEDA Compliance

Canada's Personal Information Protection and Electronic Documents Act (PIPEDA) governs how you collect and use personal data. For website forms:

• State your purpose: Tell users why you are collecting their information — e.g., "We will use your email to respond to your enquiry and may send occasional updates. You can opt out at any time."
• Obtain consent: For newsletter signups, use a clear opt-in checkbox. Pre-ticked boxes do not constitute valid consent.
• Link your Privacy Policy: Include a link near the submit button — "By submitting you agree to our Privacy Policy."
• Data retention: Do not keep form submissions longer than necessary. Delete old Netlify submissions periodically from your dashboard.
• Right to access/delete: If a user requests that their data be deleted, honour the request promptly.

6. Confirmation and Follow-Up

After a form is submitted, two things should happen immediately:

1. Thank-you page or message: Redirect users to a dedicated page (e.g., /thank-you.html) or show an inline success message. This confirms the submission worked and sets expectations ("We'll get back to you within one business day").
2. Email notification to your team: Netlify can send form submissions to your email address. Configure this in Netlify Dashboard → Forms → your form → Settings → Email notifications.

For quote request and support forms, aim to respond within 24 hours on business days. Setting this expectation on the thank-you page reduces follow-up enquiries.

7. Troubleshooting Common Form Issues