To integrate a newsletter signup form in Webflow with MailerLite without using embedded forms or third-party tools like Integromat/Make, use the MailerLite API with a custom Webflow form that submits to a backend endpoint you host.
1. Set Up Your Webflow Form
- Add a Form Block in your Webflow project.
- Include fields like Name and Email, and a Submit Button.
- Give each field a unique Name Attribute, such as
name and email, under Element Settings.
2. Create a Custom Backend Endpoint
- Use a backend platform like Cloudflare Workers, Netlify Functions, or Firebase Functions to handle form submissions securely.
- This backend will:
- Accept POST requests from your Webflow form.
- Authenticate with the MailerLite API using your API key.
- Send subscriber data (email, name) to a selected MailerLite group or list.
Mailerlite API endpoint to add subscriber:
POST to https://api.mailerlite.com/api/v2/subscribers
Use an authorization header: Authorization: Bearer YOURAPIKEY
Required JSON structure:
email: subscriber’s emailname: subscriber’s name (optional)
3. Connect Webflow Form to the Endpoint
- In Form Settings, set the Form Action to the URL of your backend endpoint.
- Set the Method to POST.
- Make sure the backend supports CORS for Webflow's domain.
4. Handle Responses and Errors
- On successful subscription:
- Return a 200 status and optional JSON message.
- Webflow can show the Success Message block.
- On errors:
- Return appropriate error codes.
- Webflow can show the Error Message block.
Summary
Set up a custom backend endpoint that receives your Webflow form data and uses the MailerLite API to add the subscriber. Point your Webflow form's action to this endpoint. This avoids using MailerLite’s embed code or third-party integration platforms.