Chapter 9: Forms (3.C)

Exam topic 3.C: Build forms and configure and manage form submission behavior.
Key terms: Form block, success and error states, reCAPTCHA, redirect settings, custom actions, export data.
Weight: 4% of the exam (about 2 questions)

Forms are where a website turns visitors into leads, applicants and customers. A production form has to be accessible, protected from spam, send data to the right place, and give clear feedback. This chapter covers each part and the trade-offs between Webflow’s handling and external handling.

---

9.1 Anatomy of a Form Block

Adding a Form Block gives you three parts:

Form Block (wrapper)
├── Form              ← fields + submit button
├── Success message   ← shown after successful submission
└── Error message     ← shown if submission fails

In the Designer you switch between Normal, Success and Error states in the form’s settings to design each one. Every form needs a designed success and error state. “Thank you! Your submission has been received!” in the default style isn’t production-ready.

Field elements

• Input with types: text, email, password, phone (tel), number, etc. The type affects mobile keyboards and native validation.
• Text area for long answers.
• Checkbox (single, e.g. consent) and Radio buttons (one choice from a group sharing the same name).
• Select (dropdown).
• File upload (on supporting plans): set allowed file types and size limits.
• Submit button, with a waiting text (e.g. “Sending…”) shown during submission.
• Label elements.

---

9.2 Field configuration that matters

Setting	Why it matters
Name	The key in submission data and exports (email, company). Clear names make exports and integrations predictable
Type	email validates format and shows the @ keyboard on mobile
Required	Native validation stops empty submissions
Placeholder	A hint only. Not a substitute for a label
Autocomplete attribute	autocomplete="email", "given-name", "tel": faster filling, and meets WCAG 1.3.5
Hidden fields	Capture context (page URL, CMS item, UTM source)

---

9.3 Accessible forms

• Every field needs a programmatically associated label. Webflow’s Label element linked to its field (for → id) does this. Placeholder-only fields fail WCAG 1.3.1 / 3.3.2, because the hint disappears as you type and is often low-contrast.
• Visible focus on fields and buttons (WCAG 2.4.7).
• Group related controls: radio groups and checkbox groups should be wrapped with a group label (fieldset/legend pattern via custom attributes or embeds where needed).
• Error messages should explain what went wrong and how to fix it. Don’t rely on red colour alone (WCAG 1.4.1, 3.3.1).
• Contrast: input borders and placeholder text need enough contrast (3:1 for component boundaries, 4.5:1 for text).
• Don’t disable zoom or use tiny inputs. Use at least 16px font on inputs, so iOS doesn’t auto-zoom.
• Keyboard: the entire form must be completable with Tab, Space and Enter.

---

9.4 Submission behaviour

Default: Webflow handles it

1. Visitor submits.
2. Webflow stores the submission and runs spam filtering.
3. Notification emails go to the addresses configured in site settings (Forms) / form settings.
4. The success message replaces the form, or the visitor is redirected.

Redirect settings

Instead of the inline success message, you can set a Redirect URL in the form settings, e.g. /thank-you. Use a redirect when:

• you want a full thank-you page with next steps (book a call, download a resource),
• analytics/ad platforms track conversions by thank-you page URL.

Remember to set the thank-you page to noindex so it doesn’t show up in search (Chapter 7).

Custom actions

The form’s Action field (with Method GET/POST) sends the data directly to an external URL, e.g. a CRM or email marketing endpoint.

	Webflow handling	Custom action
Stored in Webflow submissions	✅	❌
Webflow notification emails	✅	❌
Webflow spam filtering	✅	❌ (the endpoint must handle it)
Success/error states	✅ Webflow-controlled	Depends on the endpoint’s response/redirect
Data goes straight to external system	❌ (needs integration)	✅

Exam point: a custom action bypasses Webflow’s form processing. If the client still wants submissions in Webflow and email notifications, use an integration (app, automation platform or webhook) instead of a custom action.

---

9.5 Spam protection

• reCAPTCHA: add your reCAPTCHA keys in site settings (Forms), then add the reCAPTCHA element to the form. Submissions without a valid reCAPTCHA response are rejected.
• Webflow also applies built-in spam filtering to submissions it handles.
• Honeypot field: a hidden field that bots fill in and humans don’t, so submissions with a value can be discarded (useful with custom processing).
• Accessibility trade-off: visible CAPTCHA challenges can be hard for some users. Prefer low-friction options, and make sure there’s an accessible path.

---

9.6 Managing and exporting data

• Submissions appear in site settings → Forms (form submissions), grouped by form name. Give each form a meaningful name (“Contact – Footer”, “Demo request”).
• Export to CSV for reporting, migration or importing into other systems.
• Plan limits cap the number of submissions and file upload storage. High-volume forms should integrate directly with a CRM/database.
• Privacy: submissions contain personal data. Collect only what you need (data minimisation), add consent checkboxes where the law requires them, link the privacy policy, and set retention practices (export and delete when no longer needed).

---

9.7 Forms on CMS template pages

A form on a Collection template (e.g. a job application on each job page) can include a hidden field bound to the current item (job title or ID). One form then serves every job, and every submission records which job it came from. That’s more scalable than one form per job.

---

9.8 Forms QA checklist

• ☐ Labels for every field; placeholders only as hints.
• ☐ Correct input types and autocomplete attributes.
• ☐ Required fields marked visibly and in settings.
• ☐ Success and error states designed and helpful.
• ☐ Submit button waiting text set.
• ☐ Notification recipients configured and tested.
• ☐ Redirect/thank-you page noindexed (if used).
• ☐ Spam protection enabled.
• ☐ Integration tested end to end on the published site.
• ☐ Privacy notice/consent where required.

---

Practice questions: Forms

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Comment *

Name *

Email *

Website

Δ