How to send contact form data to an email address without server-side language

Nelson Chinedu — Sun, 31 May 2020 21:42:18 +0000

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.

HTML5
CSS3
NETLIFY

HTML => according to Wikipedia, Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser.
CSS => according to Wikipedia, is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
NETLIFY => according to Wikipedia, 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 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 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, 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.

#open the index.css file, to add the below sample code in any text #editor.

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.

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

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

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.

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

So let’s test things up

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

Scroll down and click on Change site name

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

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.

DEV Community: Nelson Chinedu

How to send contact form data to an email address without server-side language