Functional Contact Form using HTML, TailwindCSS, SMTPJS and Elastic Email

Introduction

Building a sleek and efficient contact form without backend code is little confusing. So lets build the minimal form as shown above using HTML, TailwindCSS, SMTPJS, and Elastic Email – all without any complex backend code. Moreover, client-side form validation is also implemented.

Necessary Setup in Elastic Email

1. Firstly visit the Elastic Email website by Clicking me✈️
2. There you can see the Try for Free from where you will be redirected to the product selecting page.
3. Choose the Email API by clicking the Try for Free of Email API.
4. After that you will be redirected to the Signup page. And you can simply signup using you Gmail easily.
5. And once, signup is properly carried out, then you will be redirected to your Elastic Email dashboard
6. Now you need to create your STMP credentials. For that simply click on the settings, and there you can see the SMTP credentials creating section as below.
7. After that you will reach to a field which asks for the username. Simply put the email through which you are logged in (Example - youremail@gmail.com).
8. After that a popup will appear which consists of Username, password, Server and the Post. (Note the username and the password somewhere as you need it in the SMTPJS and close the popup.)
9. Now you need to verify the existing email address and the domains. So as similar to step 6. Click on the settings and there you can see the Domains section.
10. After that you will see the Domain verification as well as the Email Verification from where you need to verify you domain if you have domain and if not you need to verify the email compulsoryly.
11. Once the verification is done, we can jump to the SMTPJS for further steps.

Necessary Setup in SMTPJS

1. Firstly visit the SMTPJS website by Clicking me✈️
2. On scrolling you will react to the security section from where you can encrypt your SMTP credentials. Simple click on it.
3. On clicking Encrypt your SMTP Credentials, a popup will appear as below where you need to fill STMP Username and the SMTP Password. Put the username and password you obtained in Step-08 in Elastic Email part.
4. After filling the form, on clicking the Generate security token a token is created. Again save this token somewhere, we will use it in our form.
5. Finally the Elastic email and the SMTPJS part is done. Now you can download the code from below link.

Source Code

Get the code. If you like the code, consider following and giving the repo a star 🌟

Final Changes on the code

1. If you open the JavaScript code file ./script.js, you can see the SecureToken, simply add your secure token and change the to and from value with your email. Finally everything is completed. Try testing 😄

/* Other Codes*/
 
function sendEmail(fullNameValue, emailValue, messageValue) {
  Email.send({
    SecureToken: "____________<YOUR SECURE TOKEN>__________",
    To: "___________<DESTINATION EMAIL>_________",
    From: "_________<SENDER MAIL>____________",
    
    /* Other Codes*/

Final Message

If you are having any hard times following the above mentioned steps. Feel free to connect with me in instagram and to drop you queries 👻