In this tutorial we're going to look a typical scenario where you build a landing page with Elementor, and then have Emercury automatically follow up with every lead gathered by your Elementor form.

We will achieve this through an integration platform known as Integromat. It allows you to build your own custom integrations between your favorite apps.
​
[Note] We now have a one-click native integration with Elementor

This means that you no longer need to build a custom integration between Elementor and Emercury in most cases. If you want, you can just click on the button, get the add-on and integrate in seconds.

However, you may still want to read the custom integration guide that follows on this page. It is still useful if you want to learn how to build your own integrations between Emercury and the rest of your software stack. It's also useful if your integration needs are especially elaborate and complex and not covered by native integrations.
​

=======================================================
​
​In this integration guide we will go through a simple scenario. 

In the process you will learn some basic, but crucial lessons to using Elementor and Integromat. You will also gain an understanding about you can integrate your different software solutions with Emercury.

In this tutorial, we assume that you’re brand new to both Elementor, Wordpress and Integromat, so some of the information might be redundant to you. We still urge you to at least skim through all sections of the walk-through. It will take you just a couple of minutes, but it will make sure that you’re not missing out on anything crucial.

Log into your Wordpress Dashboard, and choose "Pages > Add New" from the left menu. 

On the page creation screen be sure to type in a title in the field that says "Add Title", and then click the blue "edit with elementor" button.

Once Elementor loads, click on the Folder icon in the middle of the screen. This will open up the list of templates.

Depending on the template that you choose, the form inside it might or might not have the appropriate fields to allow for integration with Emercury. This is because the integration we use requires both a first name and last name to work properly.

For this tutorial, we purposefully chose a template that only asks for "name", so that you can see how we can adapt it for our purposes.
​

All you have to do is click anywhere in the form, and you will see the left panel automatically display all your form options. 

Just be sure to give your form a name before we do anything else. It will come in very handy later.

In this scenario we'll adjust the fields so that they match the requirements of our integration, namely that it asks for both a first and last name. However, in the process you'll learn how to adjust forms to meet your needs in general as well.

2c) Let's add a "Last Name" field as well

If you look to your right, you will notice something weird. The design no longer looks neat and the fields are "out of whack". 

This a common situation whenever you modify the types or number of form fields in an Elementor template as it doesn't adjust the design automatically. You have to adjust the design yourself. The good news is that most of the time this is simple.

In this case the issue is that when we created the "Last Name" field, Elementor chose a 100% width by default. But the design is meant to have all fields and the button all fit on the same line. That is 5 items total. So in this case, we have to adjust the width of the fields to be 20% each (as 100% divided by 5 items is 20% each).

Note: You have to adjust the width of the other 4 items as well. The template has them set as 25% as the design originally had 4 items on a single line. In addition to changing the "Last Name" field to be at 20%, you need to do so for the other 3 fields and the submit button in order to get the same "look" as the original template.

But wait! The order of the fields isn't right either. It makes a lot more sense to have it as first name, then last name, and then the email and phone number. By default last-name is last in order because it's the last field added to the form, but we want to change that. Fortunately, that's a matter of dragging it into the right place.

2d) Warning: Make sure the form fields are valid (have IDs)
​*Without this your Elementor forms can fail mysteriously and without explanation

Most of your form fields in Elementor will have an auto-generated ID. Either because it gets created when you create the field, or because the template you use has defined them for you. 

However, sometimes you'll get a great form and find that it mysteriously fails and refuses to capture or send form data for certain fields. This is because those fields don't have an "ID" defined. 

So in this scenario we're going to define an ID for all of our fields. Let's do it with the First Name Field to start with.

Next, we'll do the same with the other 3 fields. In order, we'll give them the following IDs: "last_name", "email_field" and "phone_field". With this you avoid any possible form submission errors, and will make it easier to recognize the fields later on.
​

In order to connect Elementor and Emercury we will be using a very powerful integration tool called Integromat. A free Integromat account gives you access to all the features you need for this and most scenarios.

But you will also get an idea about how you can use Integromat to create powerful custom integrations between Emercury and all your favorite software. The possibilities are endless.
​

Just find the "Create a New Scenario" button anywhere in your Integromat dashboard.

In the screen that follows, we will choose webhooks because this is the fastest way to pass Elementor data to your software of choice. Just type in "Webhooks". Next, click on the Webhooks Icon to get a checkmark on it.

