Best Practices4 min read

Add a Contact Form to Your Website

The FloatMessage Contact Form template lets you collect visitor information directly from a floating message — no separate contact page needed. Submissions are stored in your dashboard and can be forwarded to Slack, Zapier, or any webhook endpoint.

Create a Contact Form message

Go to Dashboard → Messages → + New Message. Select the Contact Form template.

The default template includes three fields: Name, Email, and Message. You can customize the HTML to add or remove fields, change labels, or adjust the styling.

Tip: Each form input must have the fm-form-input class and a name attribute. The name is used as the field key in submissions.

Configure display settings

Choose when and where the contact form appears:

Position: Bottom Right or Center for a modal-style form
Trigger: After a delay, on scroll, or on exit intent
Dismiss: Session or Permanent (don’t show again after submit)
Target URLs: Show only on specific pages like /contact or /pricing

Set up a webhook (optional)

Forward submissions to Slack, Zapier, Make, or any URL that accepts JSON. Set the webhook URL in the message configuration.

Each submission sends a POST with this payload:

{
  "messageId": "abc123",
  "data": {
    "name": "John Doe",
    "email": "john@example.com",
    "message": "I'd like to learn more..."
  },
  "pageUrl": "https://example.com/contact",
  "country": "US",
  "submittedAt": "2026-04-08T12:00:00.000Z"
}

Note: For Slack, create an incoming webhook URL at api.slack.com/messaging/webhooks and paste it as your webhook URL.

View and export submissions

All form submissions appear in Dashboard → Submissions. Each entry shows:

Visitor name, email, and all submitted fields
Page URL where the form was submitted
Country (from IP geolocation)
Date and time

Click Export CSV to download all submissions as a spreadsheet.

Customize form fields

Edit the template HTML to add custom fields. Each field needs the fm-form-input class and a unique name attribute:

<!-- Text input -->
<input type="text" name="company" placeholder="Company" class="fm-form-input" />

<!-- Phone -->
<input type="tel" name="phone" placeholder="Phone number" class="fm-form-input" />

<!-- Dropdown -->
<select name="topic" class="fm-form-input">
  <option value="">Select a topic</option>
  <option value="sales">Sales</option>
  <option value="support">Support</option>
  <option value="other">Other</option>
</select>

<!-- Textarea -->
<textarea name="details" placeholder="Tell us more" class="fm-form-input fm-form-textarea"></textarea>