How forms work on your static site – Simply Static Webinar Series, Episode 2

[00:00:04.240] - Nathan Wrigley
This episode of the WP Builds podcast is brought to you by GoDaddy Pro, the home of managed WordPress hosting that includes free domain SSL and 24/7 support. Bundle that with The Hub by GoDaddy Pro to unlock more free benefits to manage multiple sites in one place invoice clients and get 30% of new purchases. Find out more at go dot me forward slash WP Builds. Hello, Patrick, how are you doing?

[00:00:38.360] - Patrick Posner
Oh, I'm fine as you are. You ready for some static side?

[00:00:42.780] - Nathan Wrigley
Oh, I love it. He's all enthusiastic. He's ready. He's ready to go. That's Patrick. That's Patrick Posner, who is the developer of the simply Static plugin. I'm Nathan Wrigley. I run WP builds. We go on about WordPress quite a lot, actually. That's basically what we do. So this is going to be going on about WordPress. I'll just give you some context. This is the second in four episodes that we're going to be doing. We did an episode last week in which Patrick demonstrated how you can make your site static. What does that static? Sorry, what does that mean? What does it involve? How can you use this plugin, what features there are and all of that. So be sure to cheque that out, that's [email protected]. Go to the archives menu at the top and search down for demos. And you want to look in there because Patrick's episode is contained in there. But this one is a bit different. We're going to be talking today about forms, as Patrick just said, and I guess probably Patrick, we didn't really rehearse this so much, but we should probably explain why forms and static sites aren't necessarily compatible, if you know what I mean.

[00:01:55.700] - Patrick Posner
Why?

[00:01:55.880] - Nathan Wrigley
Is there a problem here? Should we begin there?

[00:01:58.360] - Patrick Posner
Yeah, absolutely. So when we talk about forms, we talk usually we are talking about form plugins. So things like contact form, seven, gravity forms, you name it. There are like a multitude of different pretty nice and decent form plugins out there and they are not really prepared to work in a static environment out of the box. Because the whole reason we're doing this static site conversion thing is that we separate the presentation of our website from the dynamic parts. So WordPress is either completely offline because you used something like local WP, or you have it protected with basic off and shut down with a firewall. And whatnot the expected functionality behind forms is someone submits it, it will be tracked within your WordPress website and something happens, be it an email, be it submitting the contact information to your newsletter, provider of choice, things like MailChimp or so. But this whole interaction will not happen on a static website because there is no server and no PHP to process this information. So if you click just the submit button on a static website, nothing would happen, right? Because there's no server to process the information to send an email or anything like that.

[00:03:26.980] - Patrick Posner
And that's the whole problem. It's pretty much the dynamic thing on a static website, which traditionally would never happen. But as we all know, contact forms are quite important and almost everyone these days needs some kind of contact form. So, yeah, we are going to be doing something about that. To make that work, and to make it even easier, we use existing plugins. In our particular example, we will work with contact form seven, but the process is kind of adaptive to all kinds of different form plugins. And we will also show you some tricks to make form plugins work with simply static that are not specifically labelled as compatible with Simplistatic.

[00:04:16.080] - Nathan Wrigley
Perfect. Yeah, that's great. What a great introduction. So we know now that there's a problem with static sites and with forms because there's basically no server switched on in the background. So you submit that form and what does it do? So we'll find out how that works. Just a quick one. If there's anybody that is watching this live and they want to give us some comments or you want to ask a question, we had a few questions in last week. If there are any questions, we'll provide a little bit of time at the end and get those answered if we possibly can. The other thing to say is, if you are watching this and you want to drag your friends, colleagues, relations, pets, enemies, anybody that you like in to watch this, probably the easiest way is to direct them to that forward slash live. That's probably the easiest place to go. And you'll need a Google account because it's got YouTube comments buried onto that page. So log into your Google account and give us a little comment there. Now, Patrick, we're going to need to share your screen, I guess, to make this all make sense.

[00:05:17.290] - Nathan Wrigley
So let's make that happen right now. Here we go. So take it away and if anything crops up in my head, I'll interrupt.

[00:05:27.020] - Patrick Posner
Yeah, perfectly fine. So, last week, as Nathan already said, we talked about all things deployment. We have our pretty decent little photographer website up and running on Netlify, which is completely static. And we also already prepared a little contact page which we will be using today to show you all the magic behind static websites and how contact forms work in that setup. Before we're going into all the fancy parts, I want to talk about the most frustrating part of this problem with having a dynamic website and a static website. And your worst enemy, so to say, is cause. What is cause is kind of a technical thing, but I try to explain it as easy as possible. So, as part of increasing the security in the internet, most of the big browser providers decided on a standard called Course, cross site resource sharing, which means that you can't submit a form from one website and receive it at another website. And that's exactly what happens on a static site setup. You have your WordPress website which is like WordPress MyDomain.com and you have your static website MyDomain.com. And if you submit the form, what usually happens is that Chrome or Firefox or Safari or whatever browser you use will tell you, hey, you aren't allowed to do that.

[00:07:09.610] - Patrick Posner
So you have to specifically whitelist requests from the website that is doing the request to the website that receives the request. It's kind of technical and I know it's not the most fun part to go in with, but if you get in trouble with that, it's good to at least have known that there is something like cause exists and that be the reason because your form request didn't go through. So with that out of the door, we're going back to the Simplistatic settings and to the more fun part. If you go to Simplistatic settings, there's a little subsetting here called Forms. And yeah, the most fun part here is that all you have to do is activating this little toggle right here and the form integration is up and running. There is a little settings section right here called Course. We just talked about that right now. So there is an option, but it is absolutely dependent on your server or hosting provider setup to allow course requests move multiple different methods within WordPress. So if your provider doesn't force a specific policy restriction, you can go away with just configuring one of the two settings.