Next, search for "Emercury" and click the Emercury icon to get it checkmarked as well. Then click on the continue button.

Simply find that big question mark in the middle of your screen

Right click on it until you see the choose module option.

Choose Webhooks from the list that appears on the right

First, you will want to set up the webhook on the Integromat side. You should probably see a dialogue for choosing a webhook. It triggers automatically after you choose the module which we chose in the previous step. 

If you don't see it, just click on the "Webhooks" module again.

Simply click on the add button, and then on the lift, choose a name for your webhook. We chose "My First Elementor Landing Page".

Next, click on that "Copy Address" button. We're going to need to paste this address inside of Elementor options.

Just go back to Elementor and look at that left properties panel that let us add and change form fields and such. You'll notice there's a tab called "Actions on Submit". In it you'll find you can add the action called "Webhooks". Go ahead and do that.

You will notice that immediately after this, a new tab called "Webhooks" will appear at the bottom. Click on it, and just paste that webhook address we copied from Integromat.

Due to how this integration works, you need to do a test submission in order for Integromat to understand what values the landing page may send to the webhook. 

First, in your Integromat scenario you want to click on the "Run Once" button. This lets it wait for one set of incoming data. It's perfect for testing things.

While your Integromat scenario is running in the background, you want to submit a test submission. In order to do this, you will need to preview your page so that you can use it as an actual visitor would. 

Just find that eye-icon on the bottom left. That's your preview button. Click on it and it will open up a the page preview in a new tab. 

Once your Landing Page opens up fill in some test data.

We put in "TestFirstName", "TestLastName", "[email protected]" and "123-456-789" in the appropriate fields and click "Get Started" to submit the form. 

The very second that you hit the submit button on your landing page, you should see a balloon pop-up on the Integromat side. It means that it received the data successfully. If you click on the balloon you can even see the data it received. 

If you click on a specific field and expand it, you will see which fields it received a submission for. In this case they're the IDs we defined in a step earlier, that is first_name, last_name, email_field and phone_field.

If you click to expand on one of these fields, you can see it successfully received the data we used in our test submission. In this case our fake 123-456-789 number.

Click the plus button on the first module, and then choose Emercury from the list that presents itself.

Choose "Update Subscriber" from the list of Emercury Modules.

Scroll down to the Email Field, and click inside it, to get the typing cursor. This will make a list of values appear in a pop-up. These are the values that were sent here by Elementor.

Click on the "email_field" option to expand it, and you will find "value" under its data. You'll even notice on the right that it shows (in a gray small font) what we used in our test submission, that is "[email protected]". 

This gray part is just a helpful feature from Integromat, where it tells you what was the last value in here, making it easier to recognize you're choosing the right thing.

Now, if you go ahead and click on that tag-like "value" button, you'll see it auto-inserted into the "Email Address" field on the Emercury Module side of things. All this means is that anytime someone submits this form, the value of "email_field" will get automatically sent as the email address to Emercury.

Next you will want do the same with the first-name and last-name fields:

Then we need to handle two required and mandatory fields. That is the date of submission field and the submission url field.

Under Optin Date you just have to place the Integromat "now" option. It is found under the calendar-like tab. This sends a current timestamp to Emercury. Since we're using Webhooks which work instantly, this timestamp will be the same time as when the person hit the submit button (at most off by milliseconds).

Next you want to type in (or copy) the url of your landing page once published. This is a mandatory field for adding a person to an email list. We need to know when and on what page they submitted their information, or signed up.

Click the blue OK button on this module, and you're done!

We're going to do another test submission just like before, but this time, the test data will actually end up in your Emercury account. 

Yes, it means that what you submit in your Elementor form will instantly appear in your Emercury account. And if you have an automation follow-up set-up, it means that the second you submit this Elementor form, it will trigger an automation in Emercury. Pretty cool right?

If everything works out, you can go into your Emercury account and check the audience that you chose, and you'll see a new contact has appeared. You will also see a "1" pop up over the two modules of your Integromat scenario. 

This means that the scenario has successfully processed 1 lead for you. In this case it's this last test submission that we did. 

If you want this scenario to run 24/7 and instantly send all of your Elementor Leads to Emercury automatically on autopilot, be sure to flip that "On Switch" at the bottom left.