This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 15k traffic Daily!!!

Contact form without backend using JavaScript πŸ’‘


In case you are a frontend developer who just isn’t involved in backend improvement otherwise you did not begin studying it but (like me) and also you wish to make contact type working to your portfolio or your product web site, this text is for you.

Why contact type? There may be a whole lot of causes to apply it to your web site, Contact Varieties Look Skilled and make you reachable ranging from the web site as an alternative of ready for the customer to contact you in social media that is could he’s not energetic on, and that will in all probability trigger to lose a doable buyer.


It isn’t onerous, there are a whole lot of web sites that supply this service all have a freeπŸ†“ and premiumπŸ’Έ plan, how they work?
Effectively principally if you join and begin a type they gonna provide you with an URL to place it contained in the motion attribute of your type tag

<type
  motion="url"
  methodology="put up"
>
 <!-- 
  Essential to know ❗❗ 
  you must have:
   - inputs with the title attribute
   - button with sort submit
 -->
</type>
Enter fullscreen mode

Exit fullscreen mode

however they’ve an annoying factor when the consumer submits the shape they redirect him to a different web page.

redirect the user

You’re feeling like you possibly can’t management your web site, you possibly can customise the redirect web page should you’re utilizing a premium plan (you cant do it at no cost with JavaScript πŸ‘‡) however is advisable to point out an alert or label with inexperienced coloration to let the consumer know that type was submitted.

So the way you do this?
This is among the causes that is pushed me to share this , after some analysis, I provide you with this answer. Give the shape simply an id property and we gonna engaged on it with JavaScript.

⚠ remember to provide your inputs title property

// we add occasion listener for click on on ship button
doc.querySelector('button').addEventListener('click on', (e) => {
  // cease the web page from the reloading
  e.preventDefault();
  // deciding on the shape
  const contactForm = doc.querySelector('#type');
  // the gold half πŸ”₯
  let information = new FormData(contactForm);  
  fetch("url", { methodology: "POST", physique: information });
  // inform the consumer that the shape was submitted
  alert('Thanks, your type was submitted.');
  // clear the inputs
  contactForm.reset()
  // or if you would like the redirect the consumer to a different web page (at no cost)
  // window.open('./thanks.html');
})
Enter fullscreen mode

Exit fullscreen mode

⚠ Remember to verify inputs if legitimate earlier than sending the e-mail.

And this can be a record of web site that supply this service:

sophisticated to make use of :


I left this way beneath to allow you to check the method earlier than you apply it in your web site.

That is it, I hope you discovered this text useful, Thanks for studying.

The Article was Inspired from tech community site.
Contact us if this is inspired from your article and we will give you credit for it for serving the community.

This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 10k Tech related traffic daily !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?