How can I create a form on my Webflow site for email newsletter subscriptions using Mailerlite without the embedded forms provided by Mailerlite and without using Integromate or Make briefly?

You can connect a Webflow form directly to MailerLite using MailerLite’s API and Webflow’s Form Action URL feature, bypassing embedded forms and third-party tools like Integromat or Make.

1. Get MailerLite API Endpoint and Group ID

• Log in to MailerLite, go to Integrations → Developer API and copy your API key.
• Go to Subscribers → Groups, create or choose a group, and note its Group ID from the URL (looks like /groups/123456789…).

2. Create a Webflow Form

• In Webflow Designer, add a Form Block to your page.
• Include at least one Email field, and optionally add First Name or other fields.
• Set the Name attributes of the fields to match the JSON keys MailerLite expects:
• Email field: email
• Name field (optional): name

3. Set the Form’s Custom Action and Method

• Select the Form, go to the Settings Panel.
• Under Form Settings:
• Set Action to: https://connect.mailerlite.com/api/subscribers
• Set Method to: POST

4. Add Form Submission via Custom JavaScript

• Go to Page Settings or use an Embed element in Webflow and insert the following JavaScript (adjust as needed):
• Use fetch() to send a POST request to MailerLite with the form data.
• Include the API Key in the Authorization header using the Bearer scheme.
• Format the body as a JSON object with email, name (optional), and groups.

Example outline (must be added with correct email field reference and security measures):

• Create a form.addEventListener('submit', …) function.
• Prevent default submission.
• Collect values from input fields.
• Use fetch('https://connect.mailerlite.com/api/subscribers', { method: 'POST', headers: { Authorization: 'Bearer YOUR_API_KEY', 'Content-Type': 'application/json' }, body: JSON.stringify({ email: userEmail, name: userName, groups: [GroupID] }) }).

Important: Do not expose your API key on the client side in production. For secure handling, consider using a lightweight backend server or a serverless function instead.

Summary

To connect a Webflow form with MailerLite without embedded forms or Make/Integromat:

• Use MailerLite’s API endpoint as the form’s action.
• Use JavaScript to submit form data via fetch().
• Avoid exposing API keys in client-side code; for production, use a secure backend.

This allows native-feeling MailerLite subscriptions using Webflow forms.