[00:08:39.220] - Patrick Posner
It's usually up for testing. Some work with Allow HTP Origins, the others use WP underscore headers, so it's at least worth trying. But if you run into any trouble, use one of the methods we're covering in a minute, or talk to your hosting provider and let them activate it for you. It's usually done with like one single line of code within your htxs file or your Ng configuration file based on your server setup. So that's all about the general settings we have to know when it comes to forms integration within Simplistatic. Now we get into details. Once you activate the form settings, you will notice there's a new submenu here in Simplistatic called Forms. And here we set up our form integrations. What are form integrations? There are two steps involved in if you want to use your existing forms within Simplistatic. So the first part obviously, is you create a form and the second part is you create an integration. So the integration is what Simplistatic is doing to make the magic happen. It's basically the connection from your form, mapping it with JavaScript and handling it on your static website. We'll take a look into that in a minute.

[00:10:04.650] - Patrick Posner
I just wanted to show you that we really don't have anything fancy going on when it comes to the forms itself. So you probably know about Contact Form Seven. It's this tiny little form plugin with over, I don't know, 10 million active installations. So it's kind of popular and mostly the reason why we're using that instead of any of the other WordPress contact form plugins out there. If we take a look into it, you will absolutely see there's nothing special going on. It's just pretty plain form. There aren't any special settings here whatsoever because Simply Static is handling that completely for you. So you create your form just as you would always do, embedded with a short code or I think Contact for Seven has a block right now.

[00:10:59.890] - Nathan Wrigley
Yeah, I think so. I'm pretty sure you're right.

[00:11:02.500] - Patrick Posner
But just in case, you always can reference the short code and embed it to your page to make it work. So contact form one. One thing you should remember is the contact form. ID. It's right here in our case, 67, because we need it in a moment. What I usually do is keep that contact form open to just copy and paste the necessary values we will use within the Simplistatic integration. So if we go back to Simply Static forms, I'm just opening that real quick in a new tab. So I would say we start with the most frustrating integration. So you immediately see calls requests in real life, destroying our wonderful Contact form integration before we go into the fun part and just activate it and it works out of the box. So I quickly set that to draught and we go into that one. Okay, we have a couple of settings here that need some explanation. The first one is the tool you want to use. As you can see, we have contact form seven. We have gravity forms. Contact form seven.

[00:12:22.880] - Nathan Wrigley
Also, just to let you know, Patrick, that the platform that we're on doesn't allow us to see your drop down list. We can see interesting. Yeah, I guess there's some security in the OS. So we can see Contact Form Seven because that's now selected. But the other ones that you may be able to see on your screen, we can't.

[00:12:41.020] - Patrick Posner
Okay, it's completely fine. I let you know what magic settings are hidden here in this black box. So we have Contact Form Seven, we have gravity forms, and we have external service. External service is basically everything that isn't a Contact Form plugin. So if you have like we get into that a little bit later. But if you have like, an external, for example, Netlify forms, you can use Netlify forms and just use the external server setting here to make everything work as expected. So, as I already mentioned today, we're going to be talking about Contact Form Seven. So we select contact form seven. The next setting is a form ID. That's what I already mentioned a minute ago. You want to copy that particular ID and add it to this field. It's basically the unique Identifier between your contact form and the integration. It works the same way with gravity forms and all the other form plugins. Every one of them creates a unique ID for a specific form. So simply Static knows which form to forward and which email to send if someone submits a form on your static website. So next thing, subject attribute.

[00:14:01.000] - Patrick Posner
Now we're getting more into the traditional email thing. If you get an email, so let's say someone fills out the form and you get the email and you want some kind of control about how the subject is looking and which data should be included. So some data is already included automatically here if you set up a new form integration. But it's completely up to you what kind of fields you want to use when creating your email. So in our case, I just set here a new form submission subject. Subject in that case is not just a word, it's a subject we're getting from contact form seven. So in our case it should be your subject and not subject.

[00:14:49.960] - Nathan Wrigley
Got it?

[00:14:50.330] - Patrick Posner
This error was on purpose, of course. Nice. We have your subject. So that's the subject you get from your email. The next one we have is name attributes. It's basically a list of all the name attributes of your contact form. So what are name attributes? I know it sounds pretty confusing, but if you use contact form seven, each field has a unique name. Your name, your email, your subject, your message. That's a name attribute because if you look in the front end and we are not opening the browser's console right now and checking that, but trust me, it's the case, it's the name of the field and it's also the unique identifier for particular input field. So similar to the ID, a unique identifier that Simplistatic needs to identify different fields and do the validation in the background and send the right fields to you in your email. So you put on your entire list of fields here that also has a benefit that you can exclude particular fields. Let's say you have hidden fields. I don't know, maybe you have, like, a payment integration within your form field, and there's, like, a PayPal token automatically generated and added to the form once someone has paid.

