node-express-nodemailer-tailwindcss-contact-form

Contact form using Node, Express, Nodemailer and TailwindCSS. Custom route to accept form responses, serve the HTML file to the browser, add functionality to the form and style it using TailwindCSS.

View on GitHub

Node, Express, Nodemailer, and TailwindCSS Contact Form Tutorial

Learn how to build a contact form with Node, Express, Nodemailer, and TailwindCSS.

Getting Started

  1. Fork this Repo or download the latest release.
  2. Clone it.
  3. Install Node, Express, Nodemailer, and TailwindCSS with the following commands: npm install.
  4. Run the following command to start the server: npm start or npm run dev.
  5. Open your browser and go to http://localhost:3000/.
  6. You should see a contact form.
  7. Add .env to your project with the following contents:
# .env
# NODEMAILER CONFIG
MAIL_EMAIL=<example@gmail.com>
MAIL_PASSWORD=<app password here>
  1. Create a app password for your email account and make sure you have 2FA enabled. If you’re not sure how to enable it, check out this guide.
  2. Submit the form and you should see a confirmation email.

Resources

Blog Articles

Node, Express, Nodemailer, and TailwindCSS Contact Form Tutorial

Output

Contact Form website output

License

Website is available under the MIT license. See the LICENSE file for more info.