Form Builderintermediate

Create a form

Build a form from scratch or a template, configure fields, pick what each submission does, brand it, then share the URL or embed snippet.

May 12, 202612 min read

Create a form

This walks through building a form end to end — fields, design, languages, action, and sharing.

Before you start

  • A user role with the Form Builder module permission
  • A clear idea of what the form should collect and what should happen when someone submits it
  • For a callback request form, you’d want: name, phone, preferred time, and a “Create callback” action

Step 1 — Open the builder

  1. Open Settings → Form Builder.
  2. You’ll land on the Forms tab listing existing forms. To start a new one:
    Click New form to start blank
    Or click Use a template to pick from starter forms (callback request, support intake, etc.) and customize from there

Step 2 — Add and edit fields

You’re now in the editor with three panes: a field palette on the left, the form canvas in the middle, and a properties panel on the right.

  1. Drag a field type from the palette onto the canvas. Field types include short text, textarea, number, date, dropdown, nested dropdown, multi-select, radio, checkbox, file upload, signature, rating, email, and phone.
  2. Click a field on the canvas to select it. The properties panel shows its settings:
    Label — what the customer sees above the field
    Placeholder — the hint inside the field before they type
    Required — toggle on if it must be filled
    Options — for dropdowns/radios/checkboxes, the list of choices
    Type-specific settings (validation, default value, min/max for numbers, etc.)
  3. Reorder fields by dragging the handle. Delete with the trash icon. Add as many as you need.

Step 3 — Customize the look

Switch to the Design tab inside the editor.

  1. Set the primary color, background color, text color, button color, and button text color.
  2. Add a header image if you want the form to be branded — paste a URL or upload a file.
  3. Set the Submit button text and the Thank-you message shown after submission.
  4. Optionally add header links and social links.

Step 4 — Add languages (optional)

Switch to the Languages tab.

  1. Pick the Active languages — every language someone might fill the form in.
  2. Set the Default language — what the form shows when no ?lang= parameter is in the URL.
  3. For each non-default language, fill in translations for each field’s label, placeholder, options, the submit button, and the thank-you message.

Languages can be added at any time — Atender prefills translations as blank for each field, and you fill them in.

Step 5 — Configure the action

Switch to the Action or Settings tab (label depends on the editor view).

  1. Pick the Action type:
    Create a conversation — turns submissions into inbox conversations. Configure the default subject, default team, and default agent.
    Create a CRM entry — pick whether to create a contact or an organization.
    Store in log — just records the submission without creating anything.
    Create a callback — pick the phone number to book the callback against and the default language.
  2. Field mappings — for each form field, pick the target field on the conversation or CRM entity it should populate. Custom fields you’ve created in Custom Fields appear here.

Step 6 — Save the form

Click Save in the editor header. The form moves from draft to active.

Step 7 — Share it

Back on the Forms list, find your form’s row and open the actions menu:

  • Preview — open a live preview in a new tab
  • Share — get the hosted URL (append ?lang=xx to force a language)
  • Embed — get an HTML snippet to paste into your website; pick the embed language from the dropdown

The hosted URL is permanent — share it, link to it, paste it into emails.

Verify it worked

Open the hosted URL, fill in every field, and submit. You should see the thank-you message. Then:

  • For a Create a conversation form, open Atender’s inbox — a new conversation should appear within seconds, with the form fields filled in.
  • For a Create a CRM entry form, open CRM → Contacts (or Organizations) and find the new record.
  • For a Create a callback form, open the callback queue for the phone number you picked.
  • For a Store in log form, view submissions in the Submissions tab at the top of the Form Builder.

Edit later

Open the form’s row from the Forms list and click Edit. Changes to fields, design, or action are picked up the next time someone loads the hosted URL — embedded copies update on the next page load. You don’t need to re-share the link.

Troubleshooting

  • Symptom: Submissions aren’t creating conversations. Fix: Open the form and confirm the action is set to Create a conversation (not Store in log or another action). Check the Submissions tab — if submissions are landing there but no conversation appears, the action configuration is wrong.

  • Symptom: A translated language is showing English text. Fix: Open the Languages tab and confirm every field has a translation filled in for that language. Empty translations fall back to the default language.

  • Symptom: Embed shows but submissions fail. Fix: The embed snippet expects your site to allow framing of the Atender domain. Check your site’s Content Security Policy if submissions are silently failing from an embed.

  • Symptom: Header image looks stretched or pixelated. Fix: Use a wide rectangular image (roughly 1600×400) for best results. The form respects aspect ratio.

See also

Tags

How To
Back to Form Builder