[00:16:17.050] - Patrick Posner
Just an example. And the user will not have an immediate benefit from that token. But you needed to verify the payment later. If you provide something like a membership for example, or you provide a digital download and you want to reference who has access to that particular download. So that's why we are going the different direction here. Not auto include all the fields but manually whitelisting which field should be submitted and added to your email. The next part is the actual message. So that's the email content you get. And as you can see, you can also use HTML here. But plain text is absolutely fine. Don't get too crazy here. It's on purpose that there isn't like a Ycwic editor. There wasn't Ycwic editor in an earlier version of Simplistatic Pro, but it's now gone because gmail and all that. Other email providers are kind of tricky to deal with when it comes to specific layouts. And you're not sending an email newsletter that needs to be super polished and have call to actions everywhere. It's basically there to get your form submissions via email without too much distraction. So the next field is the email address.

[00:17:44.880] - Patrick Posner
That's the email address we are sending the email to if someone submits the form on the front end or on your static website. In our case, I created a little new email address just for the purpose of this tutorial to keep up with the branding. And yeah, we're having a look into that in a minute. We also have the ability to add additional headers. So if you want to CC or BCC additional people on each form submission, you can absolutely do that right here. But right now I haven't created a specific BCC email for the purpose of the tutorial. But trust me, you can add an additional email and you get it.

[00:18:31.060] - Nathan Wrigley
Yeah, we'll trust you.

[00:18:32.550] - Patrick Posner
So now we're getting into the complex part, the endpoint. If we talk about contact forms, each contact form or each form on a website has an action attribute. It's a specific URL where the request is sent to. If we talk about, let's say, WordPress comments, for example, the action URL is always yourdomain.com or NL or whatsoever wpcommons, PHP, it's always the same URL. If you submit a comment, the request will always go to that particular URL. We kind of mimic the functionality here within Simply Static by providing a webhook. A webhook is a specific URL that is performing some kind of action once it receives anything. In our case, it would receive the form request. So if someone fills out the form, clicks on submit a request sent to that particular URL. And as you notice, that's a URL from your WordPress website, it's not the URL from your Static website. That's important to keep in mind because we already talked about the problem. If you have your WordPress website offline running with local WP or something else, this will not work because your computer would have been running all the time, right? But it's a good solution if you have your WordPress website running on a protected environment.

[00:20:12.400] - Patrick Posner
If you have Basic author activated, this endpoint will actually automatically include the username and password for you, so you don't have to worry about some kind of 50 four error because requests are forbidden from the outside, that's already handled for you. So if you want to use basic authentication, you can do that and Simply Static will remember it and will automatically update the endpoint accordingly. But however, it's only working if your WordPress website is online in some way or another.

[00:20:51.680] - Nathan Wrigley
Got it?

[00:20:52.320] - Patrick Posner
And we're going to try that out just so that you can see cost restrictions in action in a second. Let us quickly talk about the last part of the settings integration for forms, which is the redirect URL. If you have a traditional form contact form seven for example, you will notice that if you click Submit, it will automatically display a little success confirmation text below the form that's done via Ajax. Ajax is like the fancy it's not so fancy anymore now that we have React and all that stuff. But it was like ten years ago, it was a fancy way to update parts of your website without reloading the entire page. Now we are kind of rewording that because Ajax doesn't work on your static website, you don't have like server to process it. So what we're doing instead is we stop the Ajax request and redirect to a particular URL instead. In our case, thank you. Thank you is just a pretty plain opening. Is that in a new tab in a second. So yeah, it's really easy. It's just like a little page saying thank you for getting contact with us. That's it.

[00:22:11.150] - Patrick Posner
Just so the visitor knows that their submission has gone through and we received the email and everything worked well and there wasn't any issue involved with that. So yeah, that's pretty much it, I guess.

[00:22:26.850] - Nathan Wrigley
Important to point out that you've linked to the static thank you page.

[00:22:31.970] - Patrick Posner
Oh yeah, sure.

[00:22:34.800] - Nathan Wrigley
In this case Netlify, which we talked about last week.

[00:22:37.360] - Patrick Posner
Yeah, the funny thing is so I link to the static website, but I actually link to the WordPress website.

[00:22:46.100] - Nathan Wrigley
In.

[00:22:46.440] - Patrick Posner
Case you add your WordPress URL here, we simply swap it out as soon as you have the static URL configured within the settings. That's part of the reason why if we go back to settings forms, it's part of the reason why we're asking for the static URL right here.

[00:23:04.600] - Nathan Wrigley
Got it.

[00:23:05.240] - Patrick Posner
Just in case you forgot about your static URL, I know we're working with some really cryptic URLs right here. So we have like Al Edition, High C, Instawp XYZ and we have Creative I don't even know what that is, fangly user and some random numbers. We automatically handle that for you just in case you are adding the wrong URL within the form configuration. So don't worry, that happens. Contact forms are kind of complex and there is a lot that can go wrong and we try to make it as easy as possible. That's also part of the reason why we're handling Basic Authentication automatically if you edit and your website is password protected because absolutely no one on this planet will ever remember to update the form endpoint once you had added Basic Authentication. So we handle that for you. But if you want the best notes in school, you add your static URL here instead of your dynamic URL. But we also update it for you.

[00:24:16.500] - Nathan Wrigley
Nice. I want to ask you one quick question and it's about the subject attribute and the name attribute. I noticed that you just dropped in the Word subject just as a word, there's no kind of like brackets around it or any indication. How does it know that that's the subject and not the word subject, if you know what I mean.

[00:24:41.400] - Patrick Posner
Yeah. So initially we had kind of a syntax similar to right.

[00:24:47.960] - Nathan Wrigley
Curly braces sort of thing, that one. Yeah.

