Portfolio Site Contact form using Netlify
Setting up my portfolio site was a big project completed for me. It took me a lot of time to determine the design I wanted to have, what to include, and what features I could use to add some really interesting elements to my site.
One of the most commonplace things on modern-day websites is the ability to contact the person who owns the site. This might be to get in touch with them about work, leave some positive feedback about their site, or ask them a question.
Netlify has a fast and easy way to get this set up on your static site using just HTML and I’m going to show you how I added it to my site.
This tutorial assumes you have hosted a site on Netlify, and you have the ability to send code for deployment. I enabled the ability to deploy through GitHub so when I’m pushing my changes to the repo I’m also deploying those changes to my domain.
First, get to your site’s dashboard:
Navigate to the sites menu once logged in to Netlify so we can work on adjusting the forms for that site.
From the Sites menu choose the site you want to make changes to. Then click on the Forms header in the navigation bar for that site.
When you arrive here you’ll see that you don’t have any forms that Netlify can see. Let’s change that
In Your Site’s Code:
In order for Netlify to be able to collect data, you have to add one of the following attributes to the form so Netlify can see it when it's hosting your site.
data-netlify= "true"
/* or */
netlifyIt should look something like this in your HTML for the opening tag of your <form>
Under the hood when Netlify is parsing the page it is going to add a special attribute to the form to allow you to then find it on your Netlify site page.
Redeploy the code (I used the GitHub deployment option in Netlify) and then after a short time, maybe 5 minutes, you’ll see your form on your Netlify site.
From here you can check submissions, add some protection against spam submissions, and delete submissions as needed. You can also set up to get an email every time someone comes to your site and submits this form, making it easy to get back to people after they have sent you a note.
Happy Hacking!
Resources:
Let’s Connect:
