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.
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.
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.
- 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.cssin the folder created earlier.
- Create an account on NETLIFY, to be signed in.
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
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
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.
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.