如何获取 Bootstrap 表单以捕获信息以包含在电子邮件中

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>

我使用 bootstrap 4 创建了一个表单。当我点击提交时，它会提取电子邮件并将其发送到操作中给出的电子邮件，但不会捕获表单数据。我试过 enctype="text/plain" 和 using method="GET" 和 method="POST".

我使用过类似的联系方式：

<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>

它会这样捕获表单数据：

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

并将其包含在电子邮件中。我希望这样做是为了尽可能避免使用 php。

Answer 1

看看这个：

<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>

您似乎忘记将 name 属性添加到您的 form-controls。也没有将 enctype="text/plain" 添加到表单中，并且在消息 <textarea>.

中出现了一些错误

此外，此代码是在 mdbootstrap 中编写的，它基于 bootstrap-5 而不是 bootstrap-4

如何获取 Bootstrap 表单以捕获信息以包含在电子邮件中

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

html

forms

email

mdbootstrap