In the Systeme.io tutorial, I want to show you how you can integrate WordPress with Systeme.io. Now, there is no native integration between these two platforms, so you do have to be a little bit creative. So what I’m going to be doing is showing two ways that you can use Systeme.io’s backend with your WordPress website. Now, I first came across this issue as soon as I signed up with the platform. I’d been with WordPress for a very long time, so a lot of my work was there. But I also wanted to use the Systeme.io marketing platform to collect things like leads, lead people through things like funnels. So it became a bit of an issue, and I only recently thought about actually trying to figure out a way. So this is what I’m going to be First Method showing you today.
First Method: Embedding Web Forms
Setting Up a Web Form in Systeme.io
The first method I’m going to show you is actually how you can use web forms created in Systeme.io and embedded on your WordPress website. So let’s go ahead and get started with that. The first thing you want to do is come across to your Systeme.io dashboard, and you want to come to funnels and choose any funnel that you want to use. You can create a new one; you can just add this widget or this form on the back of any other funnel. So I’m just going to put it inside of this test funnel that I have.
Customizing the Form Design
Now what you want to do here is find a design that’s the closest to what you’re trying to create for your website. Once again, an inline form is actually something that appears perhaps on a page or inside of a blog post itself. So if you come through here, you basically just want something very basic, something that’s just straight to the point where someone can come in and add in their name and email. So I’m thinking probably even something along the lines of this. It’s very basic, but we’ll go and customize it a little bit.
Styling the Form
So what I’m going to do now is just quickly come through. I’m not going to spend too much time. The first thing I’m going to change is this green background; it’s pretty. I, it’s a bit of an ISO, I’m not going to lie. So I’m just going to choose one of my brand colours. Okay, come to background colour, paste it in the hex, and boom, there we have blue. So this is in the settings part. If you want to change the width, you can also as well. I’m just going to leave it by default; it’s going to be more optimized this way.
Adding Text Information
And then what I’m going to do is come back to page settings, click on the text, and I’m just going to write a little bit of information for why they would want to put in their name and email. So join thousands of funnel fanatics as we build and optimize sales funnels, something like that, okay? And I’m just going to first of all just style it a bit so it’s quite big. So I’m just going to drag it down, make it look a little bit nicer, somewhere around there, 34. I’m going to center it.
Configuring the Form Button
I’m also going to change the font. So click on Google fonts here on the left, right, and select. I’m going to have a look what Montserrat looks like. It’s a bit big. Maybe Poppins, that’s not too bad. I might actually just reduce the font size a little bit more and reduce the line height a little bit so it doesn’t look too bad. Something around there, I think looks pretty good, okay? And just a little bit more. And then at the bottom here, it’s quite a big gap in my opinion between these two. And if I click on it once again, you’ll notice we have a margin. So I’m just going to remove that, bring it a little bit closer, maybe even give it five, okay?
Finalizing the Form
And then just quickly edit this. So enter your name and email to get sent the invite link, something like that, once again, center it. And I might change the font real quick as well, maybe to Lato and then drop it down a little bit, okay. So that looks pretty good. Now you’ll notice we only have a name here. So let’s go ahead and duplicate that. And then the top one which has email, we’re just going to click on the top left into input type, choose first name like that. And I’ll just enter, and here enter your. I’ll just put your first name, okay? And then down here, I’ll change this to your email address. There’s a lot of fillers in there, so keep it nice and easy. Make all the style the same, okay? Now, apart from that, the button looks pretty strange. So we’re going to create full width, okay, so it looks a lot nicer already. And then we’re going to give them a reason to do it. So get sent. I might even do capitals, get sent the invite link, okay, something like that.
Setting Up Form Submission Action
You can see that I’ve added a lot of padding, 100. So we’ll remove that. Looks pretty good. I’m not going to spend too much more time on this, maybe just change the text, change the boldness to 700, and maybe even make it a bit smaller, okay, something like that. And then finally, padding, we’ll give it 10, okay, 10. And that doesn’t look too bad at all.
Form Submission Action Configuration
So there’s my form. If I really wanted to be pedantic, I could play around with the padding and things like that. But for the sake of this tutorial, I’m not going to waste your time too much. So I’m happy with that. The only thing you need to make sure is inside of here, click on the button; it says at the top left action when the button is clicked.
Redirecting After Form Submission
So when someone submits the form, where do you want them to go afterward? Do you want them to redirect to another page? Do you want them to maybe go to a funnel step? It’s entirely up to you. You can even put like file download if you’re giving away an ebook or something. But I’m just going to put maybe here next URL step, sorry, not next URL set, open URL, and I’m just going to put in here a subscribe page that I have, right? So funnelscene.com, of course, there’s subscribed. This is basically just a page that says, hey, thanks for subscribing. Don’t forget to, you know, subscribe on YouTube and all that sort of stuff. So I’ll just put that there. So once they fill in their details, they’ll get redirected to that page where I can offer them more bits and pieces, okay? That’s the first bit done. Hopefully, you guys are still here.
Embedding the Form on a WordPress Page Using Elementor
Let’s click on Save changes, okay, and let’s go ahead and exit out. Now since we have completed this form, let’s go ahead and click on script, and this is going to be the script that we’re going to embed on another page. So copy script to clipboard, right? And now let’s go and add it to a page.
Adding the Form to a WordPress Page Using Elementor
So I actually did a little review of the Systeme.io a couple of, I think it was last week maybe, my VA actually wrote it. I just edited a few things. So what I want to do is go ahead and scroll to the bottom, and I want to put this form down here, right? Obviously, I’m using Elementor; that’s why I have this thing here. But if you wanted to use it for any theme, I’ll also show you another way how to embed.
If you’re using Elementor, come across and look in here for an HTML widget, right? Super easy, and just drag it in. Now, all you need to do is paste in that little code that you just copied, right? And I’ll just copy this one more time, copy. Make sure you’ve got the right one and then click on update, okay? And it’s not going to show right off the bat, but when you look at the page, it’ll be there.
Previewing the Form on the WordPress Page
So let’s just wait till that’s updated. It’s all good. Let’s click on it, okay? And if we scroll right down to the bottom, it’s quite a big article. You’ll probably notice it’s not there now. Sometimes it will be, sometimes it won’t. It’ll depend on your caching policy for WordPress. It’s one of these things which is quite niggly about WordPress. If you want a really fast website, then sometimes you sacrifice cache. But if we go to an incognito window, which hasn’t got any cache stored, so let’s just go ahead and load it, and I’ll scroll to the bottom. And in a few seconds, boom, there is our form where people can now go and fill it in, right? And then that is good to go. So it’s, you have to enter a valid email, so that’s perfect. And I should probably also mention if you don’t use Elementor and you’re trying to add in the form, what you can also do is once again copy the script, just come to the regular Builder, whatever Builder you’re using, there should be a text module. If you don’t have an HTML module or a code embed module, then you can just use the standard text module here and just paste it in here. And then the same thing will happen, once again, once you preview the changes, the form will appear wherever you’ve embedded it, right? So just make sure you use that as well.
Second Method: Using Iframes
Now let’s talk about the second method for actually embedding or integrating WordPress and Systeme.io I guess you could say. And this is using iframes, right? We’re going to embed entire Pages onto your website. So instead of being a Systeme.io domain or subdomain or whatever it might be, what we’re going to be using is our WordPress domain, creating a brand new page in it, and then embedding a full funnel step so it looks like that funnel step is a part of the website. So let me show you what I mean.
Embedding Systeme.io Pages Using Iframes
I’m just going to for this example use this particular page. There’s nothing special about it; it’s just a demo page I use. So what we’re going to do is come across; I’m going to have this link ready, so I’m going to copy that. This is a page I’ve just created, as you can see, funnelscene.com/com-slash test funnel. And I’m just going to paste this code in here real quick. And what I’ve done is I’ve played around with a ton of different embed codes, and you can actually get away with just this one here, right? So I’ll just paste it here and explain it.
Configuring Iframes for Seamless Integration
So what we’re doing is creating an iframe with the source, and the source is going to be this website. So I’m just going to copy this and paste it here, okay, like so, right? So that looks good. And then we’ve also got a style, 100 width, and then we’ve got this height, 100 VH. Now, for some reason, if you use a percentage, it doesn’t work. I guess it’s trying to keep the aspect ratio, and the 100 VH is not going to be perfect for all devices; however, it’s pretty good. So let me show you what I mean.
Embedding the Systeme.io Page
So I’m going to go ahead, click on update, and then I’m going to open this page in an incognito window like so, right? You can see here forward slash test funnel, and then if you look at the page that’s loading, it’s actually this funnel step. So this does work well. There are two little niggly things where they’re on the right here; you can see we’ve actually got double sliders, right? So depending on what size your desktop resolution is, you may have two different types of scrolling sliders here. It just scrolls up this tiny little bit on the right, and then you’ve got the full page on the left.
Considerations for Iframe Integration
First issue, not really that big a deal; if someone saw it, they wouldn’t really notice it, but just know that that’s there. And the second one is, first, it has to load your website, and then it has to load the Systeme.io website as well. So it’s going to take double the amount of loading power to produce one page instead of just loading from one site; however, this still does work, and it still is actually pretty quick to load. This loaded in probably two seconds, which is extremely possible in terms of Google’s eyes. And it’s also got a very nice and attractive domain name. So that’s two ways you can do it. If you want this code, you can either pause the video now and type this out if you want to download the code.
Conclusion
I’ll also put it in a text file, put a little opt-in below this video, and you can go ahead and download that Summary, but that’s basically how it works. It’s actually really quick and simple to use. So you have, once again, the form embedding which you can put all over your website. There’s all different sizes and shapes inside of a Systeme.io that you can use or you can do the embed style where you can actually embed pages from Systeme.io on your website which uses your own WordPress website domain plus you get to integrate it. So it takes all of the emails collected, and it puts them inside of your Systeme.io dashboard. So that’s it, guys. Hopefully, you weren’t too confused about it. It’s really simple once you’ve done it a few times.
Credit Goes To:
Youtube: Funnel Scene
