Guides
How to Build a Custom Form in WordPress
Not every form fits a contact or survey template — you might need service-specific dropdowns, file uploads, branching logic or data pushed to your CRM. Auto Form Builder lets you design exactly that in the drag-and-drop editor without writing PHP, and extend further with webhooks and filters when your stack needs it. This guide walks through building a custom form from scratch through to integration.
What you'll need
Auto Form Builder installed free from WordPress.org — no account required for the core plugin.
Step 1: Install Auto Form Builder and plan your fields
Install the plugin from WordPress.org via Plugins → Add New, then list the data you need to collect before opening the builder — required fields, optional extras and any branching rules. Starting with a written outline saves rework later when conditional logic depends on field order. You can always add fields after launch, but mapping integrations is easier when the structure is stable from the start.
Step 2: Create a blank form and add custom fields
Click Create New Form and choose a blank canvas rather than a template so nothing irrelevant carries over. Drag the field types you need — Dropdown for service selection, Number for quantities, File Upload for attachments, Address for shipping and Signature for approvals. Click each field to configure labels, validation, required state and options lists so submissions arrive in a consistent, usable format.
Step 3: Add conditional logic for branching
Open the conditional logic settings to show or hide fields based on earlier answers — for example, reveal a project budget field only when someone selects "New project" from a service dropdown. You can also skip steps in multi-step forms or route different notification emails depending on the submission. Test every branch with sample submissions so no path leaves a required field hidden or unreachable.
Step 4: Configure notifications and webhooks
Set admin and user emails in Form Settings with placeholders so dynamic field values appear in each message. If the form feeds external tools, open webhook settings and enter your Zapier, Make, GoHighLevel or custom endpoint URL — submissions push instantly on submit. Enable optional HMAC-SHA256 signing if your receiving server needs to verify payload authenticity.
Step 5: Style and preview across devices
Use the Customize tab to match your brand with theme presets, colors, fonts and button styling — no CSS required for a polished result. Preview on desktop, tablet and mobile because custom forms with many fields behave differently on small screens. Save the design as a reusable theme if you will build similar custom forms for other pages or clients.
Step 6: Publish and extend with developer tools
Embed the form with its shortcode or Gutenberg block on the target page, then submit test entries to confirm storage, email and webhook delivery. When you need code-level control — modifying submission data before it is stored, verifying webhook signatures or understanding data ownership — read the developer guide at /wordpress-form-builder-for-developers/ for documented filters, webhooks and placement options. Custom forms often grow into integrations; starting with the visual builder and extending through documented hooks keeps the workflow maintainable.
Tips
- Group related custom fields visually with section headings or multi-step page breaks so long forms feel manageable instead of overwhelming.
- Use the submission management dashboard to review test entries before going live — delete test data so analytics and exports stay clean.
- Document your conditional logic rules in a shared note so teammates know why certain fields appear; complex custom forms are hard to debug from memory alone.
Go deeper
FAQ
Can I add any field type to a custom form?
Yes — Auto Form Builder includes 15+ field types free, from text and email to file uploads, signatures, NPS, star ratings and address fields, all available in the same drag-and-drop editor.
Can developers modify submission data in code?
Yes — the auto_form_builder_processed_submission_data filter lets you adjust data before it is stored, emailed or sent to webhooks. See the developers page for documented hooks.