Integromat is now Make, what’s the difference? (hint: not much)
Tags: webdev, webflow, nocode, design
Published: 2022-09-16 13:04:12


> Tools: Webflow, Make, Integromat.

You may have heard.

Integromat is now Make.com💥

Problem is…

You’ve already spent a TON of time learning Integromat, wiring up Webflow to it, integrating other 3rd party services so you can create solutions for you and your clients.

But…

Does that mean you have to waste your time relearning everything just to successfully make the switch?

Nope!

Under the hood I’m sure they’ve done a lot to improve speed, etc…

But as far as your concerned the only real difference is a logo change, a landing page refresh, and a new branding color.

Phew! 😅

To show you just how little change there is, I’m going to walk you through a quick build submitting a native Webflow form into the Webflow CMS using both Make & Integromat as your glue service.

You’ll see each step of the process with each service, side-by-side, and it should be VERY clear just how little has changed as far as your builds are concerned 🤩

Let’s get started.

## Form Submits

Create a new Webflow project.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-1.png' loading='lazy'>

Add a default form block.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-2.png' loading='lazy'>

Now you need to set up a Webhook in both Make & Integromat so the form submission has somewhere to go.

Open up Integromat.com and create a new Scenario.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-3.png' loading='lazy'>

Open up Make.com and create a new Scenario.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-4.png' loading='lazy'>

Search for and select Webhooks.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-5.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-6.png' loading='lazy'>

Select a Custom webhook trigger.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-7.png' loading='lazy'>

Make:

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-8.png' loading='lazy'>

Add a new Webhook into Integromat.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-9.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-10.png' loading='lazy'>

Give your new Webhook a descriptive name.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-11.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-12.png' loading='lazy'>

Tap the “copy address to clipboard” button.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-13.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-14.png' loading='lazy'>

Back to your Webflow Designer. Select the Form Settings tab. Paste the URL you just copied from Integromat into the “Action” field. Choose the “POST” method.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-15.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-16.png' loading='lazy'>

Tap the Publish button and publish the site.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-17.png' loading='lazy'>

Open the site once published.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-18.png' loading='lazy'>

Fill out the form and submit.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-19.png' loading='lazy'>

Notice you land on a blank page with the word “Accepted” on the screen. This is normal 😃 Also notice the url is your Integromat Webhook URL that you added to the Forms Action field.

What happened is that you submitted the form to the Integromat (and Make) Webhook and this is how Integromat (and Make) responded to the form submission. You’ll change this shortly.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-20.png' loading='lazy'>

Flip back over to Make & Integromat and notice the Webhook was successfully received from your form submission.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-21.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-22.png' loading='lazy'>

Everything is looking great so far!

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-23.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-24.png' loading='lazy'>

Next you’ll create a Webflow CMS Collection, have Make & Integromat create a new CMS item with whatever you submitted in the form, and then redirect the users browser to another Webflow page.

## CMS Collection

Flip back over to your Webflow Designer and open up the CMS Editor (shown in the screenshot below). Tap the create collection button.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-25.png' loading='lazy'>

Give your new Collection a name. I named mine “Contacts” since I’m collecting the default name & email address on the form block.  

Tap the “Add New Field” button.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-26.png' loading='lazy'>

Select the “Plain text” option.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-27.png' loading='lazy'>

Name it “Email”, since that’s what you’ll be collecting from the form submission. Also you may have noticed but the “Name” field, which you also collect on the form submission exists by default.

Save the form field and create the collection.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-28.png' loading='lazy'>

Go ahead and create 5 sample items. You’ll be creating a CMS Collection page in a moment and it helps to have some CMS items when you’re creating it.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-29.png' loading='lazy'>

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-30.png' loading='lazy'>

Next republish your site.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-31.png' loading='lazy'>

This will get all of your CMS Collection additions added to the live site.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-32.png' loading='lazy'>

## CMS Collection Page

Go back to the page menu item in your Webflow Designer and select the “Contacts Template” under CMS Collection pages.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-33.png' loading='lazy'>

A CMS Collection page is automatically created for you when you create a CMS Collection. It’s a special page that has access to this specific Collections items.

Add a Heading element to your new page.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-34.png' loading='lazy'>

