如何获取引导表单以捕获要包含在电子邮件中的信息

问题描述

<div class="card-body">
  <form action="mailto:[e-mail]" 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>

我已经使用引导程序4创建了一个表单。当我单击“提交”时，它将拉出电子邮件并将其发送到操作中给定的电子邮件中，但不会捕获表单数据。我已经尝试过enctype="text/plain"和using method="GET"和method="POST"。

我使用了类似这样的联系方式：

<form id="contact-form" action="mailto:[e-mail]" 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="[e-mail]" 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=[e-mail]
Subject=SUBJECT
Message=MESSAGE

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

解决方法

检查一下：

<div class="card-body">
    <form action="mailto:[e-mail]" 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属性添加到窗体控件中。还没有将enctype="text/plain"添加到表单中，并且在消息<textarea>中发生了一些错误。

此代码也以mdbootstrap编写，该代码基于bootstrap-5而不是bootstrap-4