How To Get A Bootstrap Form To Capture Information To Include In An Email

Question

<div class="card-body">
  <form action="mailto:example@gmail.com" method="GET">
    <!-- Header -->
    <div class="form-header bg-secondary">
      <h3 class="mt-2"><i class="fa fa-envelope"></i> Let's Conect:</h3>
    </div>
    <!-- Body -->
    <div class="md-form"> <i class="fa fa-user-circle-o prefix grey-text"></i>
      <input type="text" id="form-name" placeholder="Your Name" class="form-control">
      <label for="form-name"></label>
    </div>
    <div class="md-form"> <i class="fa fa-envelope prefix grey-text"></i>
      <input type="text" id="form-email" placeholder="Your Email" class=" form-control">
      <label for="form-email"></label>
    </div>
    <div class="md-form"> <i class="fa fa-tag prefix grey-text"></i>
      <input type="text" id="form-Subject" placeholder="A Subject" class=" form-control">
      <label for="form-Subject"></label>
    </div>
    <div class="md-form"> <i class="fa fa-pencil prefix grey-text"></i>
      <textarea id="form-text" placeholder="What would you like to talk about!?" placeholder="class=" form-control md-textarea " rows="3 "></textarea>
        <label for="form-text "></label>
    </div>
    <div class="text-center ">
        <button type="submit " class="btn btn-secondary ">Submit</button>
    </div>
</form>
</div>

I've created a form using bootstrap 4. When I click submit it will pull up the email and send it to the email given in the action but does not capture and of the form data. I've tried enctype="text/plain" and using method="GET" and method="POST".

I've used a contact form im a similar fashion likes this:

<form id="contact-form" action="mailto:test@gmail.com" method="POST" enctype="text/plain">
    <label for="name">Name</label>
    <input type="text" id="name" name="Name" placeholder="Name" required="required">

    <label for="email">Email</label>
    <input type="email" id="email" name="E-Mail" placeholder="Email@gmail.com" required="required">

    <label for="subject">Subject</label>
    <input type="text" id="subject" name="Subject" required="required"></input>

    <label for="message">Message</label>
    <textarea id="message" name="Message" required="required"></textarea>

    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

It would capture the form data as such:

Name=NAME
E-Mail=EMAIL@EMAIL.com
Subject=SUBJECT
Message=MESSAGE

and include it in the email. I'm looking to do this to avoid having to use a php if at all possible.

Answer 1

Check this out:

<div class="card-body">
    <form action="mailto:example@gmail.com" method="get" enctype="text/plain">
        <!-- Header -->
        <div class="form-header bg-secondary">
            <h3 class="mt-2"><i class="fa fa-envelope"></i> Let's Conect:</h3>
        </div>
        
        <!-- Body -->
        <div class="md-form"> <i class="fa fa-tag prefix grey-text"></i>
            <input type="text" id="form-Subject" name="subject" placeholder="A Subject" class="form-control" required/>
            <label for="form-Subject"></label>
        </div>
        <div class="md-form"> <i class="fa fa-pencil prefix grey-text"></i>
            <textarea id="form-text" name="body" placeholder="What would you like to talk about!?"
            class="form-control md-textarea " rows="15" style="overflow-y: scroll;"></textarea>
            <label for="form-text"></label>
        </div>
        <div class="text-center">
            <input type="submit" name="submit" value="Submit" class="btn btn-secondary"/>
        </div>
    </form>
</div>

Seems you forget to add name attribute to your form-controls. Also haven't added enctype="text/plain" to the form and did some error in the message <textarea>.

Also this code is written in mdbootstrap which is based on bootstrap-5 not bootstrap-4