Please fill-up the form below to subscribe to our Monthly Bytes newsletter.
We send you the quality content every month.
```
Now we are ready to load and run this HTML file in the browser. If you are using an editor like `VS Code`, you can use the extensions(like Live Server) to run it. Alternatively, use this command from the root of the project folder to run the app and see the index.html rendered in the browser.
```shell
npx serve src/
```
You can now access the app @[http://localhost:5000](http://localhost:5000).
As you see, the page has all the required elements, but it misses the styles. Let us now add a few styles to make the page look better. Copy the below CSS styles to the `index.css` file.
```css
body {
margin:0;
padding:0;
}
header {
background-color: #e351ad;
color: #FFFFFF;
padding: 0.4rem;
}
.content {
padding: 7px;
}
h1 {
margin:0;
}
h2 {
margin: 2rem 0 0.5rem 0;
}
p {
padding: 0 0 0 0.4rem;
font-size: 1.2rem;
}
form {
display: flex;
flex-flow: column wrap;
max-width: 410px;
margin: 0 auto;
}
label {
margin-top: 0.6rem;
margin-bottom: 0.2rem;
font-size: 1.3rem;
}
input {
font-size: 1rem;
padding: 0.5rem;
}
input[type="radio"] {
width: 17px;
height: 17px;
}
button {
margin: 1rem auto;
padding: 5px;
border-radius: 4px;
border-color: #9a00ff;
background-color: #9a00ff;
color: #FFFFFF;
font-weight: 600;
font-size: 2rem;
cursor: pointer;
}
```
Now you should see the browser tab refreshes to load the latest app with the style changes. Looks better, huh?
# Create a Success page
Now it's time to create a success page to thank our subscribers with a message. First, create a file called `success.html` inside the `src` folder with the following content.
```html
Hey, Thanks for subscribing. You are awesome!
```
Also, add the following style to the `index.css` page to make the message look better.
```css
.success{
margin: 2rem auto;
width: 90%;
border: 3px solid #e351ad;
padding: 10px;
background-color: #e351ad;
border-radius: 10px;
color: #FFF;
font-size: 2.5rem;
}
```
Great! Now try out the subscription form. Once you fill up the details and hit the `Subscribe` button, we will see a success page.
Please note, we have not done many form validations here. That's purely intentional and out of the scope of the article. However, I encourage you to include it as you wish.
At this stage, please create a repository in your favorite Git provider(like GitHub) and push the source code done so far. Here is mine, [https://github.com/atapas/jamstack-subscription-form](https://github.com/atapas/jamstack-subscription-form)
# Set up Netlify
We have a working subscription form, but we are not doing anything with the form data yet. Next, we will use the `Netlify Form` to perform all the heavy lifting to handle data and perform actions using it. Before that, let us set up `Netlify` to use.
[Netlify](https://www.netlify.com/) is a powerful serverless platform to build, deploy web applications with all the advantages of CI/CD and scalable hosting. It has a Git-based workflow that keeps your code changes integrated continuously with the deployment. In addition, the services like functions, forms are there to use instantly without having them built in-house.
[Create an account](https://app.netlify.com/signup) with Netlify and log in. Now click on the button to create a new site from Git.
Select your Git provider.
Now, select the project you want to deploy to Netlify. In this case, it is the `jamstack-subscription-form` project.
In the setting window, provide the base directory as `src` and click on the `Deploy site` button.
It will take a few seconds and make your site available to use. Now you can access the subscription form using a URL provided by Netlify.
## Netlify Forms
Netlify's built-in form handling is enabled for your account by default. However, we need to make a couple of changes in our form for netlify to recognize and parse it correctly.
- Add `data-netlify="true"` or a `netlify` attribute to the `