If we need to build a form, Statamic makes that pretty easy. Here we've got a static form that's just been coded up. And what we want to do is hook this up so Statamic can accept the form submissions and you can do all sorts of things with them. So let's start in the control panel. Here in the tools area there's a forms feature. We're going to create a new form, we'll call it contact. Next we'll go to the blueprint where we manage what fields we like to have in the form. You'll notice there are not as many field types to pick from as when we're working with entries.

we like to have in the form. You'll notice there are not as many field types to pick from as when we're working with entries. And that's because Statamic can handle automatically rendering all the HTML for each of these fields. They are all the basic data types like strings, long multi-line strings, booleans and whatnot. So they really should cover all of your use cases, although you can build your own custom ones as well. So let's create that first field which is called name. We'll set the placeholder text. And we're going to add a little bit of validation. We're going to say it is required. Next we'll go to email.

And we're going to add a little bit of validation. We're going to say it is required. Next we'll go to email. It's another text field. We'll call it email. Placeholder should say email address just for clarification. We're going to change the input type to email and that way it will validate. The front end validation will work automatically. Next we'll add a text area field called note. Placeholder text as your note goes here. Let's make that required.

goes here. Let's make that required. Email should be required as well. And we'll save that. Next we'll go to our template and we're going to replace this form html tag with a static tag. Form:: and then name of the form. In our case contact. Come down and replace the close form html tag with the static tag. Save. Refresh. Next if we fill this form out

simple, but you noticed there wasn't any user feedback. Let's add that. Right above here let's add a <p> tag that says thanks someone will be in touch soon. Yellow font bold. We'll just do if success and wrap that around our message. Come back. Refresh. We'll fill this out one more time. Now there's a success message. Granted not a

Come back. Refresh. We'll fill this out one more time. Now there's a success message. Granted not a great one, but one nevertheless. Now if you want to show any errors, like we have these required fields what happens if they don't fill them out? Something's happening. A form submission is happening, but nothing is changing. Also you'll notice that if I submit this, it will not only not show an error, but it will disappear. The solution here is to set the value of each field to be old and then the name of the field. In this case.

to set the value of each field to be old and then the name of the field. In this case name and value is old email. Then inside the text area we'll do old note. Alright. Refresh. Now that will stay throughout each form submission, although we don't have that feedback yet. So let's do that. We'll first check if there are errors. Errors are held in an errors array inside of this form contact tag.

We'll first check if there are errors. Errors are held in an errors array inside of this form contact tag. So we'll open and close that. Then we'll add a message that says there are errors. Please fix these below. Then we'll loop through them and display each one. Let's try filling this form out again. Now you can see the email field is required and the note field is required. So far so

form out again. Now you can see the email field is required and the note field is required. So far so good. This gives you a lot of flexibility. You can code your markup however you'd like. However, if you just want Statamic to handle rendering this form for you, we can definitely do that as well. Let's get rid of these inputs. All of the fields in the form are available inside a fields loop. Let's refresh and you'll notice this looks basically the same. All of this has been managed and it also does a bit more

Save that. Now you can see that there. Let's take it to the next level. I'm just going to delete this to save a little bit of space on the screen. Statamic has built in JavaScript drivers, so you can tell it to use Alpine. Now these fields are all going to be managed as Alpine fields with Alpine.js. We can prove that that's happening by coming down here and maybe next to the button we'll put a span tag with x-text is name.

How rich are you? We're going to add a condition on this to only show when zipCode equals 90210. Then we need to wrap a template tag that uses x if show field. Finally, we need to add one more script, which is our vendor statomic/frontend.js helpers. Let me refresh how we can see that field is missing. If we set zipCode to 90210

If we kept that as saved it, you'll need to add this field in by hand. It would be input type hidden name username but for the sake of example here let's use a text field and let's fill this form out correctly and I'll fill the honeypot field in. If we submit that come back to our form, you can see that no submission has happened, even though the success message has been

come back to our form, you can see that no submission has happened, even though the success message has been given. This is to hopefully fool bots into thinking that they've successfully spammed the form. Meanwhile, no email is sent, nothing is saved, nothing has happened except we've tricked them good! Alright, let me show you one more cool thing about forms. If we go back to our form, edit the Blueprint, get rid of these fields, let's add a new one called assets and we'll say resume.

these fields, let's add a new one called assets and we'll say resume Alright, we're going to allow uploads, max files is one let's save that, come back to our form and now you can see we've got a file upload field. So if we were to go ahead and do this because we're using dynamically rendered fields, everything is already wired up for you. Submit check our submissions now this resume column, and now you can see