How can I create an email template using variables in Mailjet and Zapier for form submissions in Webflow?
TL;DR
- Create a Mailjet email template with
{{var:}}placeholders and note the Template ID. - In Zapier, set Webflow form submission as the trigger and Mailjet's "Send Email Using a Template" as the action, mapping form fields to template variables and enabling automated, personalized emails.
To send Webflow form submission data as a dynamic email using variables via Mailjet and Zapier, follow these steps to create your email template and automate the process.
1. Create a Mailjet Email Template with Variables
- Log in to Mailjet, go to My Templates, and click Create a new template.
- Use Drag-and-Drop Editor or HTML editor, depending on your preference.
- Insert variables/placeholders using Mailjet’s syntax:
{{var:variable_name}}. - Example: “Hello, {{var:name}}. Thanks for your message: {{var:message}}”
- Save the template and switch it to Published mode.
- Note or copy the Template ID for use in Zapier.
2. Set Up Your Webflow Form
- Go to your project in Webflow Designer.
- Select a form block and ensure all fields have unique names or IDs (e.g.,
name,email,message). - In Project Settings, under Forms, confirm the email address Webflow sends submissions to (Zapier will override this).
3. Connect Webflow to Zapier (Trigger)
- In Zapier, click + Create Zap.
- Set Webflow as the Trigger App.
- Choose the Form Submission event.
- Connect your Webflow account and select the correct site and form.
- Test the trigger by submitting a sample form on your live site.
4. Add a Mailjet Action in Zapier
- Add an Action step and select Mailjet.
- Choose Send Email Using a Template.
- Connect your Mailjet account.
- In Email Settings:
- From Name/Email: Use appropriate sender identity (must be validated in Mailjet).
- To Email: Use Webflow form’s email field using Zapier’s dynamic fields.
- Template ID: Paste your Mailjet Template ID.
- Under Variables, map Webflow form fields to Mailjet variables.
- Example:
name= Webflow field “Name,”message= “Message,” etc.
- Example:
5. Test and Turn On Zap
- Complete a Zap test run with the form submission payload to check if Mailjet renders the template correctly.
- If successful, turn on the Zap.
- Submit another real form to confirm email delivery with dynamic content.
Summary
Create a Mailjet template with placeholders like {{var:name}}, then use Zapier to connect Webflow form submissions to Mailjet’s “Send Email Using a Template” action, mapping Webflow fields to Mailjet variables. This enables personalized emails using form data automatically.