update contact form - Githubissues

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:

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

Once success register, in elasticemail, verify email phisoft.marketing@gmail.com
You will need to verify link in email
Once done, it will be displayed in page Verification as of below:
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
Successful SMTP registration will have something like this:
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",

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>

phisoft / phisoft-web

update contact form #220