Form submission using Bootstrap forms

December 28, 2021

I am trying to create a contact us section by using bootstrap forms which emails the inputted data using mailto.
But when I submit it, after entering some data, using the submit button Gmail pops up but nothing is entered in it. What should I do so that the data I enter in the form gets entered in the email?
this is the code

<form class="" action="mailto:exampl@gmail.com" method="post">

  <div class="mb-3">
    <label for="exampleFormControlInput1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="mb-3">
    <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

I had the targeted email written in action, I changed it to exampl@gmail.com just here.

>Solution :

You need to add the name attribute to each field, which will appear in the mail’s body. It’ll format itself as mail={your_message} and so on.

Your code becomes:

<form class="" action="mailto:exampl@gmail.com" method="post" enctype="text/plain">
    <div class="mb-3">
        <label for="exampleFormControlInput1" class="form-label">Email address</label>
        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com" name="email">
    </div>
    <div class="mb-3">
        <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="message"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

JSFiddle