Jamstack Explorers

Angular in the Jamstack with Tara Z. Manicsic

Adding an Angular Contact Form

Knock, knock. Who's there? We don't know yet because we don't have a contact form! Fear not, this stage will help us quickly set up a contact form using Netlify Forms. You're welcome.


You can make a contact form with Angular in the Jamstack with Netlify forms. Why, yes you can and here's how. Today we're going to be making a form that is actually pre-rendered and then we use JavaScript Netlify functions to grab that data. First we're going to use NG generate to make a component to hold our contact form, naming it contact form and using app dot module.

Next, we'll open our code editor to go ahead and create the template for the form that we're making to make contact. Inside of the contact form component HTML file, we're actually going to make a div here that has the class of contact. We'll put a little message, "We can't wait to hear from you," and have a div with class form box and then add our form in here. We'll name it contact form. The class will be contact form. The method will be post and then we want to add this data, Netlify true, so Netlify knows where to find the form.

We're also going to add a sneaky little input here of type hidden and we're going to name it form name and give it the value of contact form which is the name that we named it in that top form attributes. That has to match the name, value contact form, up above form name contact form has to be the same. We're also adding here all the things that you may be familiar with if you've ever made a form. This is all of the labels, all of the inputs and we'll fast forward through this, but just remember that you can always slow down the video or pause the video once we have everything typed out here, if you would like to copy it for yourself. Finally, we will add our button type, submit.

There we go and have it say submit. You see a lot of redundancy in this form, but redundancy is good here. Let me go ahead and make sure that I have this spaced out correctly, formatted correctly. Now, we can head into the contact form component to see that this is the selector app dash contact dash form. We're going to add it to our main app dot component dot HTML, right under our navigation component. We have all of the things that we need for our contact form component. With our Git workflow, we're going to add all of these new files, commit them and push them up to our repo. Again, this will trigger a build so we can go to Netlify open and look at our project dashboard. Build triggered, hooray. We can actually go to our site by clicking the link and hey look, there's a form there. We'll start populating this form with some information and hit submit, which will bring us to the default Netlify submission successful page.

We can go back to our site if we want to fill out even more forms or we could go to our project dashboard, go to the forms and we can see there's one form collecting data, which is good because that's what we made and then under the forms dashboard, we can see all the submissions. There are a lot of things that you could do once you have these submissions. If you go to your forms settings, you can actually look at different form notifications that you could set up like webhooks notifications and Slack integration. Hey, you have a form. Congratulations.


your progress