How to use a SMTP in an html contact form? - javascript

I have the following contact form:
<div class="container red_layer_footer">
<form action="/var/www/cgi-bin/FormMail.pl" method="POST">
<input type=hidden name="recipient" value="mymail#gmail.com">
<input type=hidden name="subject" value="Nuova mail">
<input type=hidden name="redirect" value="http://www.evogale.it/grazie.html">
<h2>CONTATTI</h2>
<div class="name">
<label for="name"></label>
<input type="text" placeholder="Nome" name="name" id="name_input" required>
</div>
<div class="email">
<label for="email"></label>
<input type="email" placeholder="Mail" name="email" id="email_input" required>
</div>
<div class="message">
<label for="message"></label>
<textarea name="message" placeholder="Messaggio" id="message_input" cols="30" rows="5" required></textarea>
</div>
<div class="submit">
<input type="submit" value="Invia Messaggio" id="form_button">
</div>
<input type=hidden name="required" value="email,name,message">
</form> <!-- // End form -->
</div> <!-- End #container -->
In an html file, and I want it to send email via an SMTP. How should i modify the code to make that happen? Looking around on the web I've seen that I might add some jQuery code?

To be able to send emails, you need to provide the correct SMTP server when you set up your email client. Most of the internet systems use SMTP as a method to transfer mail from one user to another. It is a push protocol. In order to use SMTP you need to configure your Gmail. You need to change two settings of your gmail account from which you are sending the mail i.e.
1. Revoke 2-step verification
2. Enabling less secure apps to access Gmail. You can easily do this by clicking on the link Enable
After this just create a html file and include SMTP in your tag :
<script src="https://smtpjs.com/v3/smtp.js"></script>
Below is the html code which you will need to run in order to send the mail.
<script src=
"https://smtpjs.com/v3/smtp.js">
</script>
<script type="text/javascript">
function sendEmail() {
Email.send({
Host: "smtp.gmail.com",
Username: "sender#email_address.com",
Password: "Enter your password",
To: 'receiver#email_address.com',
From: "sender#email_address.com",
Subject: "Sending Email using javascript",
Body: "Well that was easy!!",
})
.then(function (message) {
alert("mail sent successfully")
});
}
</script>
<body>
<form method="post">
<input type="button" value="Send Email"
onclick="sendEmail()" />
</form>
</body>
NOTE : Best and Secure way to use above method with SecureToken as above method is for understanding purpose, above approach is highly insecure as it exposes credentials to the users , for how to enable Security you can check this https://smtpjs.com/

Related

how to submit a text input to somewhere that i can collect submissions

I'm really stuck on this I'm not sure how I would code text being sent or where i could send it to
<div class="comment-box">
<h2> submit quiz </h2>
<form action="#">
<input type="text" name="full_name" placeholder="Full Name...">
<input type="email" name="email" placeholder="Email Address...">
<button type="submit">submit comment</button>
</form>
any help or ideas on how i can do this would be great
Assuming you want to receive this information via email and need a quick and easy solution (however not reccomended), you can use this form tag
<form action=”mailto:contact#yourdomain.com” method=”POST” enctype=”text/plain” name=”EmailForm”>
Ensure you change the email in the form action="" tag.
You can also look into using a more advanced method through PHP.

Form Validation - Required attribute not coming when HTML content sent as email to Gmail

I am sending the following form as email in Gmail from c# (SmtpClient) to get the users comment.
<form id='RejectFeedbackForm' method='get' action="http://localhost:49309/Controller/Action">
Reason for rejection<br />
<input type='text' name='comment' id='comment' required/><br />
<input type='submit' value='Submit'>
</form>
But Gmail omits the required attribute. I get it like this as email.
<form id="m_-8883071243854624425RejectFeedbackForm" method="get" action="http://localhost:49309/Controller/Action"
target="_blank">
Reason for rejection<br>
<input type="text" name="comment" id="m_-8883071243854624425comment"><br>
<input type="submit" value="Submit">
</form>
Any idea how to achieve the required validation? I can't use Javascript because Gmail omits that too.

Replace html5 bubble messages with message under fields

