How To Link The Submit Button To Email in HTML?

Question

I have a contact form and I want to link the submit button to email, so whenever the user finishes typing info in the form and they click submit, their responses are sent to me. How would I accomplish this task?

Here is the HTML and CSS of my Contact Form:

input[type=text], [type=email], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: rgb(62, 3, 179);
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: deeppink;
}


.contactform {
  position: relative;    
  border-radius: 50px;
  background-color: #f2f2f2;
  padding: 5px;
  z-index:2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:auto;
  margin-top:3%;    
  width: 100%;
  animation-name: gradient;
  animation-duration: 3s;
  animation-iteration-count: infinite;  
    
}
    
.contactform:hover { 
 animation-name: gradient;
 animation-duration: 15s;
 animation-iteration-count: infinite;    
    
   
}


.column {
  float: center;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
    
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column, input[type=submit] {
    width: auto;
    margin-top:0;
  }
}

 <form name="myform" action="" method="POST" onsubmit="return validForm()"> 
<div class="contactform">
  <div style="text-align:center">
    <div class="section-title">
    <h2></br>Get In Touch</h2>
    </div>
    <p>Feel Free To Reach Out To Me Through This Form! </p>
  </div>
  <div class="row">
    <div class="column">
      <form action="/action_page.php">
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="firstname" placeholder="Your name..">

        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lastname" placeholder="Your last name.."> 

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="Your Email..">
          

        <label for="subject">Subject</label>
        <textarea id="subject" name="subject" placeholder="Lets Collaborate..." style="height:170px"></textarea>
        <input type="submit" value="Submit">
      </form>
    </div>
  </div>
</div>
        </form>

After the user hits submit, it should be sent to my email. How would you do that?

You can't do this with just HTML properly. Any amount of research on your part would have told you you need some server-side technology for this like .NET, php, ruby, node etc — Jamiec, Jan 06 '21 at 14:58
You can try to call a Node.js AWS lambda function that uses sendgrid or Mailchimp email npm package to send emails. After you create that function, use API gateway to get the URL. From your frontend, you can make an HTTP POST call to that API URL. — Sudharsan Ravikumar, Jan 06 '21 at 15:00
This question is a duplicate of **many** previous questions on this very site - please use the search function (or your preferred search engine) before posting here (in accordance with Stack Overflow's governing [How to Ask](https://stackoverflow.com/help/how-to-ask) guidelines. — esqew, Jan 06 '21 at 15:00

How To Link The Submit Button To Email in HTML?

0 Answers0