Form
Use the Form element to capture visitor information from a page, such as name, email, phone number, or custom answers.
Form submissions can appear in Leads and can also be sent to external tools through Autoresponder and webhooks when those settings are available in your workspace.
When to use the Form element
Use a Form when you want to:
- Capture leads from a landing page.
- Collect contact details before a sales call.
- Register visitors for a webinar, event, or waitlist.
- Send contacts to an autoresponder or CRM list.
- Send form data to webhooks or Google Sheets.
- Trigger follow-up workflows after a visitor submits information.
Add a form
- Open the page in the Page Builder.
- Open the element drawer.
- Add Form inside the correct container.
- Select the form on the canvas.
- Configure the fields, submit behavior, webhooks, and style from the edit drawer.
- Save the page and publish it before testing live submissions.
Content settings
| Setting | What it controls |
|---|---|
| Fields | The inputs visitors fill out before submitting the form. |
| Field type | The kind of data the field collects, such as name, email, phone, text, or another supported type. |
| Label | The visible name or question shown for the field. |
| Placeholder | Helper text shown inside the input before the visitor types. |
| Required state | Whether the visitor must complete the field before submission. |
| Validation | Rules such as valid email, valid phone, or other field-specific validation when available. |
| Component ID | The internal ID used for integrations, tracking, support, or troubleshooting. |
| Submit button | The button text and behavior visitors use to submit the form. |
| Success behavior | What visitors see after submitting, such as a success message, redirect, or next action when available. |
| Error behavior | Validation or submission error feedback. |
| Autoresponder | CRM or email marketing connection used to send submitted contacts to an external list, form, or contact record. |
Keep fields focused. Short forms usually convert better, especially on mobile.
Field setup
Configure each field carefully so the submitted lead data is easy to understand later.
| Field detail | Recommendation |
|---|---|
| Label | Use clear labels such as Name, Email, Phone, or Company. |
| Placeholder | Use examples or hints, not critical instructions. Placeholders disappear when the visitor types. |
| Required fields | Mark only the fields you truly need as required. |
| Phone fields | Include country or region expectations when your team needs a specific format. |
| Custom questions | Keep the wording short and match the question to your follow-up process. |
Submit button settings
| Setting | What it controls |
|---|---|
| Button text | The visible CTA, such as Submit, Get access, Register, or Send. |
| Target behavior | Same-page confirmation, redirect, or follow-up behavior depending on the configured flow. |
| Button style | Typography, text color, background, border, radius, padding, width, hover state, and responsive layout. |
| Tracking | Pixel events when submit clicks or completed submissions need measurement. |
Use a button label that tells visitors what happens next. For example, Register for the webinar is clearer than Submit.
Autoresponder settings
Use Autoresponder when form submissions should be sent to an email marketing tool, CRM, or contact system connected to Atomicat.
| Setting | What it means |
|---|---|
| Autoresponder | Select the CRM or autoresponder provider. Only available providers appear in the dropdown. |
| Account | Choose the connected account for that provider. You can add, edit, remove, or reload accounts when the controls are available. |
| Type | Choose the destination type, such as list, form, or contact, depending on the selected provider. |
| List or form | Select the destination list or form that should receive the submitted lead. |
| Tags | Apply one or more tags when the selected provider supports tags. |
| Field mapping | Map Atomicat form fields to autoresponder fields. Email mapping is required for list-based destinations. |
| Abandoned leads | Send incomplete form data to the autoresponder when the visitor starts the form but does not finish it. |
Autoresponder field mapping is important. If the wrong field is mapped, the contact can be created with missing or incorrect data in the external tool.
Autoresponder setup checklist
- Select the autoresponder provider.
- Choose or add the connected account.
- Select the destination type, such as list, form, or contact.
- Choose the list or form destination when required.
- Add tags if your provider supports them.
- Map the Atomicat fields to the autoresponder fields.
- Make sure the email field is mapped when the destination requires email.
- Enable abandoned leads only if your follow-up process should receive incomplete submissions.
- Save the page and submit a test lead from the published page.
- Confirm the contact appears in the autoresponder with the correct fields and tags.
Webhook settings
When webhook configuration is available, the Form element can send submission data to external services.
| Setting | What it means |
|---|---|
| Webhook name | Internal name used to identify the webhook. |
| Webhook URL | The endpoint that receives form submission data. |
| Description | Optional note for your team. |
| Send abandoned leads | Sends incomplete form data when the visitor starts but does not finish the form. |
| Webhook history | Shows delivery status, response, attempts, last attempt, and retry state when available. |
| Resend webhook | Sends a previous payload again when supported. |
Before launch, submit a test lead and confirm the external service receives the expected fields.
Style settings
| Style area | What you can adjust |
|---|---|
| Form container | Background, border, border radius, shadow, padding, margin, width, and alignment. |
| Field layout | Spacing, field width, row gaps, column behavior, and responsive layout. |
| Labels | Font, size, weight, color, line height, and spacing. |
| Inputs | Background, text color, placeholder color, border, radius, padding, height, and focus state when available. |
| Button | Text style, background, hover state, border, radius, padding, width, and alignment. |
| Messages | Success and error message color, spacing, and typography when exposed by the drawer. |
Always check mobile preview after styling fields. Inputs that look good on desktop can become too small or cramped on mobile.
Leads and data delivery
After the page is published and the visitor submits the form, the submission appears in Leads when the form is configured correctly.
Use related lead docs when you need to review, export, or forward submitted data:
Testing checklist
Before sending traffic to a page with a form:
- Submit the form on the published page.
- Test required fields by leaving them empty.
- Test invalid email or phone formats if validation is enabled.
- Confirm the success message or redirect works.
- Confirm the lead appears in Leads.
- Confirm autoresponder delivery if an autoresponder is configured.
- Confirm webhook delivery if webhooks are configured.
- Test the form on mobile.
- Check that privacy or terms links are present when required.
Troubleshooting
| Problem | What to check |
|---|---|
| Form does not submit | Confirm required fields, validation rules, button behavior, and page save status. |
| Lead does not appear | Confirm the page is published, the correct site URL is being tested, and the form saved successfully. |
| Autoresponder does not receive the lead | Check the selected provider, account, list or form, tags, field mapping, and whether the email field is mapped correctly. |
| Webhook fails | Check the webhook URL, response, attempts, and whether the external endpoint is active. |
| Visitors abandon the form | Reduce required fields, simplify labels, and make the CTA clearer. |
| Mobile layout is broken | Adjust field width, gaps, padding, and button width for the mobile breakpoint. |
Related docs
FAQ
When should I use this Form — Builder Elements Guide Reference page?
Use this page when you need to understand the workflow, settings, or decisions related to Form — Builder Elements Guide Reference. It is most helpful before editing a live asset, publishing changes, or troubleshooting behavior in an Atomicat workspace.
What should I check before changing Form — Builder Elements Guide Reference?
Confirm that you are in the correct workspace, project, page, funnel, site, or account area. Review access permissions, saved changes, publishing status, and any connected integrations before making updates.
How do I verify that Form — Builder Elements Guide Reference is working correctly?
Preview the affected page or feature, test the main user path in a fresh browser session, and confirm that forms, redirects, tracking, products, quizzes, or publishing states behave as expected.
What should I do if Form — Builder Elements Guide Reference does not work as expected?
Recheck the configuration described on this page, save the changes again, clear browser cache if needed, and test with a simple version of the setup. If the issue continues, collect the page URL, workspace details, and screenshots before contacting support.