[00:24:51.150] - Patrick Posner
But I thought it's too complex to have users remember some particular syntax to get up and running. I think forms are kind of this integration step itself is kind of a little bit of extra work and to make it as easy as possible and don't get people angry because of the extra time investment, we really trimmed it down to the absolute minimum. So what we're doing right now is kind of context sensitive replace.

[00:25:26.140] - Nathan Wrigley
Right.

[00:25:26.630] - Patrick Posner
If you have subject A, for example, that would indicate that this is a particular word and not a thing we should replace.

[00:25:40.290] - Nathan Wrigley
Got it.

[00:25:42.300] - Patrick Posner
If you have subject, it's also a particular word and we wouldn't replace it. So we have a kind of a list of rule sets that we cheque before replacing anything. If you still want to use subject, because why not, right? You can still use that one and we replace the curly brackets and just add the word instead.

[00:26:17.300] - Nathan Wrigley
Okay, got it.

[00:26:18.760] - Patrick Posner
Kind of the inverted way of doing it. Less work if you have a standard case and a little bit of extra work. If you really want to use subject as a word in your form submission.

[00:26:31.090] - Nathan Wrigley
Or in your so you're looking for an exact match with the attributes in the contact form seven, and if there is an exact match, you're going to swap it out. It's all lowercase with Hyphens, isn't it? The word subject kind of is a bit unique because it's one word, but the rest of it your message, your name, your subject and all of that is yeah, okay, got it.

[00:26:52.560] - Patrick Posner
So it's completely up to how you name your name attributes in their contact form. So usually you wouldn't hear it's also like your subject, we already changed it in another form, integration, but I simply opened the simply static webhook example now. But you want to make sure that these name attributes are kind of unique, right? Because it's also like a better or easier differentiator when we go into things like Zapier and other integrations later. So the more unique and the more recognisable these name attributes are, the better it is.

[00:27:31.890] - Nathan Wrigley
And they're not in any way public facing ever, are they? So you could literally just append them all or preface them all with, I don't know, WPB or with a hyphen or something like that, just to you.

[00:27:42.830] - Patrick Posner
Can name it whatever you want. Yeah, add a custom prefix, suffix, put crazy numbers in there. It's absolutely up to you. Just make sure it's unique and at least you can understand what's the differentiator between them. So if you have like a crazy number and a prefix and a suffix. Just make sure you can differentiate between the name and the email address later because we're going to need that in the next example. Okay, we finished the form integration. Let's see. Have I published it? No, I published that one right now. It's perfectly fine to have multiple. So that's the whole reason because why you can create multiple contact form integrations here. You can create as many integrations as you want. The only reason why I drafted the other ones is because we have only one form and we don't want to have, like, three different integrations triggering on the exact same form. So we're going through all three of them one by one, and I show you what's happening and how it works and how you can troubleshoot them in case something goes wrong. So one little thing I prepared, because yesterday it wasn't yesterday, it was last week, last week where we doing the GitHub deployment thing.

[00:29:07.490] - Patrick Posner
We noticed that the GitHub API was kind of slow, and to avoid sitting here and chatting about how nice the weather is outside, I prepared a little build. And this build only updates two pages. It updates our contact page and the configs directory. The configs directory of simplistatic. I'm not entirely sure if we talked about it, but it's basically an internal thing of Simplistatic where configuration files are stored.

[00:29:41.310] - Nathan Wrigley
Yeah, you mentioned it, but you didn't explain it.

[00:29:43.420] - Patrick Posner
Yeah, so you never have to touch it manually. It's completely auto generated, and it just needs to be there. So if you delete it, it will be recreated, but in 99% of the cases, you won't even touch it at all. But for our particular example, for just updating the contact page and just updating the configuration files, it's good to know that there is a specific directory that contains all the configuration files used by Simplistatic. Okay, so what we're doing, we're going back to builds and click on Export Static, and we can double cheque it's running in the activity.

[00:30:31.720] - Nathan Wrigley
So for those of you watching this, follow this from last week. Basically all of these screens that you're seeing now are in the first episode where Patrick explained how you can link things up to GitHub and Netlify. And so, yep.

[00:30:45.320] - Patrick Posner
Yeah, it was a pretty extensive so.

[00:30:47.970] - Nathan Wrigley
Yeah, it was good.

[00:30:49.010] - Patrick Posner
You better grab a big cup of coffee if you want to watch Long. And it's kind of technical, but if you set it, it's like a one time setup, right. If you have a set up with GitHub, it's entirely automated. And now we're getting so much done in, like it was 10 seconds now.

[00:31:08.250] - Nathan Wrigley
Yeah, nice.

[00:31:08.820] - Patrick Posner
And there's so much magic happening in the background. We committed to GitHub and Netlify pulled the update from GitHub and deployed it to your static website. And we don't even have to double cheque it anymore. We just know it's there now. One thing, I added a little chrome add on today to just clear the cache because we're using Chrome and I'm not an actual Chrome user. So just to be sure we're getting the latest results from the static website. You will see me clicking here once.

[00:31:43.280] - Nathan Wrigley
In a while to we know why.

[00:31:45.350] - Patrick Posner
Okay, the uncached version of our website. So what I'm doing right now, I promised I will not opening it, but I'm doing it right now. We have the integration with the simply static webhook which is used on your WordPress website. And I already told you about course requests and how they may affect how your form works or if submissions go through. So we have now an Insta WP demo website where you can't control your course requests because we are not really having access to the actual server and we can only control WordPress. So what we're doing, I'm quickly adding some without a typo. Oh no. Come on.

[00:32:37.280] - Nathan Wrigley
There you go.

