Deploying a free Static Website and a working contact form in seconds with Netlify

If you've got your self a coding portfolio or a coding project and its sitting in your git-hub repository, and you've really haven't found a way to send it to someone, maybe you are applying for a job or something you don't really expect your recruiter to go into you repo start cloning or downloading the zip file. Not everyone has the time to do that what you need is a repo URL that one can quickly click on and view your project.

To host your site, you should have a full understanding of how github works, creating repo , cloning pushing and the rest, which won't be covered here.

Note: you can do this manually but if you do that you are going to miss you on what Is called continuous deployment, so it very important you have all your code in a source control Screenshot_20200822-143530.png Above is an image of a fully loaded repo waiting to be hosted there now, Go to netlify.com

  • Click on get started in seconds Screenshot_20200822-144524.png

  • Sign Up

  • Click on New Site from Git
  • Click on Github Screenshot_20200822-151754.png after verifying you github account

  • Search for your repository name app.netlify.com_start_repos (1).png

  • After deploying your site it takes seconds to deploy

IMG_20200822_154023.jpg

  • And voila you have your hosted URL

IMG_20200822_154530.jpg yes its that simple 🤗🤗🤗.

The best part is once you update you git status maybe make some changes and all to your repository it automatically gets uploaded. Netlify Comes with more other features you can even change the URL name in the settings to a more suitable one.

Adding the form feature on your static Website

One of the major disadvantage of using netlify to host your site is that Netlify site is deployed to a CDN and serves up static content and although you can run PHP at the time of a deploy, you cannot execute PHP during a page request. I had this major problem when I created my first project and I was trying to build a personal portfolio, working on the contact form I spent weeks learning how to use php to validate forms and all, to my utmost disappointment netilfy couldn't run it. But now with with a simple addition of forms attribute you can easily do that.

IMG_20200822_172851.jpg

Now this is a fine piece of a well designed form, let's go and look behind the scene.

  • Open your form add and add the action attribute with a value of POST then add data-netlify with a value of true just like this
<form action="POST" data-netlify="true" >

</form>
  • Add your input tags with any attribute you want place holder's and the rest the only thing important here is the name attribute it has to have a value of what title you want the form data to appear in either you netlify account or email
<form action="POST" data-netlify="true" >

         <input type="text" name="name" placeholder="Name"  id="firstName" class="first-name" >

         <input type="text" style="margin-left: auto;" name="email" placeholder="Email" id="lastName"  class="last-name"><br>

           <input type="text" name="subject" placeholder="Subject" id="projectName" class="project-name"> 
        <textarea class="description" name="message"   placeholder="Type your Message here" id="projectDescription" class="project-description"></textarea>
        <input type="submit" value="Submit" name="ContactUS" class="submit-response"></form>
  • And that's all you need

  • Go to your hosted url to test the form IMG_20200822_175151.jpg

IMG_20200822_175412.jpg

-- Go to your netlify account click on the deployed site and scroll down to recent form submissions to read your forms input

IMG_20200822_175458.jpg And there you have it 🤭🤭🤭, the last part would be

Linking your contact form to your email

  • Still on netlify your deployed site go to settings and click on forms then add Notifications

IMG_20200822_180639.jpg

  • Click on add email and save it

IMG_20200822_181002.jpg

  • Done any message henceforth would go directly to your email

IMG_20200822_181128.jpg

Thanks

Oyegbile Marvellous Oluwagbemiga's photo

This is really helpful. It safes stress of converting static files to server side scripts just to run the contact form. I ll love to adopt this technique.Thanks Man..

Okeke Johnpaul's photo

You are welcome.

Offisong Emmanuel's photo

Wow this is exceptional ... I’ve finally learnt something new . Thanks a bunch

Okeke Johnpaul's photo

You are welcome

Somtochukwu Uchegbu's photo

This is helpful man, will check out netlify

Okeke Johnpaul's photo

Thanks, you should.