How to import contacts from Elementor to Mailmodo
Last updated January 24, 2024
Elementor is a popular WordPress website builder that allows users to create websites visually, without needing to code. It's a drag-and-drop page builder plugin that offers a user-friendly interface, enabling individuals to design and customize their websites in real-time.
In this article, we will learn how to integrate your forms built using Elementor with Mailmodo through webhooks. You can seamlessly import website form submissions into Mailmodo's database, and subsequently trigger customer journeys and execute bulk campaigns directly from the Mailmodo dashboard.
Before proceeding with integration, make sure you have access to Elementor Pro, since forms and webhooks are only available in the pro plan.
Step by step guide on how to integrate Elementor with Mailmodo
Step 1: [Mailmodo] Go to Integrations page and select Forms and landing pages → Add Form -> Select Elementor -> Click on Continue
Step 2 : [Mailmodo] On the step 1 of the wizard, provide following details:
- Form name -> Provide a user-friendly name to uniquely identify the form.
- Choose a list -> Whenever submission is made in Elementor, we will add the contact to a list in Mailmodo as well. You can either create a new list or use existing list for the Elementor submission.
You can use the chosen list to enroll contacts to the journeys whenever submission in made or segment your contacts to send targeted campaigns.
Step 3 : [Mailmodo] Click next and you will see the webhook endpoint which needs to be configured in your Elementor account. At this point, Mailmodo is waiting for a test submission to map the Elementor form fields with Mailmodo contact properties and complete the integration.
Step 4 : [Elementor] Go to Elementor dashboard → Select your website. You will be redirected to wordpress dashboard
Step 5 : [Wordpress] Go to Pages in wordpress → Edit page → Edit with elementor
Step 6 : [Wordpress] Click on your form. Make sure to give label to all the forms and form elements for better identification in Mailmodo
Step 7 : [Wordpress] In action after submit → choose webhook. In Webhook dropdown→ Add the URL from Mailmodo → Enable Advanced Data.
Please use a different webhook for every form on the wordpress site. For e.g. if you have two forms in Wordpress then create two different end points in Mailmodo for the same.
Step 8 : [Wordpress] Update your website to save the changes. Now, preview the webpaage and make a test submission.
Step 9 : [Mailmodo] Once a test submission is received. You will have to map form field with contact property in Mailmodo.
Step 10 : [Mailmodo] While mapping, you can choose to map form fields to existing contact properties or create new properties. Also, you can choose to not import the Elementor field as contact properties in Mailmodo.
Make sure each Elementor field in uniquely mapped to the appropriate data type in Mailmodo. For e.g. if you mapped Elementor date field to a string field in Mailmodo then it will be stored as string and not as date.
Please note we do not allow import of certain form elements for Elementor i.e. File upload, Password, HTML, hidden, re-Captcha, re-Captcha v3, HoneyPot and Step
Step 11 : [Mailmodo] Once the mapping is complete, click on Save to complete the setup.
Save button will not be enabled until email address field is mapped.
Step 12 : [Mailmodo] That's it. Once the form goes into Connected state, any new submissions on your Elementor landing page will be added as contacts in Mailmodo.
Contacts added to Mailmodo via Elementor will have Source set to Elementor
Step 13 : [Mailmodo] You can manage the connected form or view details about the imported contacts as per your needs.
It is recommended to create and connect a different form URLs for each landing page in your Elementor account to prevent any unforeseen issues.
Frequently Asked Questions
I made the submission in Elementor but it is not reflecting as contacts in Mailmodo. What can be the reason?
If you are making submission in Elementor but they are not reflecting in Mailmodo then it can be due to the following reasons:
- Form is not in Connected state i.e. current state of the form is either submission pending or disconnected.
- Elementor submission doesn't have a valid email address.
- Elementor has been edited after initial connection and now fields are not properly mapped in Mailmodo
- Webhook URL entered in Elementor is not mapping the endpoint for the form in Mailmodo
Why is the number of submissions in Elementor is not matching the contacts imported count in Mailmodo?
The number of submissions in Elementor may not match the number of contacts in Mailmodo due to the following reasons:
- Duplicate submission with the same email address is made. In such cases, contact properties in Mailmodo are updated with recent submissions.
- Submission didn't have a valid email address.
- Elementor form has submission prior to the integration setup -> Mailmodo doesn't sync form submission made prior to the connection.
I have edited the form for a landing page in the Elementor account. How do I change the form mapping in Mailmodo?
You will need to perform the following steps whenever you want to make changes to your Elementor:
- Publish the changes you want to make to your form in the Elementor landing page.
- Once published, open the updated Elementor landing page in the browser and make a test submission.
- Go to your Mailmodo account, click on the Manage mapping option for the connect form.
- You will see the latest submission available for mapping. Make changes as appropriate and click on Save.
- That's it. You have successfully updated the mapping. All new submissions will be imported to Mailmodo as per the new mapping.
Until you change the mapping, Mailmodo will continue to add or update contacts as per the mapping done previously. Any mismatch between the submission and mapped field will be ignored.
Can I use the same Mailmodo webhook endpoint URL in multiple forms in the Elementor landing page?
It is recommended to create a separate Mailmodo form (aka different endpoint) for each of your form in Elementor landing page.