[00:32:47.140] - Patrick Posner
So we filled out this really extensive and advanced form here right now and if we click to submit, you will notice there's a little thing running here right now and we get an error. The error we are particularly interested in is that one here, right? Access to XML, http request add here's the URL of our WordPress website from origin. This is the URL from our static website has been blocked by cause policy no access control allow origin. So if you see that, I mean, contact from Seven does make it kind of obvious because you have this loader and it will not go away and nothing happens. You have no redirect, no confirmation or anything. That's a pretty decent indicator that you hit a cause request. So if you hit that, as I already mentioned, contact your hosting provider or maybe you are technical enough to fix that on your own. And now that we have the tricky case and the error case and all those cost request problems, we go to the more rewarding example and use something that actually works, even if you have absolutely no idea what this guy is talking about here.

[00:34:12.700] - Patrick Posner
Calls, requests and all that stuff. So let's get back to the forms integration. We're using the exact same form from contact form Seven now, but this time I think we're going to use form Spree first because it's a little bit easier. And we can also explain a little bit about what form spree is and what it can do and can't do and why it might be a good option. And probably why it not being a good option. So as you can see, the configuration is absolutely identical. The only thing that changed is the endpoint. The endpoint is Formspree IO with some, I don't know, some random string attached, pseudo random noise. Where the heck comes that string from? Well, yeah, if you go to Form Spree and you create an account, get back to the homepage, that's the home page, right? And you already see a. Little example here. So what Formspree is doing in the background is replacing the action URL we already talked about with an URL, formspray IO slash F for form, and a unique identifier which is unique to each form created within Form Spree. So I sign in. Hopefully they don't ask me for login credentials.

[00:35:41.330] - Patrick Posner
No. So the first thing, if you set up a new form so, new form, you give it a name, you can assign it's totally optional. My project just is called My First Project, and you add an email address you want to send the form submissions to later. If you've done that, the first page you will see is that one. So my form simply is called CF Seven. And the first thing you get is the forms endpoint.

[00:36:17.740] - Nathan Wrigley
Right.

[00:36:18.170] - Patrick Posner
There are also some examples for easier and more complex forms, but we absolutely don't care about that because we handle so all we need is really copying that Forms endpoint and that's it. So there are a lot of settings that we are kind of taking a quick look into it in a second. But for now, all you need to know is add that endpoint and you're good to go. The rest of the settings are completely identical to our integration with the Simplistatic webhook. So I'm going to publish that now, just checking that I have deactivated the other one. Yeah. Okay. So we're going back to our build and export the new contact page, the updated contact page.

[00:37:09.620] - Nathan Wrigley
I'm going to say a few things while that 10 seconds passes, first thing to notice is we're using an external service called Form Spree. So you have to sign up for that. That's nothing to do with Patrick, I don't think, unless it is to do with you.

[00:37:21.660] - Patrick Posner
No, absolutely.

[00:37:22.710] - Nathan Wrigley
That's just an external service. It's like a SAS app, I guess, for handling form submissions. And we've just invoked the form that's got that as the endpoint in it. So what we're seeing on Patrick's site in a moment will be the form. It'll look the same, I'm guessing, but it will have a different place to send the data and hopefully we won't get a cause problem.

[00:37:46.020] - Patrick Posner
Yeah. So as Nathan already explained, right, formspree is an external service. It's free for basic usage. It obviously has some premium features attached to it. We will face one little restriction pretty soon. As soon as we're testing the contact format, I'll explain you what's happening and where you can find particular setting if you have the correct plan from Formspray. So we are right now using the free plan, but if you want to use it for a real website, and not just for testing purposes, you might want to go with a personal plan which is completely fine to use. It's also not limited to a single website. So if you have multiple websites and multiple contact forms, you can use one starter plan for all of your websites. Let's see. So the export is done. Netlify should have been updated. Everything right now looks good. We can close that one. I quickly clear the cache just in case. So what happened in the background is we updated the configuration files on your static website and replaced the endpoint. Everything else remains the same. And now we're having a look into submitting our form to an external service called Form Spree.

[00:39:24.420] - Nathan Wrigley
Okie doke. This is the bit where we cross our fingers when you hit the submit button.

[00:39:40.890] - Patrick Posner
Yeah, don't get too excited. So we click submit. One thing you will notice there's a cost request problem happening. But if we go back to our little Form Spree back end right here, you will notice there's a new submission which contains our results. And if we cheque Nathan's hidden inbox, created in a ninja way for him.

[00:40:21.350] - Nathan Wrigley
You will notice cube. I love rounds.

[00:40:23.930] - Patrick Posner
There are all the data we submitted.

[00:40:25.900] - Nathan Wrigley
Nice.

[00:40:26.330] - Patrick Posner
Coming to your inbox.

[00:40:27.730] - Nathan Wrigley
Okay, so that bit.

[00:40:34.440] - Patrick Posner
Why is that happening? Well, funny enough, that's kind of a limitation of the Free Plan of Homespree. It's not actually an XML course request problem. It's because if you go to Settings, they have its own redirect setting. And if you send the form request via simply static to Form Spree, they are blocking our redirect. So what you have to do, this one works with the Personal Plan, but for the purpose of the tutorial, I just use the Free plan. So if you have the Personal Plan or any other plan of Form Spree, you add the URL that you can copy from your Forms integration. We're quickly going back to it. So that particular URL we just created needs to be added into this field, saved, and then everything works as expected. It submits the form to Form Spree and it will redirect to your thank you page. Yeah, I have absolutely no idea why they especially limited that particular option behind the paywall. But that's how it is, right? Yeah, but we have seen, we got the submission, we got the email. Forms Free can do a lot more than that. So if you think $8 a month is pricey well, yes, for just a simple contact form.

