form-to-mail

Form To Mail

Form To mail is a simple way to receive emails ✉ from contact forms on your website. Which handles files uploads on the fly for you Out of the box itself. Just Plugin the formToMail middleware and setup the .env variable's. You are good to go.

In development test SMTP service account from ethereal.email are generated and Preview URL's are logged. you can visit them to view the emails.

Getting Started

1. Install

npm install form-to-mail

2. Setup SMTP and Mail Options

Create a .env file in the root of your project with below environmental variables and fill them with your credentials.

# SMTP
SMTP_HOST=
SMTP_PORT=
SMTP_USER=
SMTP_PASSWORD=

#Mail Options
MAIL_FROM_NAME=
MAIL_FROM_EMAIL=
MAIL_TO_NAME=
MAIL_TO_EMAIL=
MAIL_CC_EMAIL=
MAIL_BCC_EMAIL=

All email addresses can be plain email addresses '[e-mail]' or with formatted name (includes unicode support) 'Ноде Майлер <[e-mail]>'

#Mail Options
MAIL_FROM_NAME=  Sender Name
MAIL_FROM_EMAIL=  [e-mail]
MAIL_TO_EMAIL=  [e-mail], "receiver" <[e-mail]>
MAIL_CC_EMAIL=  '[e-mail]',"foo" <[e-mail]>,'Name' <[e-mail]>
MAIL_BCC_EMAIL=  '[e-mail]',"Ноде Майлер" <[e-mail]>,"Майлер, Ноде" <[e-mail]>

Notice that all address fields are comma separated lists, so if you want to use a comma ( or any other special symbol ) in the name part, make sure you enclose the name in double quotes like this: ' "Майлер, Ноде" '

Example

Suppose you have this HTML from in your contact page.Set the form action URL to your Custom endpoint.

contact-form.html

<form action="/" method="POST">

    <div>
        <label for="name" class="form-label"> Full Name </label>
        <input type="text" name="name" id="name" placeholder="Full Name" class="form-input" />
    </div>

    <div>
        <label for="email" class="form-label"> Email Address </label>
        <input type="email" name="email" id="email" placeholder="Enter your email" class="form-input"/>
    </div>

    <div>
        <label for="subject" class="form-label"> Subject </label>
        <input type="text" name="subject" id="subject" placeholder="Enter your subject" class="form-input"/>
    </div>

    <div class="mb-5">
        <label for="message" class="form-label"> Message </label>
        <textarea rows="6" name="message" id="message" placeholder="Type your message" class="form-input"></textarea>
    </div>

    <div>
        <button class="form-btn">Submit</button>
    </div>

</form>

3. Create a express app

creates the routes for the POST endpoint. and add formToMail middleware which will handle the form submission for you. After that you can redirect the users to a confirmation / thank you page or you cloud send a custom response. You can access fields and files with the request Object.

app.post('/',formToMail, (req, res) => {
    const fields =  req.fields
    const files = req.files
    console.log('fields: ', fields)
    console.log('files: ', files)
    res.redirect(303, '/thank-you')
})

app.js

const express = require('express')
const app = express()
const port = 3000
const formToMail = require('form-to-mail')


app.get('/', (req, res) => res.sendFile('contact-form.html'))
app.get('/thank-you', (req, res) => res.sendFile('thank-you.html'))

// POST endpoint
app.post('/',formToMail, (req, res) => {
    res.redirect(303, '/thank-you');
})

app.listen(port, () => console.log(`listening on port ${port}!`))

Sample Form Submission

You can find the sample Contact and Thank you pages inside the test folder.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request