DEV Community

Ahmed Zougari
Ahmed Zougari

Posted on


Contact form without backend using JavaScript ๐Ÿ’ก

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

  Important to know โ—โ— 
  you should have:
   - inputs with the name attribute
   - button with type submit
Enter fullscreen mode Exit fullscreen mode

but they have an annoying thing when the user submits the form they redirect him to another page.

redirect the user

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
  // 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
  // or if you want the redirect the user to another page (for free)
Enter fullscreen mode Exit fullscreen mode

โš  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 (8)

curiousdev profile image
CuriousDev • Edited

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.

zougari47 profile image
Ahmed Zougari

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.

xr0master profile image
Sergey Khomushin

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.

tmchuynh profile image
Tina Huynh

This was so helpful! I was just looking at how to create a working contact form for one of my projects

zougari47 profile image
Ahmed Zougari

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.

xr0master profile image
Sergey Khomushin

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.

zougari47 profile image
Ahmed Zougari

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.

xr0master profile image
Sergey Khomushin

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.

Visualizing Promises and Async/Await ๐Ÿคฏ

async await

Learn the ins and outs of Promises and Async/Await!