[00:42:17.230] - Patrick Posner
But Formspray offers a huge variety of different plugins that you can use to automate a lot of things automatically sending a slack message. If you receive a new request, submitting the form request or the email address from the contact form to Mailerlite or MailChimp or add it to a specific CRM campaign in HubSpot, adding it to a Google Sheet and whatnot. So there are a lot of integrations and a lot of things that you can do. They also have rules, which is kind of like a typing solution where you can trigger certain actions based on specific values in your contact form. So you can go pretty far with a tool like Formspray and just contact Form Seven, for example, without even touching any kind of code because Simplistatic is abstracting away the whole coding part of it.

[00:43:20.610] - Nathan Wrigley
Yeah.

[00:43:21.340] - Patrick Posner
So, yeah, that is formspray. It's pretty good and solid solution. There are a lot of competitors to Form Spree, so Nathan mentioned earlier, I think it was before the recording, right. Formspark was also a pretty decent Formspark IO.

[00:43:47.570] - Nathan Wrigley
I don't know, actually, I can't remember. Is it? Yeah, there you go.

[00:43:51.030] - Patrick Posner
IO, it's a similar service. It doesn't ship with that many features, but the pricing is almost that's hard to beat. Right. So you have like $25.01 time payment, but you have a kind of limitation with like 50,000 submissions. If you reach the limit, you buy another one time package, swap out the key, and that's pretty much it. It doesn't ship with that many features compared to Form Spree, but it's obviously the cheaper solution and it isn't a subscription. And I know we all love one time payments and just don't want to add another subscription to our payroll. Right.

[00:44:40.840] - Nathan Wrigley
I actually got it on a lifetime deal somewhere, I can't remember where, but perfect. Yeah, so I get 50,000, I think, per month or something like that, but.

[00:44:50.540] - Patrick Posner
It works pretty decent. That's also a good example. The integration is the same, so you can go exactly the same way, give you a particular action URL, you add it to Simply Static Forms, and that's all needed, nothing more, nothing less. So now we're taking a look into the most complex but also the most powerful integration. Quickly drafting that one.

[00:45:26.200] - Nathan Wrigley
Okie doke. Zapier.

[00:45:30.520] - Patrick Posner
So you probably have heard of Zapier. It's not like a little indie tool, but more like Microsoft for automating tests in the whole Internet. And you can do pretty much anything you can think of. And automate pretty much anything you can think of with Zapier, from submitting formal requests to all kinds of CRMs, to all the email providers or newsletter providers, to I don't know. Transform it into video via AI and have a duplicated or your double ganger reading it in front of a classroom or whatever. You can do almost everything with Zapier. They have an AI integration, if that's what you're looking for. They have integrations for pretty much any service available in the Internet. And yeah, we're doing it now, or we're using it now with Simply Static in a pretty basic example. But it's good to take a quick look into how it works, how you connect this tool and the rest is up to you. If you automate as much as you want, make it as complex as you want or as simple as you want. We're showing you a simple example so you can get started within like two minutes from now.

[00:46:56.500] - Patrick Posner
So we have our contact form seven Zapier integration, which should be looking familiar right now. Yeah, so the settings are again completely the same with the redirect URL and so on. The only thing changed again is the endpoint the endpoint, it works pretty similar to formspray. You get a specific URL and each time someone submits a form, it will be sent to Zapier and Zapier handles the rest. What I've done is creating a little automation specifically for our tutorial here. So if you go into each time you create a Zap, you get this little overview. You give it a name, you can configure things like which tasks to use. Right? So if I click on edit so that's like what you see if you create a new one. Right. So there's always an app event happening you can choose from. I don't know, is there a number here? Almost 6000 different trigger options available in Zapier. What we're using, and this is probably one of the easiest, is Simply Webhooks by Zapier. That's the one I configured here. And once you do that, you have to define an event. There are three. One can you see the yeah, we can see that they have some special optimised select menu here.

[00:48:36.560] - Nathan Wrigley
That's interesting, isn't it? Yeah. The other one, it wasn't part of the OS, was it? Or was it showing an OS? Who cares? Never mind. Yeah, carry on. Sorry.

[00:48:44.920] - Patrick Posner
So we have three different options here. We have Catch hook, we have Catch raw Hook and we have Retrieve pole. The only thing you need to know is that we are working with Catch hooks. Okay? Yeah, that's pretty much it. Raw hooks is like if you have some kind of encryption happening for your request, that would be a valid use case for it. But with Simply Static, it's just a JSON response we send to Zapier and Zapier handles the rest for us. Okay, so catch up if we continue. There's this little pick of a child key field which absolutely makes no sense. Right? So what the heck is child key? Well, if we Simply continue, then you get that one, you get the URL, you copy that URL, you add it back to Simply Static Settings right in the endpoint. And I'm going to publish that one right now, so quickly double checking that I published it right. And we're starting another build to update it on our static website. And while that's happening, I explain the rest of the settings here.

[00:50:02.460] - Nathan Wrigley
Now, haven't you you know what you're doing here?