I have the below code and I would like instead of bubbles showing messages underneath the error fields. What addition should I make to my code?
<script type="text/javascript">
$(document).ready(function() {
$('#emailform').submit(function(event) {
event.preventDefault();
$.ajax({
backedn validation
}
});
});
});
</script>
<body>
<form id="emailform" class="laform" method="post" action="*.php">
<label>Email*: </label>
<input type="email" name="email" id="email" class="input" required oninvalid="this.setCustomValidity('The email address you entered is not valid')" oninput="this.setCustomValidity('')" onchange="try{setCustomValidity('')}catch(e){}">
<label class="col-md-12 labelcom">MSG</label>
<textarea class="input2" name="comment" id="comment" required oninvalid="this.setCustomValidity('This field is mandatory')" oninput="this.setCustomValidity('')" placeholder="Enter your comments / suggestions..."></textarea>
<button type="submit" class="btn" name="submit" value="submit">SUBMIT</button>
</form>
</body>
Overriding the HTML required message is not possible. More Information.
Just use Javascript and create your own validation checking and append messages under the elements if the validation fails.
Edit: After doing more research I found another SO post that contained more insightful information.
Apparently, it is possible. But you will have to use Javascript.
This code changes the message of the validation box the HTML required provides. You should probably look up browser support.
document.getElementById("input").setCustomValidity("Message");

How to get a Linkedin Autofill Generator plugin that runs on a website?

I'm trying to add an Autofill Generator from Linkedin in my form.
First, I'm using a button "sign in with linkedin" into my form and then I have added a script for the autofill.js
My button "sign in with linkedin" is working but the button to filling the form with informations from Linkedin doesn't display.
Here is my code :
<form method="post" action="#" id="contactForm">
<div class="line">
<div class="formItem"><input type="text" name="FIRSTNAME" placeholder="Firstname *" required /></div>
<div class="formItem formR"> <input type="text" name="LASTNAME" placeholder="Lastname *" required /></div>
</div>
<div class="line">
<div class="formItem"><input type="text" name="COMPANY_NAME" placeholder="Company *" required /></div>
<div class="formItem formR"><input type="email" name="MAIL" id="EMAIL" placeholder="Email *" required /></div>
</div>
<div class="line">
<div class="formItem"><input type="text" name="PHONE" id="PHONE" placeholder="Phone *" required /></div>
</div>
<div class="line">
<input type="submit" value="Submit" >
</div>
</form>
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: [my_api_key]
authorize: true
</script>
<script type="in/Login"></script>
<script src="https://www.linkedin.com/autofill/js/autofill.js" type="text/javascript" async></script><script type="IN/Form2" data-form="contactForm" data-field-firstname="FIRSTNAME" data-field-lastname="LASTNAME" data-field-phone="PHONE" data-field-email="EMAIL" data-field-company="COMPANY_NAME"></script>
I don't know if there's a special condition to use for the Autofill Generator or if I have to add something in my app,..
Do you have any idea ?
Thank you very much for you time.
Since the support of Linkedin send me here to find answers of my problem, I restart my question if anybody could have an idea.
I need to add a Linkedin Autofill Generator in my form on a website created via Selligent, so here step by step what I did :
I have created an app and have filled the informations required for it (email, url, ..)
Then when my app was created, I have added two URL in OAuth 2.0 and 2 URL for domain SDK
Concerning the integration, it's the code in my previous post.
But, when I checked my console, I see this following error message : Load denied by X-Frame-Options: [deleted link] does not permit cross-origin framing.
here's the error
Is there something else to whitelist ? Error in my code ?
Thank you very much !

Basic code for form with email verification

I want a basic form on my website, with e-mail notification.
Now I have the following code, but this doesn't send an email notification automatically.
Does anyone know how to add an automatic email notification?
<!DOCTYPE html>
<html>
<body>
<font face="verdana">
<h2>Title</h2>
<form action="MAILTO:(emailadress)" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value=""><br>
E-mail:<br>
<input type="text" name="mail" value=""><br>
Country:<br>
<input type="text" name="country" value=""><br>
<br>
<br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</font>
</body>
</html>
Using a mailto link as a form action (if done correctly) only populates the user's default mail sending program, it does not send an email automatically. See this answer for details. If you want your form to send an email directly and automatically, you will need to have it connect to a 3rd party email service's API to send it.
One example of a free service that turns an API call into a sent email is FormSpree, but you can also use a generic email sending API like Mailgun, Sendgrid, or similar.

Categories

Resources