How to send contact form data to an email address without server-side language
Tags: html, css3, netlify, beginners
Published: 2020-05-31 21:42:18

Sending of form data to an email address requires a backend developer to make use of a server-side language which can be either PHP, NodeJS, e.t.c. by writing some logic codes to interact with the client-side (Front-end) to take some action by submitting the form data to a specified email address if all validations are meant (if there is any). But It's okay if you don't know any server-side language for now.

Form data is an essential part of a web application by getting in touch with your visitors or customers that sends a message across.

So in this article, we will be demonstrating this by creating a contact form using the below outlined.

1. HTML5
2. CSS3
3. NETLIFY

* HTML => according to [Wikipedia](https://en.wikipedia.org/w/index.php?cirrusUserTesting=control&sort=relevance&search=html&title=Special:Search&profile=advanced&fulltext=1&advancedSearch-current=%7B%7D&ns0=1), Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser.

* CSS => according to [Wikipedia](https://en.wikipedia.org/w/index.php?cirrusUserTesting=control&sort=relevance&search=css&title=Special:Search&profile=advanced&fulltext=1&advancedSearch-current=%7B%7D&ns0=1), is a style sheet language used for describing the presentation of a document written in a markup language like HTML.

* NETLIFY => according to [Wikipedia](https://en.wikipedia.org/w/index.php?cirrusUserTesting=control&sort=relevance&search=Netlify&title=Special:Search&profile=advanced&fulltext=1&advancedSearch-current=%7B%7D&ns0=1), is a cloud computing company that offers hosting and serverless backend services for web applications and static websites. So in essence we will be deploying/hosting our little project to Netlify for free.

N:B JavaScript can be added into the mix for Client-side validation for browsers that don’t support HTML5.
___

Before continuing with the process, we need to create an account (signup), on [NETLIFY](https://app.netlify.com/signup) by using any option provided either connecting the account with GitLab or Github by granting access to netlify, that is if you have one or by using just email. But in this case, I am using an email option to signup.

N:B We will be using sample codes to create our form from [w3schools](https://www.w3schools.com/howto/howto_css_contact_form.asp) to save up time.
___

**TODO**
* Create a folder on your desktop to keep hold of the files needed.
* Open any text editor of your choice to create/save the `index.html` and `index.css` in the folder created earlier.
* Create an account on [NETLIFY](https://app.netlify.com/signup), to be signed in.

**Folder structure**
`- contact-form`
`|---- index.html`
`|---- index.css`

`#open the index.html file, to add the below sample code in any text    
 #editor.
`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1vivnhvaj3sc0pkufztg.png)

`#open the index.css file, to add the below sample code in any text    
 #editor.
`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vgy2wjcrxhsvsqh9mxm4.png)

___

N:B Since we are making use of NETLIFY service for the sending of emails we need to add some attributes on the HTML form tag, which is `method="POST”` `name="contact"` `data-netlify=”true”`

So next, is to drag the folder we created that holds the files to NETLIFY for deployment. and wait a bit for the site to be deployed. That’s if you are logged in to NETLIFY.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wp715inely80jw6phsg5.gif)

Next up is to add some required config needed to receive notifications when the contact form is filled up.

So let’s head to the `forms` section tab and click on it, then click on `settings and usage`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n5utl0rgvo5i0z2yzu3j.jpeg)

Then next up is to click on the `Add notification` button and click on `Email notification`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0dbuhttc6n1x1ecmfgwy.jpeg)

Clicking on the `Email notification` will pop up a modal asking for some details as seen in the image below.

* `Event to listen for:` As the name suggest, will listen for new form 
   submission.
* `Email to notify:` It will be the email to receive the message when 
   the contact form is filled up and submitted.
* `Form:` Here you select the form you want, with the name you added on 
   the form tag.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pjx8br7yexduumcuqlw7.jpeg)

Next up is to click on the deployed link provided for the project as seen/shown on the image below

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/poxd9ceove6gf9ve9960.jpeg)

So let’s test things up

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nhl27d8d2w8yuiv2yfkb.gif)

___

So looking at it all seems to work with the contact form details been sent to the email address specified. But we can still change things up by making an edit to the random site URL given to us to our own specified URL, By following the steps on the image below.


Click on `settings`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d8hqlxrdowr2413kyzfd.png)


Scroll down and click on `Change site name`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/41wsxjkdaol70yyldarv.png)


Which will pop up a modal box, enter the new URL you want and click on `save` if the URL specified is available.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/htrlqqfstbo0dhll9egi.png)

___

Now the URL has been from the random URL given to a more meaningful URL specified.

Thank you for your time If you read through up to this point, and please do share, like, and comment if found helpful.