If you are a frontend developer who is not interested in backend development or you didn't start learning it yet (like me) and you want to make contact form working for your portfolio or your product website, this article is for you.
Why contact form? There is a lot of reasons to use it on your website, Contact Forms Look Professional and make you reachable starting from the website instead of waiting for the visitor to contact you in social media that's may he is not active on, and that may probably cause to lose a possible customer.
It's not hard, there are a lot of websites that offer this service all have a free🆓 and premium💸 plan, how they work?
Well basically when you sign up and start a form they gonna give you an URL to put it inside the action attribute of your form tag
<form
action="url"
method="post"
>
<!--
Important to know ❗❗
you should have:
- inputs with the name attribute
- button with type submit
-->
</form>
but they have an annoying thing when the user submits the form they redirect him to another page.
You feel like you can't control your website, you can customize the redirect page if you're using a premium plan (you cant do it for free with JavaScript 👇) but is recommended to show an alert or label with green color to let the user know that form was submitted.
So how you do that?
This is one of the reasons that's pushed me to share this , after some research, I come up with this solution. Give the form just an id property and we gonna working on it with JavaScript.
⚠ don't forget to give your inputs name property
// we add event listener for click on send button
document.querySelector('button').addEventListener('click', (e) => {
// stop the page from the reloading
e.preventDefault();
// selecting the form
const contactForm = document.querySelector('#form');
// the gold part 🔥
let data = new FormData(contactForm);
fetch("url", { method: "POST", body: data });
// inform the user that the form was submitted
alert('Thank you, your form was submitted.');
// clear the inputs
contactForm.reset()
// or if you want the redirect the user to another page (for free)
// window.open('./thanks.html');
})
⚠ Don't forget to check inputs if valid before sending the email.
And this is a list of website that offer this service:
complicated to use :
I left this form below to let you test the process before you apply it on your website.
That's it, I hope you found this article helpful, Thanks for reading.
Top comments (10)
Thank you for this article from the perspective of a frontend developer!
Usually, if you have contact to backend developers, they could tell you what they expect from the form (if you are using the HTML Form) or implement changes for your form on the server, like some kind of redirection to a certain page. In your case, you are dependent on some kind of service, which also makes it necessary to find your own solution for the (prevention) of the redirection. I would prefer to be able to have this kind of very specific development done independently, e.g. from somebody of my own team, who develops the server.
What you are doing with your example is basically overriding some standard behaviour of the HTML Form.
If you like programming (which you already seem to enjoy for the frontend), maybe you should also have a look at how to implement backend systems. With NodeJS you could keep using JavaScript.
Actually, I'm planning to learn node js but I had to know how to use google form as a frontend developer, for example, if I want to use it for my portfolio I have no co-work because its a personnel project.
Thank you for the comment.
The decision to develop the code yourself is usually an order of magnitude more expensive. After that, it requires constant support. Using solutions like EmailJS saves time and money in the long run.
This was so helpful! I was just looking at how to create a working contact form for one of my projects
I'm glad to hear that, just don't forget to validate inputs and also you can add a timout of 5min or more if the email sent to prevant spam.
I'm sure that the decision to use EmailJS does not take more than a couple of lines of code and is quite intuitive for thousands of developers. Try it and you will see how easy it is, to be honest, even easier than your solution.
You answered from an emotional perspective due to your work in this company, I have already included it in the list for those who want to try it.
You are absolutely right, you pointed out that the EmailJS is complex, although even a programmer taking the first steps can handle this. That's why I suggested you try it. Otherwise I wouldn't have noticed your post.
Try fabform.io form backend service works a charm.