update contact us form

[rosclaritha]

READ & WATCH BELOW FOR BETTER UNDERSTANDING PR Reference https://github.com/phisoft/atongroup-web/pull/497/commits/4c936fabceeab00444c9e4938dcccc4775739295 Video Reference: https://www.youtube.com/watch?v=yP85ECOVMe8

---

Follow the steps:

1. Register phisoft.marketing@gmail.com to https://elasticemail.com/select-product select email api

For below, refer video: https://www.youtube.com/watch?v=yP85ECOVMe8

2. Once success register, in elasticemail, verify email phisoft.marketing@gmail.com

3. You will need to verify link in email

4. Once done, it will be displayed in page Verification as of below:

5. Setup SMTP in settings

   • For new one, you need to Create SMTP Credentials
   • Your username, password will be generated. Copy / Paste to be put in the code

6. Successful SMTP registration will have something like this:

7. Update the code for the form. Refer PR: https://github.com/phisoft/atongroup-web/pull/497/commits/4c936fabceeab00444c9e4938dcccc4775739295

HTML Form

-- the form id, needs to be the as in the script for successful email and correct data.

Script

                  Host  : "smtp.elasticemail.com", //same
                  Username : "appx.noreply@gmail.com", 
                  Password : "7D57893CB377F2430F1E41B62C9EF8CC3201",
                  To  : 'rosclaritha@gmail.com', //email submission recipient ==> hello@phisoft.my
                  From  : "appx.noreply@gmail.com",

9. If success, you should be able to receive the email in your receiver email => hello@phisoft.my

---

[FULL CODE] REFERENCE ONLY

• both are in the same .html file HTML

  <form onsubmit="sendEmail(); reset(); return false;">
  <input type="hidden" name="_subject" value="Request for Information from Aton Group">
  <input type="hidden" name="_template" value="box">
  <div class="mb-3 position-relative border-radius">
  <label for="name" class="visually-hidden"></label>
  <input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
  <label class="input-label" for="name"></label>
  </div>
  <div class="mb-3 position-relative">
  <label for="phone" class="visually-hidden"></label>
  <input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone Number" required>
  <label class="input-label" for="phone"></label>
  </div>
  <div class="mb-3 position-relative">
  <label for="email" class="visually-hidden"></label>
  <input type="email" class="form-control" id="email" name="email" placeholder="Email" required>
  <label class="input-label" for="email"></label>
  </div>
  <div class="mb-3 position-relative">
  <label for="message" class="visually-hidden"></label>
  <textarea class="form-control" id="message" name="message" rows="4" placeholder="Message" required></textarea>
  <label class="input-label" for="message"></label>
  </div>
  <div class="d-flex justify-content-between align-items-center">
  <button type="submit" class="btn text-bg-success">Submit</button>
  </div>
  </form>

[SCRIPT]

<script src="https://smtpjs.com/v3/smtp.js"></script>
<script>
              function sendEmail(){
                Email.send({
                  Host  : "smtp.elasticemail.com",
                  Username : "appx.noreply@gmail.com",
                  Password : "7D57893CB377F2430F1E41B62C9EF8CC3201",
                  To  : 'rosclaritha@gmail.com',
                  From  : "appx.noreply@gmail.com",
                  Subject : "Aton Website Contact Form Submission",
                  Body  : "Name: " + document.getElementById("name").value
                        + "<br> Phone Number: " + document.getElementById("phone").value
                        + "<br> Email: " + document.getElementById("email").value
                        + "<br> Message: " + document.getElementById("message").value

                }).then(
                  message => alert("Message successfully sent.")
                );
              }
</script>