Photo by Adam Solomon on Unsplash

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.

Netlify Heading menu => click on ‘Sites’

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 */
netlify

It should look something like this in your HTML for the opening tag of your <form>

Form tag with Netlify attribute

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:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store