[00:50:04.910] - Patrick Posner
Yeah. So the cool thing about Zapier is that it's really, in terms of user experience, thought out. If you provide such a complex automation service, you get that URL and you add it to Simplistatic and all you have to do is go to your static website oh, it's here. Right. You go to your static website, you fill out the form and you send the request. What's happening then is that Zapier where's our setting will autocomplete based on the request it's received. Meanwhile, we are setting everything up. So, you see, we have like, request C, which is like, we get the form ID, we get our localization string, we get name, we get an email. And before we're going on now, we're quickly checking if the export is done, and it should be done, and it is done and we are refreshing clearing the cache static site. We make it a little bit easier.

[00:51:19.540] - Nathan Wrigley
To make it obvious. Yeah, here we go.

[00:51:38.860] - Patrick Posner
We click submit.

[00:51:41.100] - Nathan Wrigley
Oh, that one all worked, didn't it?

[00:51:43.550] - Patrick Posner
That one was fast. So that's the expected behaviour, right? You fill it out, everything is okay. You don't have any validation errors and it goes straight to thank you. So if we click on Find New Records, you will notice there are new records coming in. Right. So we have this request E thing that I sent. I don't know.

[00:52:09.000] - Nathan Wrigley
Yeah, I don't know when.

[00:52:10.200] - Patrick Posner
Here's the nathan. One.

[00:52:11.720] - Nathan Wrigley
Yep.

[00:52:12.430] - Patrick Posner
Right. Is someone actually trying out our form while I'm working on a live stream here?

[00:52:20.060] - Nathan Wrigley
I don't know, but that's kind of funny.

[00:52:21.640] - Patrick Posner
It's kind of funny that this is request E, where we just submitted request D, but yeah, sure, we go with.

[00:52:30.860] - Nathan Wrigley
If an F comes in, we know we.

[00:52:34.640] - Patrick Posner
So, okay, we have Nathan's request here, and that helps a lot, right? Because figuring out the name of the fields, even if we already covered what are name attributes and where you can find them, is kind of hard. Right. So having Zapier doing all the work for us, all we have to do is like sending a request from our static website to it is perfect and very helpful for setting this whole thing up. So we take request D and continue with a record. All we have to do is now it's pretty much you always have an action happening and you have a trigger happening, trigger and an action. In our case, the action is sending an email by Zapier. It's like, if you take a look, it's the exact same view. You take an email by Zapier as an action, but you can also, I don't know, send it to Twitter. Twitter is obviously premium now because of their silly API changes, but you can do whatever you want with the request you get from that particular webhook. In our case, it's an email. So we send an outbound email. If we continue, they will ask us for an email address.

[00:53:54.170] - Patrick Posner
That's the email address. I mean, it's two, right? So it's kind of obvious, but just to let you know, that's the email address receiving the message that was submitted on the form. And now you can fill out all the details and you already see it's.

[00:54:11.120] - Nathan Wrigley
Like, yeah, it's done a good job.

[00:54:13.440] - Patrick Posner
You get the actual content from the request you selected earlier to make it as easy as possible to assign these fields. Right. You can also have things like attachments and reply to and CC and so on and so forth. And if you looking for a particular field, you can click right here and it opens an overview of all the fields that were submitted from the last request you have selected. So in our case, we can choose the name, the email address and so on. Contact form seven is also sending some hidden fields behind the scenes. That's part of the reason why within the forms integration we have like an whitelist approach and not the other way around. Include all fields by default because most contact form plugins send a lot of hidden fields for validation and all kinds of things. And contact form seven isn't an exception here. Right? So we have the localization string, we have an hash to compare it with database submissions and so on. But you just select the fields you want to use and that's pretty much it. If you have configured everything, you can click on continue, you get an example request here that could be a bit more nice, right?

[00:55:37.310] - Patrick Posner
It's just string, but you get the idea. So it's like, okay, all the data is included to from reply to subject body message. Pretty much it. I already published it, but if you are not ready to use it right now, you can always deactivate it. And Zapier will not charge anything while you're in draught mode. It will only start counting the submissions if it's actually activated. And yeah, that's pretty much it. Let's take a look at Nathan's.

[00:56:12.320] - Nathan Wrigley
Can I ask, I'm guessing that email by Zapier is on no free tier of Zapier. I'm guessing you have to have a paid account for that feature.

[00:56:23.160] - Patrick Posner
Email is actually free what is paid and that's a little bit silly, but the catch hook specifically is part of the paid plan. But you can use the smallest paid plan available, which is like I'm not sure, it's like $9 a month or so, but you have like a pretty big tier with like 2500 automations or so. Yeah, if it's about the money and you really want to use an approach like that and you are not here for having a convenient setup. Flow takes it with caution. But you can do the exact same thing for free with IFTT. IFTTT is kind of like a competitor to Zapier.

[00:57:17.180] - Nathan Wrigley
They're doing a lot IFTTT I thought they called it like make or something now. No, obviously not.

[00:57:24.830] - Patrick Posner
Maybe you know more than no, no, clearly not.

[00:57:28.380] - Nathan Wrigley
There it was an it was a rival called Integromat. I think they re. Yeah, sorry, that's that's true.

[00:57:35.010] - Patrick Posner
True. So make is also an option, but they also limit this webhook request thing. Right? But IFTTT is not So you can go with the free version of IFTTT and set the exact same thing up. Having a webhook request, getting the data and sending an email, the problem is, and I just quickly want to show it to you because it's like horrible, is the user experience. So for the purpose of the tutorial, I really wanted to show you a simple example with IFTTT and free plan but I was completely unable to make it right. It was like, I don't know what's going on here. I can edit the title right, and I connect something. But if you want to get one example, you want to get your webhook URL. So I would think, well, clicking into Settings would work, right? Here's a webhook request. And then send an email. Okay. Yeah. Okay. I can add a name, whatever that name is doing. I don't get it. But there isn't like, where's the webhook URL?

