How to Add a Form to a Page

Use the Form element when you want to capture leads directly on a landing page, sales page, webinar registration, or quiz follow-up section. This guide shows how to add the form, configure the main settings that affect submissions, and verify that leads arrive correctly.

Before You Start

Make sure you have:

• A page open in the Page Builder.
• A clear list of fields you need (for example name, email, phone).
• Access to Leads to review submissions after testing.
• Autoresponder, webhook, or Google Sheets credentials ready if you plan to send data outside Atomicat.

Step 1: Add the Form Element

1. Open Pages and click Edit on the target page.
2. In the Page Builder, open the element panel.
3. Drag Form into the correct container or section (usually near your CTA or offer block).
4. Click the form on the canvas to open the settings drawer on the right.

Place the form where visitors already expect to take action. Forms below the fold on mobile often need shorter field lists to convert well.

Step 2: Name the Form

In the form settings, set a form name your team can recognize later in Leads and integrations.

Examples:

• Webinar registration – March offer
• VSL lead capture
• Quiz result follow-up

Clear names make filtering and webhook troubleshooting much easier when you run multiple campaigns.

Step 3: Configure Form Fields

Each field controls what data you collect and whether the visitor can submit without filling it in.

Setting	What it does
Field type	Chooses the input type: name, email, phone, text, or other supported types.
Label	The visible question or field name (for example Email).
Placeholder	Hint text inside the field before the visitor types.
Default value	Pre-fills the field when the page loads.
Required	Blocks submission until the field is completed.
Visibility	Shows or hides the field when conditional logic is available.
Label visibility	Shows or hides the label while keeping the input visible.
Validation	Enforces rules such as valid email or phone format.
Component ID	Internal ID used for integrations, tracking, or support.

Phone fields

When you add a phone field, you may also see:

• Country picker — Lets visitors choose a country code.
• Auto-detect country — Guesses country from the visitor when supported.
• Default / allowed / preferred countries — Controls which countries appear in the picker.

Use phone validation when your sales team needs a callable number format.

Field order

Reorder fields by dragging them in the field list. Put the highest-friction fields last and keep required fields to a minimum.

Tip: Short forms usually convert better. Add only fields your follow-up process actually uses.

Step 4: Configure the Submit Button

Setting	What it does
Button text	The CTA label visitors click to submit (for example Get access, Register, Send).
Target behavior	Controls what happens on click—typically form submission on the same page.
Success behavior	What visitors see after a successful submit: message, redirect, or next step when configured.
Error behavior	Feedback when validation fails or submission errors occur.

Use button text that explains the outcome. Register for the webinar converts better than a generic Submit.

Step 5: Connect an Autoresponder (Optional)

Use Autoresponder when submissions should also go to an email marketing tool or CRM.

Setting	What it does
Autoresponder	Selects the provider (only connected providers appear).
Account	Chooses which connected account to use.
Type	Destination type such as list, form, or contact—depends on the provider.
List or form	The external list or form that receives the lead.
Tags	Tags applied to the contact when the provider supports them.
Field mapping	Maps Atomicat fields to provider fields. Email mapping is required for many list destinations.
Abandoned leads	Sends partial data when a visitor starts but does not finish the form.

After mapping fields, save the page and send a test submission from the published URL. Confirm the contact appears in the external tool with correct data.

Step 6: Connect a Webhook (Optional)

Webhooks send submission data to an external URL in real time.

Setting	What it does
Webhook name	Internal label for your team.
Webhook URL	Endpoint that receives the payload.
Description	Optional note about the integration.
Send abandoned leads	Sends incomplete submissions when enabled.
Webhook history	Shows delivery status, response, attempts, and retry state.
Resend webhook	Re-sends a previous payload when supported.

See Connect a form to a webhook and Google Sheets for extended setup guides.

Step 7: Adjust Layout (Main Style Options)

You do not need to style every color to launch. Focus on these layout settings first:

Area	What to check
Field layout	Spacing between fields, field width, and column behavior on desktop vs mobile.
Form container width	Whether the form spans full width or a narrower column.
Input height and padding	Readability on mobile—inputs should be easy to tap.
Button width	Full-width buttons often perform better on mobile landing pages.

Preview on mobile after changing field layout. Cramped inputs are a common reason for form abandonment.

Step 8: Save, Publish, and Test

1. Click Save in the builder.
2. Publish the page to your site or domain. See Publish a page.
3. Open the live URL in an incognito window.
4. Submit the form with realistic test data.
5. Open Leads and confirm the submission appears. See Form leads.

Testing checklist

• Leave required fields empty and confirm validation messages appear.
• Test invalid email or phone formats if validation is enabled.
• Confirm success message or redirect works.
• Verify autoresponder or webhook delivery if connected.
• Test on a mobile device.

Troubleshooting

Problem	What to check
Form does not submit	Required fields, validation rules, and that the page was saved.
Lead missing in Atomicat	Page was published; you tested the correct live URL.
Autoresponder did not receive lead	Provider, account, list, tags, and especially field mapping.
Webhook failed	URL is correct, endpoint is live, check webhook history.
Mobile layout broken	Field width, gaps, and button width on the mobile breakpoint.

Outcome

After completing this workflow, your page captures visitor information through the Form element. Submissions appear in Leads and can flow to autoresponders, webhooks, or Google Sheets when configured.

Related Docs

• Form element reference
• Form leads
• Form webhooks
• Leads overview
• Publish a page

FAQ

How many fields should I add to a landing page form?+

Add only what your follow-up needs—often name and email, sometimes phone or one qualifying question. Shorter forms usually convert better, especially on mobile.

Where do form submissions go?+

Published submissions appear in Leads when the form is configured correctly. You can also send data to autoresponders, webhooks, or Google Sheets when those connections are set up.

Do I need to publish before testing?+

Yes. Test on the published live URL in an incognito window. Draft saves in the builder do not send real leads to production integrations.

Why is autoresponder field mapping important?+

External tools need Atomicat fields mapped to their destination fields. If email is not mapped correctly, contacts may be created with missing or wrong data.

Can I capture abandoned or partial form data?+

Yes, when abandoned leads is enabled on autoresponder or webhook settings. Use this only if your follow-up process is designed to handle incomplete submissions.