Within the Heading elements settings, check the “Get text from Contacts” option. This gives you access to all of the fields within this Collection.

Choose “Name” from the drop down list.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-35.png' loading='lazy'>

You’ll see the sample data’s name populate that field. Nice!

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-36.png' loading='lazy'>

Add a new Text element below your Headline element. Make sure to check the “get text from Contacts” option.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-37.png' loading='lazy'>

This time choose the Email field.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-38.png' loading='lazy'>

And it’ll now be populated with the data in that Collection items field. Notice in the screenshot below that it’s not an email address.

You selected a “text field” type for the email so it auto-populated with random text. If you had selected an email address field, it would have populated with a fake email address.

Using a text field in this case was done on purpose, it’s less restrictive for our quick walk through.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-39.png' loading='lazy'>

Republish your site so the new additions are included on the live site.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-40.png' loading='lazy'>

Open up the pages menu item and select your home page.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-41.png' loading='lazy'>

Now that you’re on the home page open up the live site from the publish button.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-42.png' loading='lazy'>

…and your live site is ready for you to fill out and submit the form. But don’t do that just yet, first you’ll want to add another module to your Integromat Scenario.

This new module will take the form submission and create a new Collection item for you.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-43.png' loading='lazy'>

## Make & Integromat Creating CMS Items

Flip back to Make & Integromat and add another module.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-44.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-45.png' loading='lazy'>

Search for and select “Webflow”.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-46.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-47.png' loading='lazy'>

Choose the “Create an Item” option.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-48.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-49.png' loading='lazy'>

Create a new connection. Go through the authorization process.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-50.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-51.png' loading='lazy'>

Once authorized you’ll see your site being loaded into Integromat.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-52.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-53.png' loading='lazy'>

_(**Note**: With Make my site loaded almost instantly versus Integromat took a bit and showed me a “loading” message. Your experience may vary.)_

Select your site and Collection from the dropdown list.

Tap on the “Email” field and choose the email submitted the first time you tried this.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-54.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-55.png' loading='lazy'>

Tap on the “Name” field and choose the name submitted in the form the first time you submitted it. Leave the “Slug” field blank, we’ll let it auto-populate.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-56.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-57.png' loading='lazy'>

_(**Note**: You’ll notice the lack of “Header” and “Method” fields in the popup list between Make & Integromat. That’s due to advanced options in the first Webhooks module. I turned them on with Integromat, but did not in Make.)_

Make sure to check the “Yes” option under the “Live” field at the very bottom. Otherwise your form submissions will be staged in the Webflow CMS instead of automatically published for you.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-58.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-59.png' loading='lazy'>

Tap the “Run once” button.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-60.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-61.png' loading='lazy'>

Go back to your live site that you left open. Fill out and submit the form.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-62.png' loading='lazy'>

You’ll find the same “Accepted” screen. That’s okay, will fix this shortly.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-63.png' loading='lazy'>

Flip back to Make & Integromat and find that your Scenario successfully ran.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-64.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-65.png' loading='lazy'>

Check for the data submitted in the form.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-66.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-67.png' loading='lazy'>

Check to see if Make & Integromat created a new CMS item. According the screenshots below, they both did just that.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-68.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-69.png' loading='lazy'>

Flip back to your Webflow Designer and reload this browser tab. This is needed so that the latest form submission will show up in your CMS Collection.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-70.png' loading='lazy'>

Once reloaded, go back to your CMD Editor.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-71.png' loading='lazy'>

Find you new form submission listed the top of the list.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-72.png' loading='lazy'>

Open it and find everything you submitted successfully added to the Webflow CMS.

Easy peasy!

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-73.png' loading='lazy'>

## Make & Integromat Browser Redirect

Remember that “accepted” message with a blank white page after you submit the form? Yep. Now you’ll fix that 😃

If you look at that CMS item (screenshot below) you’ll notice a url for it. Each CMS item has a unique url.

The first part of the URL is always the same:

`webflow-form-submits-with-integromat-an.webflow.io/contacts
`
The last part, the “Slug” is unique for each CMS item:

`/chris
`
And that’s the page you’re going to tell Integromat to redirect to 🤩

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-74.png' loading='lazy'>

Flip back over to Make & Integromat and add another module.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-75.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-76.png' loading='lazy'>