[00:58:52.510] - Nathan Wrigley
Yeah. Where's the actual meat on the bones there? There's nothing there.

[00:58:56.570] - Patrick Posner
To get the webhook URL, you have to exit from the Applet creation, click on your profile icon, go to my services, and you get this. And there is a webhook setting here. Oh, look at that. And if you click on it, you still get redirected to hey, do you want to launch outgoing calls if someone triggers a webhook? No. I just want my Webhook URL. So if you made it to that point, you can click on Settings and oh, look at that.

[00:59:32.490] - Nathan Wrigley
There it is.

[00:59:34.740] - Patrick Posner
Absolutely confusing. It works. I even have a tutorial about it. So if you really want to put in the time, go to Simplistatic.com tutorials. I think it's on page two. IFTTT. There it is. I have an entire tutorial about this setup where I spent I don't know how many hours figuring that one out. But if you really need a deep dive into IFTTT with simply static read that tutorial, you will find a lot of screenshots. You will find some rants about the not so obvious UI there. But if it's about the pricing, there you go. IFTTT is free, and you can do everything you can do with Zapier for free.

[01:00:23.050] - Nathan Wrigley
Nice.

[01:00:26.580] - Patrick Posner
I would even spend, like, $50 a month for Zapier before touching IFTTT again. But at least that's only my opinion. I get it. We want to keep the cost slow, especially if we run, like, a static site setup. So it's always an option to use something like IFTTT.

[01:00:47.120] - Nathan Wrigley
Yeah.

[01:00:48.220] - Patrick Posner
So quick look into Nathan's inbox. You got quite a lot of emails today. Here's our last one. That's the one. Nathan sending his email to himself. With the Zapier integration, you will notice there's a little help link. You can actually deactivate it for whatever reason, right? If you have, like, ten people in BCC and you panic about checking your Zapier integration or whatsoever, you can deactivate it. I leave it activated by default because it's useful just in case something happens and your email server is down. Zapier is maybe down. They have, like, a retry action. So you can always restart a process just in case something fails. You always have a backup. You can also enable storing the email content within your Zapier account, which is disabled for me by default because of the GDPR regulations. So this one only works if you're from America or use some servers to kind of find your way around these restrictions. But by default it's disabled for me. And I like the fact that it isn't stored in Zapier, but if you want to store it in Zapier, you can do that as well. But I think even if you are watching from America and setting up a Zapier account right now, it's also disabled by default just so that you don't have important data or client data stored on a third party provider.

[01:02:34.400] - Patrick Posner
So, yeah, that's pretty much it. When it's about forms, we can talk for pretty much days about forms and form integration and different services. But I would always suggest checking simplystatic.com the tutorials, the documentation. So everything we've done today, you can read everything and reconfigure and rewatch everything we've done today within the recording that we put online. After that, live stream. And you can also always cheque the documentation. It's simplystatic.com docsetupforms and you get everything you need with explanations, what each field means, how you handle validation, different kind of services, potential errors that happening, and even details like how this config directly what is happening on the file system, which data is stored and which is not stored, and how all of that works. If you want to, if you want to keep it simple, rewatch the tutorial from today, use Zapier. I highly recommend Zapier. I'm not affiliate in any terms, so I don't get any money from it, sadly. But yeah, Zapier is for me, it's the way to go because it's simple. It's the least frustrating integration. Otherwise things like Formspray or Formspark work as well. And if you have a configurable server environment, even using the included webhook, integration of simply static pro is also completely fine.

[01:04:24.000] - Nathan Wrigley
Perfect. Right. So there you go. There's the lowdown on how to get forms into your static website. What did we look like? We looked at contact form seven, we looked at Form Spree, we briefly looked at Form Spark, we looked at Zapier and the Leviathan. That is IFTTT. So, yeah, that's brilliant. Just a quick thing to say that if you wanted to get some money off the Simplistatic Pro option, then there is an offer code. It's WP. Builds. I'm guessing you enter that in the checkout area as the coupon code. If you fancy getting 25% off, you can do that. Capital letters. I don't know if it matters, but it's all in capital letters on my screen. Anyway, WP Builds, no spaces or anything like that. And that's perfect. Next up next week, which I think let me just double cheque that. I think that's the 2 August year 2 August, we're going to be dealing with another sort of similarly thorny issue, that's search. So how does search work? Because remember, we kind of switched off the server, if you like, and so things like forms have now been explained. Next week it will be time to explain how search works.

[01:05:36.250] - Nathan Wrigley
So we'll be back then. Anything you want to end with, Patrick, just before we round it off.

[01:05:42.780] - Patrick Posner
Yeah. Stay tuned. So Forms was kind of a frustrating part, and I can assure you search integration is easier just because it's like one input field and not multiple ones.

[01:05:56.790] - Nathan Wrigley
Right. Nice.

[01:05:59.620] - Patrick Posner
It's a cool integration. It's really trimmed down to the basics, but powerful enough to cover like 99% of your use cases when it comes to search. And yeah, stay tuned. We'll make your website static in absolutely no time.

[01:06:16.270] - Nathan Wrigley
Perfect. We will be back 2 August. There'll be links on the Wpbuilds.com homepage, but we will see you then. Patrick, thank you so much. Really appreciate it so much for having bye.