Contact Forms

The Contact Form template lets visitors submit information directly from a floating message. Submissions are stored in your dashboard and can be forwarded to a webhook (Slack, Zapier, Make, your own server, etc.).

Creating a contact form

1. Open the message editor with the Contact Form template pre-selected: dashboard/messages?action=new&template=contact-form. Or go to Dashboard → Messages and click + New Message.
2. Pick the Contact Form template (skip if you used the deep link above).
3. Set the form title and description in the visual editor.
4. Configure trigger, position, schedule, and targeting just like any other floating message.
5. Save and embed the script on your site — the form is live.

Field types

The default template includes name, email, and message. You can edit the HTML directly to add or remove fields. Each input must have:

• The fm-form-input CSS class so the embed script picks it up.
• A name attribute — this becomes the JSON key in submissions.
• Optional required attribute to enforce validation.
• A type attribute (text, email, tel, etc.) for client-side format checks.

Validation

FloatMessage validates submissions both client-side (instant feedback) and server-side (final check). The following rules apply automatically:

Errors are shown inline (red border + error message above the submit button). The visitor can fix and resubmit without losing the rest of the form.

Webhook forwarding

Add a webhook URL on the contact form message and FloatMessage will POST every submission to it. Works with Slack, Zapier, Make, n8n, or any endpoint that accepts JSON.

Payload schema

{
  "messageId": "abc123",
  "data": {
    "name": "Jane Doe",
    "email": "jane@example.com",
    "message": "I'd like a demo of the AI agent."
  },
  "pageUrl": "https://example.com/pricing",
  "country": "US",
  "submittedAt": "2026-04-10T18:42:31.123Z"
}

Notes:

• The data object reflects the field name attributes you configured.
• Country comes from Cloudflare's CF-IPCountry header — it's a 2-letter ISO code or empty.
• Webhook delivery is fire-and-forget. Failures don't block the visitor's submission.
• Webhook errors are logged to your dashboard but not retried.

Success message

After a successful submission, the form fields are hidden and the success message appears in their place. Customize it on the message form (default: “Thanks! We’ll be in touch soon.”).

Internally, the embed script looks for an element with the fm-form-success class (initially hidden) and toggles it visible after the API responds with { ok: true }.

Submissions inbox

Every submission lives in Dashboard → Submissions. Each row shows:

• The visitor's name, email, phone (when collected) — clickable mailto / tel links.
• Any other custom fields you defined.
• Page URL the form was submitted from.
• Country and submission timestamp.
• The originating message (so you can identify which form generated it).

Click + Ticket on any submission to convert it into a tracked support ticket. See Tickets.

CSV export

Click Export CSV at the top of the submissions page to download all rows as a comma-separated file. Columns:

Date, Message, Page, Country, name, email, message, ...customFields

One row per submission. Custom field columns appear automatically based on the union of all submitted field names.

Required HTML structure

The embed script looks for these classes inside the contact form template:

• fm-form-input — every input / textarea / select. Each must have a name attribute.
• fm-form-fields — the wrapper containing the inputs. Hidden after a successful submission.
• fm-form-submit — the submit button.
• fm-form-success — the success message element (initially style="display:none").