Choose Webhooks again.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-77.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-78.png' loading='lazy'>

This time select “Webhook response” which should be the only option.

This is paired with your first module, the “Webhooks” module.

What this does, and this is something Zapier can’t do, is respond the web browser telling it what to do.

In our case, we are going to tell the web browser that we want it to redirect to the newly create Contact page.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-79.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-80.png' loading='lazy'>

The Webhook response module opens up with a Status field filled out of “200”. These are the [HTTP Status Codes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status) that the web browser understands what to do with.

You don’t need to understand them all, if your curious, checkout the link above.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-81.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-82.png' loading='lazy'>

What’s important for you to know is that a response of “200” tells the web browser everything is okay and don’t do anything.

Instead, we want a response of “301” which tells the web browser, everything is okay but we want you to redirect the web browser to another page.

With the “301” response code added, tap on the “show advanced settings” option at the bottom of the popup.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-83.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-84.png' loading='lazy'>

Now tap on the “Add item” link.

Within this new popup are some fields for you to fill out. What you are doing is telling the web browser, with the 301 code, that it needs to redirect to another page.

But what page?

Well, that’s what you’ll add here. This is called a “custom header” and it is information required to be sent back to the web browser in order for this to work.

The specific type of header, there can be many “types” of headers, but this specific type of header is a “Location” header.

So go ahead and add that as the value for the “Key” field.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-85.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-86.png' loading='lazy'>

The location header is the header a web browser looks for when it receives a 301 response. When it find the location entry, it looks at it’s value for a URL. This is the URL the browser will redirect your user to.

In our case, we want to redirect to the URL for our site and CMS Collection. You saw that just a moment ago:

`webflow-form-submits-with-integromat-an.webflow.io/contacts
`
Add that into the value field and make sure to prepend  `https://`  to it.

`https://webflow-form-submits-with-integromat-an.webflow.io/contacts `

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-87.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-88.png' loading='lazy'>

But that’s not all.

If you remember, each unique item is accessed by its “Slug” value. You saw that in the Webflow CMS a few steps back. A Slug is unique to each CMS item.

Luckily for us, when we created our new CMS item from Integromat, Webflow sends back to Integromat the Slug that it automatically created.

That now makes it available to us and we can add it to our redirect URL 🤯

Tap your mouse into the Value field and up pops the list of fields we can add. Choose the “Slug” field from the “Create an Item” step.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-89.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-90.png' loading='lazy'>

Each time a user submits a form, we create a CMS item, Webflow responds with the unique Slug that it created for this item, we grab it and stuff it into the URL that the web browser will redirect to.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-91.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-92.png' loading='lazy'>

It should look like the screenshot below when you’re done.

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-93.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-94.png' loading='lazy'>

Tap the “Run once”, let’s give a try!

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-95.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-96.png' loading='lazy'>

Go back to your live site and enter new contact info. Tap the submit button.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-97.png' loading='lazy'>

💥 Boom! You’ve been redirected to your new CMS Collection Page pulling and displaying the correct item from the Webflow CMS.

So good!

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-98.png' loading='lazy'>

Go back to the Webflow Designer and reload the page.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-99.png' loading='lazy'>

Open up the CMS Editor and find your newly created contact, Bob.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-100.png' loading='lazy'>

Open up the Bob contact and find all the info, along with the auto-generated Slug.

<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-101.png' loading='lazy'>

Flipping back to Make & Integromat you’ll see that it all ran successfully!

Integromat:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-102.png' loading='lazy'>

Make:
<img src='https://nocodequest.com/images/make-vs-integromat/make-vs-integromat-103.png' loading='lazy'>

## Success with Make & Integromat

Notice how little changes there are between the two?

Notice how you don’t have to relearn anything? 😍

Life is good…

Everything you’ve already learned, all the time you’ve already invested with Integromat, applies just the same with Make.

No extra time, effort, work, or pain required 😃

🍻 Just success.

---

### Level up with more tutorials & screencasts

[https://NoCodeQuest.com](https://NoCodeQuest.com)

I'm pushing `Webflow` beyond anything its capable of alone using `Make`, `Integromat`, `Zapier`, `Airtable` & `Memberstack` 😅 

...and sharing everything I learn along the way.

---