πŸ’Œ A simple contact form that helps people send you a message. πŸ“© to your email. - built with JavaScript/Nodemailer πŸ“ƒ

Overview

Implementation using async/await:

app.js

const contactForm = document.querySelector(".contact-form");
let name = document.getElementById("name");
let email = document.getElementById("email");
let subject = document.getElementById("subject");
let message = document.getElementById("message");

contactForm.addEventListener("submit", (e) => {
  e.preventDefault();

  async function postData() {
    let formData = {
      name: name.value,
      email: email.value,
      subject: subject.value,
      message: message.value
    };

    const response = await fetch("/", {
      method: "POST",
      body: JSON.stringify(formData),
      headers: {
        "Content-Type": "application/json"
      }
    });

    if (!response.ok) {
      throw new Error(`Request failed with status ${reponse.status}`);
    }
    console.log("Email sent successfully");
    name.value = "";
    email.value = "";
    subject.value = "";
    message.value = "";

    console.log(formData);
  }
  postData();
});
You might also like...

A contact app built with Solid.js, Vite, Hope UI and Typescript.

Solid Contacts Solid Contacts is a contact app to learn more about concepts like Solid.js (router / store / resources / reactivity), Vite and Hope UI.

Sep 21, 2022

Help Ukraine - add ribbon with Ukraine flag into the website you manage, show the anti-war message to Russian users, or block them from your service.

Help Ukraine - add ribbon with Ukraine flag into the website you manage, show the anti-war message to Russian users, or block them from your service.

🟦 Stop war on Ukraine 🟨 Help Ukraine - add ribbon with Ukraine flag into the website you manage, show the anti-war message to Russian users, or bloc

Jan 7, 2023

To-do list is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. Built with JavaScript.

To Do List Application that record the tasks to remind you and got many features that you might need. This is an image for it Live Demo Live Demo Here

Jul 13, 2022

To-do list is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. Built with JavaScript.

To-do List To-do list is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complet

Mar 4, 2022

Microverse Module 02 Project: This is educational project is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. Built with HTML, Sass, JavaScript and Webpack.

Project Demo Live Demo Description To-do list is a tool that helps to organize your day. It simply lists the things that you need to do and allows you

Oct 21, 2022

The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.

Awesome Books This is the restructured version of the famous awesome-books project! Here you can find JavaScript broken into modules, using import-exp

Nov 15, 2022

πŸŽ‹ Echo your message as anonymous on Slack!

πŸŽ‹ Echo your message as anonymous on Slack!

Bamboo Forest πŸŽ‹ μ—¬λŸ¬λΆ„μ˜ μŠ¬λž™ μ›Œν¬μŠ€νŽ˜μ΄μŠ€μ— κ΅¬μ„±μ›λ“€μ˜ λ©”μ‹œμ§€λ₯Ό 읡λͺ…μœΌλ‘œ 전솑할 수 μžˆλŠ” 곡간을 λ§Œλ“€μ–΄λ³΄μ„Έμš”. 이럴 λ•Œ μ‚¬μš©ν•΄λ³΄μ„Έμš” κ΅¬μ„±μ›μ˜ μ†”μ§ν•œ ν”Όλ“œλ°±μ΄ ν•„μš”ν•  λ•Œ λ―Όκ°ν•œ μ΄μŠˆμ— λŒ€ν•΄ 토둠이 ν•„μš”ν•  λ•Œ ꡬ성원을 μΉ­μ°¬ν•˜κ³  싢을 λ•Œ 고민거리λ₯Ό 털어놓을 μž₯

Dec 26, 2022
Owner
Tobi Adesokan
⚑... making things work on the web 🌍
Tobi Adesokan
Mute email noise from people you don't know.

All the love to supporters ❀️ You are fantastic if you're using emailgurus.xyz. Thank you so much for your support. Welcome to Emailgurus! Hi! Here is

Aymane Sennnoussi 16 Oct 28, 2022
Email Genie Allows autocomplete on email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.).

Allows users to easily and quickly complete an email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.). This package stands out for its flexibility, its compatibility with libraries / frameworks, but especially its use of basic HTML and Javascript functionalities that maximize the native behavior of desktop AND mobile browsers.

Simon Arnold 3 Oct 4, 2022
375 DSA Tracker helps you build your confidence in solving any coding related question and helps you prepare for your placements. It is your personal web-based progress tracker based on 375 DSA Sheet by Aman Dhattarwal & Shradha Didi

375-DSA Tracker ??‍?? Me and my friend Abhilash Jena made a 375 DSA Tracker website based on 375 DSA Sheet by Aman Dhattarwal & Shradha Didi which hel

null 8 Nov 11, 2022
GatsbyContactFormBasedOnFormikAnalysis - This is example contact form for gatsby framework.

Gatsby minimal starter ?? Quick start Create a Gatsby site. Use the Gatsby CLI to create a new site, specifying the minimal starter. # create a new Ga

Bart 1 Jan 2, 2022
Plugin for Obsidian.md to send markdown notes to Buttondown.email

Obsidian Buttondown Plugin Buttondown is a tool for producing email newsletters. It likes emails written in Markdown, and has an API. This plugin allo

Caro 4 Nov 15, 2022
Cindy Dorantes 12 Oct 18, 2022
A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again.

form-storage A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again. Installation via npm npm install

appleple 159 Dec 10, 2022
Automatic Role Adder Is Usually Used In Coding Servers Which Give Access To Codes By Subbing To Their Channel So This Helps Them To Auto Role People :)

Automatic Role Adder Setup Guide Automatic Role Adder Is Usually Used In Coding Servers Which Give Access To Codes By Subbing To Their Channel So This

NotJust 25 Dec 23, 2022
This is an app that helps people keep track of all their activities for a period of time.

To-Do List This is an app that helps people keep track of all their activities for a period of time. They can be able to see what activities they have

Abubakar Ummar 6 Oct 17, 2022