DEV Community: ChrisDrit

Integromat is now Make, what’s the difference? (hint: not much)

ChrisDrit — Fri, 16 Sep 2022 13:04:12 +0000

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.

Add a default form block.

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.

Open up Make.com and create a new Scenario.

Search for and select Webhooks.

Integromat:

Make:

Select a Custom webhook trigger.

Integromat:

Make:

Add a new Webhook into Integromat.

Integromat:

Make:

Give your new Webhook a descriptive name.

Integromat:

Make:

Tap the “copy address to clipboard” button.

Integromat:

Make:

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:

Make:

Tap the Publish button and publish the site.

Open the site once published.

Fill out the form and submit.

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.

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

Integromat:

Make:

Everything is looking great so far!

Integromat:

Make:

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.

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.

Select the “Plain text” option.

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.

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.

Next republish your site.

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

CMS Collection Page

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

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.

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.

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

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

This time choose the Email field.

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.

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

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

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

…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.

Make & Integromat Creating CMS Items

Flip back to Make & Integromat and add another module.

Integromat:

Make:

Search for and select “Webflow”.

Integromat:

Make:

Choose the “Create an Item” option.

Integromat:

Make:

Create a new connection. Go through the authorization process.

Integromat:

Make:

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

Integromat:

Make:

(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:

Make:

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:

Make:

(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:

Make:

Tap the “Run once” button.

Integromat:

Make:

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

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

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

Integromat:

Make:

Check for the data submitted in the form.

Integromat:

Make:

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

Integromat:

Make:

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.

Once reloaded, go back to your CMD Editor.

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

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

Easy peasy!

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 🤩

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

Integromat:

Make:

Choose Webhooks again.

Integromat:

Make:

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:

Make:

The Webhook response module opens up with a Status field filled out of “200”. These are the HTTP Status Codes 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:

Make:

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:

Make:

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:

Make:

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:

Make:

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:

Make:

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:

Make:

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

Integromat:

Make:

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

Integromat:

Make:

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

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

So good!

Go back to the Webflow Designer and reload the page.

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

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

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

Integromat:

Make:

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

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

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

Webflow's 10,000 Javascript Character Limit [bypassed]

ChrisDrit — Sun, 11 Sep 2022 02:42:24 +0000

Webflow I love you.

You make web development fun again, but...

😡 Your 10k character limit for Custom Javascript Code is killing me!

Here's the quick and easy way to get past it 🤩

Step 1:

I create a string of characters 20,000 long. I know, I know, it's a 10k limit. But I really wanted to test this! 😅

Step 2:

I create a Javascript file and added those 20k characters to a constant. Then added a simple JS alert popup after it.

Then I hosted it on Github:

Step 3:

Went over to JS Deliver Doc's and looked up the URL I should use.

I love JS Deliver. This is what the URL looks like for me:

https://cdn.jsdelivr.net/gh/NoCodeQuest/webflow-10k-limit-bypassed/hello-20k.js

Step 4:

Bundled up the JS Deliver URL into a Javascript tag:

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/NoCodeQuest/webflow-10k-limit-bypassed/hello-20k.js"></script>

Step 5:

Added that JS tag to my Webflow page. I like to put these before the tag so the rest of the site loads first:

If I just copy & pasted the raw Javascript source from my Github (and it's is well over 10k characters), this is what you get:

Step 6:

Published my Webflow project, opened the live site:

💥 Boom!

Worked soooooo good 😅

Here’s the Webflow project share link if it helps.

Here's the Github Repo.

There's a bunch more you could do to make development, better. But this is a great start!

Tutorial: How to submit a Webflow Form into the CMS with Multi-Reference fields - Part 3

ChrisDrit — Tue, 24 Mar 2020 21:36:27 +0000

Howdy 👋

I love being able to submit my forms back into my CMS Collections, but there is no native way to do this in Webflow. So I decided to share how I accomplish this with a few extra tools.

With part 1 you have a Webflow form submitting into the CMS. With part 2 we layered on memberships, only members can add comments, but anyone can read them.

With this video, part 3, we’ll link a logged in member to all of their comments via Multi-Reference fields and give them a personalized dashboard to view them all.

Along with Webflow, native forms, and the Webflow CMS to store it all, I'm taking advantage of MemberStack, Zapier, and sprinkling in a bit of Airtable:

After you’re done with the video you can get:

1) Read access to this Webflow project.
2) All of the sharable Zapier zaps used to create this.
3) Access to the live site, click around and see how it works.
4) My cheatsheet. The step-by-step notes I created for this video walk through.

Get it here: https://nocodequest.com/commenting-system-with-webflow-part-3/

Part 2: How to submit a Webflow form to the CMS with a login system

