How to send an e-mail using an HTML form and submit it using Node.js and Gulp?

Question

Today I have been working on a very easy HTML contact form which should have the possibility to send out an e-mail using Node.js and Gulp, but I cannot figure out a way to make this work. A relative path to a simple .PHP file isn't the correct way, and it should probably via a HTTP request, but honestly

I don't know how to do this with Gulp. How can I send the form data from a HTML to a Gulp task? Or do I need to use firstly JavaScript to catch the form submit?

See HTML code below:

                        <form action="What needs to be here now?" method="POST">
                        <h3 class="title is-4 has-text-centered">Uw onderneming aanmelden</h3>
                        <div class="control-material is-secondary">      
                            <input class="material-input" type="text" required>
                            <span class="material-highlight"></span>
                            <span class="bar"></span>
                            <label>Name *</label>
                        </div>
                        <div class="control-material is-secondary">      
                            <input class="material-input" type="text" required>
                            <span class="material-highlight"></span>
                            <span class="bar"></span>
                            <label>Company name *</label>
                        </div>
                        <div class="control-material is-secondary">      
                            <input class="material-input" type="text" required>
                            <span class="material-highlight"></span>
                            <span class="bar"></span>
                            <label>Phone *</label>
                        </div>
                        <div class="control-material is-secondary">      
                            <input id="email" name="email" class="material-input" type="text" required>
                            <span class="material-highlight"></span>
                            <span class="bar"></span>
                            <label>E-mail *</label>
                        </div>
                        <div class="submit-wrapper">
                            <button type="submit" class="button button-cta is-bold is-fullwidth btn-align primary-btn raised no-lh">
                                Join
                            </button >
                        </div>

Answer 1

Your strategy will depend on whether you want the form to trigger an e-mail on the client side, without any interaction with the server; or whether you want the form to be submitted to a server, and then to have the server send an e-mail.

Client-side only:

Your "Join" button could trigger a JavaScript function that prevents the default form submission and instead retrieves the form entries and generates a complex mailto: address:

function sendEmail() {
  // Write some code that gets form entries
  window.location.href = 'mailto:' + address + '?subject=' + ...;
}

(There are lots of web resources for learning about complex mailto: addresses.) This will cause the user's preferred mail client to open, and will fill the e-mail with the content you've specified. The user hits "Send" in their client, and the e-mail is sent, without any involvement of your server.

Server-side control:

There are a variety of ways of doing this, but an easy first way is to use a Node.js package like Nodemailer . Set up your server to receive the multipart form data via a POST request route, and then have your server transform that data into mail content into a Nodemailer transporter.sendMail command. Unlike the client-side case, you will need to set up a dedicated email sender account--either on your own smtp server, or on a service like gmail --for your server to use.

Alternately, if you want your server to just act as an intermediary and not send its own emails, you could register with a email API like SendGrid, Mailgun, etc. Your server would then hit their API with the data submitted to your POST route, and they would send the email.