Webflow Integration

Add powerful form handling to your Webflow site. Get webhooks, file uploads, spam protection, and API access - all without leaving Webflow Designer.

Quick Setup

1. Create an Atlas Form

Create a new project

Create a form and copy your endpoint URL:

```

https://atlasforms.app/f/abc123xyz

```

2. Update Your Webflow Form

In Webflow Designer:

Select your form element

In the Settings panel, find Form Settings

Change the Action to your Atlas endpoint URL

Set Method to POST

html

<form action="https://atlasforms.app/f/abc123xyz" method="POST">
  <input type="text" name="name" placeholder="Name" required>
  <input type="email" name="email" placeholder="Email" required>
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit">Send Message</button>
</form>

3. Configure Redirect (Optional)

In your Atlas dashboard, set a success redirect URL to send users back to your thank-you page (works with any domain):

https://yourdomain.com/thank-you

File Uploads

To accept file uploads, add enctype="multipart/form-data" to your form:

html

<form
  action="https://atlasforms.app/f/abc123xyz"
  method="POST"
  enctype="multipart/form-data"
>
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <input type="file" name="resume" accept=".pdf,.doc,.docx">
  <button type="submit">Submit Application</button>
</form>

Note: In Webflow Designer, you'll need to add the enctype attribute via custom code or embed.

Accepted File Types

Plan	Allowed Types
Starter	Images (JPEG, PNG, WebP, GIF), PDF
Pro	Images, PDF, Word documents
Business+	All file types

Webhooks

Configure a webhook URL in your Atlas project settings to receive instant notifications when forms are submitted.

Webhook Payload

json

{
  "event": "submission.created",
  "timestamp": "2024-01-15T10:30:00.000Z",
  "form": {
    "id": "form-uuid",
    "public_id": "abc123xyz",
    "name": "Contact Form"
  },
  "submission": {
    "id": "550e8400-e29b-41d4-a716-446655440000",
    "data": {
      "name": "Jane Doe",
      "email": "jane@example.com",
      "message": "Hello from Webflow!"
    },
    "files": [
      {
        "id": "file-uuid",
        "field": "resume",
        "filename": "resume.pdf",
        "type": "application/pdf",
        "size": 102400
      }
    ],
    "metadata": {
      "ip": "192.168.1.1",
      "user_agent": "Mozilla/5.0...",
      "submitted_from": "https://yourdomain.com/contact"
    },
    "created_at": "2024-01-15T10:30:00.000Z"
  }
}

Connect to Automation Platforms

Use your webhook URL to connect to:

Zapier - Connect to 6,000+ apps

Make - Build complex automations

Slack - Get instant notifications

Discord - Notify your team

CORS Configuration

By default, Atlas accepts submissions from any origin. For production, configure allowed origins in your project settings:

https://yourdomain.com
https://www.yourdomain.com

Spam Protection

Atlas includes built-in spam protection. No configuration needed - spam submissions are automatically filtered.

For additional protection, you can:

Enable rate limiting in project settings

Add a honeypot field (hidden field that bots fill out)

Honeypot Example

html

<form action="https://atlasforms.app/f/abc123xyz" method="POST">
  <!-- Honeypot field - hide with CSS -->
  <input type="text" name="_gotcha" style="display:none">

  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <button type="submit">Send</button>
</form>

Success Redirect

Configure where users go after submission:

In Atlas dashboard, go to your form settings

Set Success Redirect URL to your thank-you page

Optionally pass submission data in the URL:

https://yourdomain.com/thank-you?name={{name}}&email={{email}}

API Access

Access your submissions programmatically:

bash

# List submissions
curl "https://atlasforms.app/api/v1/forms/abc123xyz/submissions" \
  -H "Authorization: Bearer fep_your_api_key"

# Get a specific submission
curl "https://atlasforms.app/api/v1/submissions/{id}" \
  -H "Authorization: Bearer fep_your_api_key"

See the API documentation for more details.

Troubleshooting

Form not submitting

Check that the form action URL is correct

Ensure the method is set to POST

Check browser console for CORS errors

Verify your domain is in the allowed origins list

Files not uploading

Add enctype="multipart/form-data" to your form

Check file size limits for your plan

Verify the file type is allowed

Webhook not receiving data

Verify your webhook URL is accessible

Check the webhook delivery logs in Atlas dashboard

Ensure your server returns a 2xx status code

Example: Contact Form

Complete Webflow contact form with Atlas:

html

<form
  action="https://atlasforms.app/f/abc123xyz"
  method="POST"
  class="contact-form"
>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>

  <div class="form-group">
    <label for="subject">Subject</label>
    <select id="subject" name="subject">
      <option value="general">General Inquiry</option>
      <option value="support">Support</option>
      <option value="sales">Sales</option>
    </select>
  </div>

  <div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>

  <button type="submit" class="submit-button">Send Message</button>
</form>

Next Steps

Set up Zapier automation

Configure Slack notifications

Explore the API

Discord Squarespace