-1

I have setup a page where anyone can add their email so that I can contact them.

Currently, the way it is setup, if I add an email and click send, it just takes the user to the top of my site, which is on the same page.

HTML

<section id="signup" class="signup-section">
 <div class="container">
   <div class="row">
     <div class="col-md-10 col-lg-8 mx-auto text-center">

      <i class="far fa-paper-plane fa-2x mb-2 text-white"></i>
      <h2 class="text-white mb-5">Contact</h2>

      <form class="form-inline d-flex">
        <input type="email" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="inputEmail" placeholder="Enter email address...">
        <button type="submit" class="btn btn-primary mx-auto">Email</button>
      </form>

     </div>
   </div>
 </div>
</section>

JS

Vanilla Javascript version of this? No jQuery.

let container = document.getElementById('container');
container.innerHTML = container.innerHTML + '<button class="etmkug-14 SuUwW"><span class="etmkug-16 ctwFJG">Mark All Read</span></button>';

// Is there a way to make all this and have it be able to send info back to me purely with vanilla JS?

NOT A DUPLICATE

Looking for JS equivalent

mph85
  • 1,276
  • 4
  • 19
  • 39
  • A really dirty workaround, which I don't recommend, would be inserting a `onclick="javascript:void();"` inside your submit button – trinaldi May 05 '19 at 02:28
  • what is the top of my site? It redirect to another page or the header section? – Hien Nguyen May 05 '19 at 02:28
  • goes back up to the top of the same page, the header – mph85 May 05 '19 at 02:31
  • thanks for that, would this be a situation where it would be better to add a separate JS file or would/could there be another way of going about doing this? – mph85 May 05 '19 at 02:33
  • Do you already have the email delivery handled and you want you redirect to another page after the form is processed, or are you looking for a solution to send the email? – steveax May 05 '19 at 03:36
  • With a proper research, using your title, would have given you several links to follow up. SO is not a place where you ask others to do that for you. – Asons May 05 '19 at 08:20
  • gotcha, appreciate it, will look through and close this if I find what I'm looking for. – mph85 May 05 '19 at 21:58

2 Answers2

1

Let me know if I'm missing something, but yes, for the functionality you are looking for you need more than just HTML, since HTML can only handle the structure of a page. PHP is a great and easy way to add this feature.

I found this tutorial which should be a fairly simple explanation of how to create the functionality and how to add validation to secure your form (very important to protect yourself and your site from hackers and viruses!) : http://form.guide/email-form/php-form-to-email.html

Michele Smolensky
  • 51
  • 5
  • 1
    why was my answer and the other answer below downvoted? What you are trying to accomplish can't be done with HTML alone. – Michele Smolensky May 05 '19 at 14:39
  • not sure, but appreciate it, is php usually the way to do this? I know there's no one way to do it, but i could just stick to javascript right? or is a better feature that php offers that js doesn't? – mph85 May 05 '19 at 23:50
  • 1
    Yea, PHP is usually the way to do it, JS unfortunately doesn't offer a method to send email. – Michele Smolensky May 06 '19 at 15:01
1

You have to use php.

I made a short php program to send a email entered in the form. But be aware that you have to upload it to a webserver in order for the emails to be send. At least for me, it didn't work when I just used XAMPP.

index.php

<body>
    <form action="" method="post" accept-charset="UTF-8">
      Email:<br><input type="email" name="email" required><br>
      <input type="submit" name="submit" value="Submit">

      <?php
      if(isset($_POST['submit'])){
          $to = "YOUREMAILHERE"; //where the email gets send to
          $email = $_POST['email']; //gets email entered in the form
          $subject = "Form submission"; //the subject of the email
          $message = "The submited email was: " . $email; //the messeage of the email send to you
          $headers = "From:" . $email; //sender the email should have
          mail($to,$subject,$message,$headers); //sends the email
          exit();
          }
      ?>
    </form>
</body>
reichenwald
  • 100
  • 7