ChrisDrit — Wed, 11 Mar 2020 19:58:48 +0000

Find part 1 here:

https://dev.to/chrisdrit/how-to-submit-a-webflow-form-to-the-webflow-cms-6ai

Howdy 👋

For this video, I build upon the learnings from part 1 and layer a login system on top of it.

Only logged in members can add a comment, but anyone can read them.

Here's my 9 minute screencast walking through exactly how to do this:

For the full post plus downloadable guides go to my site:

https://nocodequest.com/commenting-system-with-authentication/

How to submit a Webflow form to the Webflow CMS

ChrisDrit — Mon, 02 Mar 2020 13:33:04 +0000

A major limitation with Webflow is using a form and having that info submitted directly into your Webflow CMS.

Having this ability opens so many doors with what you can do on Webflow, yet it's been asked from the community for years, and Webflow doesn't have this feature on their roadmap.

So I decided to figure out how to quickly, and easily, solve this problem. By adding Zapier into the mix it become trivial.

Here is my 10 minute screencast walking through exactly how to do this:

Go to my site and find the full post and download the step-by-step PDF guide.

[No Code]Using MemberStack? Frustrated when your Dashboard button only shows after a page refresh?

ChrisDrit — Sun, 23 Feb 2020 10:24:52 +0000

Frustrated when your Dashboard button only shows after a page refresh when using MemberStack?

Yea... it's common, it's not just you 😉

Why does this happen?

The problem is not with MemberStack specifically, the problem is integrating any 3rd party service will have a natural latency.

Meaning… there is time that it takes to send a request to a service across the web, for that service to do something, and then send the results back to you across the web again.

This is what happens when using MemberStack from, say Webflow. It takes a few seconds.

How do I fix this?

Here's the 8 minute step-by-step video walk through to fix it:

If you prefer, there is a downloadable 123 page PDF Guide with 230 screenshots to walk through this setup at your own pace.

[No Code] How To Create Personalized Content for Logged In Members with Webflow and Memberstack

ChrisDrit — Wed, 19 Feb 2020 13:05:34 +0000

Just finished creating a 30 minute step-by-step screencast walking through how to setup a Webflow site, with MemberStack allowing logged in members to personalize their dashboards content.

Visitor signs up and becomes a member
New member selects some screening options
Based on selections member is shown relevant, personalized articles

Full control of your sites design in Webflow.
Using the Webflow CMS to store your member accounts.
Using MemberStack to provide members only access.
Personalized content through member settings.

To accomplish this I use:

Zapier
Webflow
MemberStack

Here's the video:

If you prefer, there is a downloadable 255 page PDF Guide with 495 screenshots to walk through this setup at your own pace at:

https://nocodequest.com/personalization-with-unique-member-dashboards/

[No Code] How To Create Unique Member Dashboards in Webflow

ChrisDrit — Thu, 23 Jan 2020 07:12:47 +0000

Howdy all 👋

While I've been developing software for over a decade, lately I've been doing a deep dive into the whole "No Code" movement that's recently getting more attention.

I've been recording screencasts with everything I'm learning and wanted to share my latest - creating unique dashboards for every new member on your Webflow site.

While this is fairly trivial when coding it, in the NoCode space it's not.

Here’s what it walk through:

Full control of your sites design in Webflow. Using the Webflow CMS to store your member accounts and unique content for each.
Using MemberStack to provide members only access.
With Zapier gluing the two together for a quick setup that I walk you through in this 16 minute video.

Thoughts?

Happy to answer any questions!

If you prefer a downloadable guide (185 pages w/377 screenshots) to walk through this at your own pace you can find it here:

https://nocodequest.com/unique-member-dashboards-in-webflow-using-memberstack/

Setting up gated content, for members only, with Webflow and MemberStack.

ChrisDrit — Thu, 02 Jan 2020 22:37:01 +0000

Howdy!

I always love getting ideas in front of people fast to gauge a market. I've recently ventured into the whole No Code thing and have been screencasting what I'm learning along the way.

Just put out a new one and wanted to share:

11 minute, step-by-step Video setting up gated content, for members only, with Webflow and MemberStack.

Full post:

https://nocodequest.com/membership-website-on-webflow-with-memberstack/

Creating a NoCode Ecommerce store with Webflow

ChrisDrit — Thu, 19 Dec 2019 13:27:11 +0000

Howdy!

As a software engineer I've been super eager to learn and understand more about this No Code movement. So much so that I figured while I go through this learning process it would be great to screencast each of my new learnings.

Here is my first one, creating a No Code Ecommerce store with Webflow. Would love some feedback!

For those who are interested, here it is on my site:

https://nocodequest.com/ecommerce-with-webflow