如何在表单提交时发送电子邮件,并在数据库中保存数据

时间:2017-12-06 10:51:26

标签: javascript php forms email

目前,我们的表单是在表单提交时将数据保存在数据库中,但现在我们想要(例如:发送电子邮件到email@example.com)。下面是代码,但我们不确定,哪个脚本以及我们需要添加的位置。

              <!-- Nav tabs -->
              <ul class="nav nav-tabs" role="tablist" id="myTabs">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Project Brief Form</a></li>
                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Contact Form</a></li>
              </ul>
              <!-- Tab panes -->
              <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">
                    <form  action="#" method="post" enctype="multipart/form-data" id="project">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label>Tell us about your project in your own words? What is, for you, the main goal of the project? *</label>
                                    <textarea class="form-control" rows="4" name="project" required></textarea>
                                </div>
                            </div>
                            <div class="col-sm-6">
                              <div class="form-group">
                                <label>Full name</label>
                                <input type="text" class="form-control" placeholder="Full name" name="name" required>
                              </div>
                              <div class="form-group">
                                <label>Email / Skypename</label>
                                <input type="text" class="form-control" placeholder="Email / Skypename" name="email" required>
                              </div>
                              <div class="form-group">
                                <label>Phone</label>
                                <input type="number" class="form-control" placeholder="Phone" name="phone" required>
                              </div>
                            </div>
                            <div class="col-sm-6">
                              <div class="form-group">
                                <label>How much do you want to spend?</label>
                                <select class="form-control" name="spend" required>
                                  <option value="500 - 3000 $">500 - 3000 $</option>
                                  <option value="3000 - 10000 $">3000 - 10000 $</option>
                                  <option value="10000 - 50000 $">10000 - 50000 $</option>
                                  <option value="50000 - 250000 $">50000 - 250000 $</option>
                                  <option value="250000 $ +">250000 $ +</option>
                                </select>
                              </div>
                              <div class="form-group">
                                <label>Which services are you interested in?</label>
                                <input type="text" class="form-control" placeholder="Which services are you interested in?" name="service" required>
                              </div>
                              <div class="form-group">
                                <label>How did you find out about us?</label>
                                <input type="text" class="form-control" placeholder="Example: Google, Facebook, Behance..." name="about" required>
                              </div>
                            </div>
                            <div class="col-sm-12 text-center">
                                <button type="submit" id="btnSubmit" onclick="SubmitForm('project','dubai','add_project')" class="btn btn-default">Submit</button>
                          </div>
                          <div id="result"></div>
                        </div>
                    </form>
                </div>
                <div role="tabpanel" class="tab-pane" id="profile">
                    <form  action="#" method="post" enctype="multipart/form-data" id="contact">
                        <div class="row">
                            <div class="col-sm-12">
                              <div class="form-group">
                                <label>Full name</label>
                                <input type="text" class="form-control" placeholder="Full name" name="name" required>
                              </div>
                              <div class="form-group">
                                <label>Email</label>
                                <input type="email" class="form-control" placeholder="Email" name="email" required>
                              </div>
                              <div class="form-group">
                                <label>Phone number</label>
                                <input type="number" class="form-control" placeholder="Phone number" name="phone" required>
                              </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label>Tell us about your project in your own words? What is, for you, the main goal of the project? *</label>
                                    <textarea class="form-control" onclick="SubmitForm('contact','skyhigh','add_contact')" rows="4" name="about"></textarea>
                                </div>
                            </div>
                            <div class="col-sm-12 text-center">
                                <button type="submit" class="btn btn-default">Submit</button>
                            </div>
                            <div id="massage"></div>
                        </div>
                    </form>
                </div>
              </div>
            </div>

            <script type="text/javascript">
                $('#myTabs a').click(function (e) {
                  e.preventDefault()
                  $(this).tab('show');
                });
            </script>
        </div>
    </div>
</div>

              <script type="text/javascript">
function SubmitForm(FormID, Controller, FunctionName) {
           $("#"+FormID).unbind('submit').submit(function (event) {
               var formData = $( this ).serialize();
               $.ajax({
                        type: 'POST', 
                        url: "<?php echo $this->config->base_url(); ?>" + Controller + "/"+ FunctionName,
                        data: formData
                    })
                    .done(function (data) {
                        if(FormID=="project")
                        {
                        // $("#"+ ResultDivId).html(data);
                          $('<center><div class="alert alert-success success-order"><h4>Your Data Send Successfully, We will Contact You Soon.</h4></div></center>').insertBefore('#result').delay(10000).fadeOut();
                        }
                        else
                        {
                          $('<center><div class="alert alert-success success-order"><h4>Your Data Send Successfully, We will Contact You Soon.</h4></div></center>').insertBefore('#massage').delay(10000).fadeOut();
                        }   
                    });

                    event.preventDefault();
                    $("#"+FormID)[0].reset();
                });
        }
</script>

我们希望在表单提交时将电子邮件作为其保存数据发送到数据库中。

2 个答案:

答案 0 :(得分:0)

您应该在处理表单数据并将其保存到数据库的位置添加电子邮件发送代码。 要发送电子邮件,您需要一个正确配置的服务器环境。这是一个很大的主题,您没有提供有关您的服务器操作系统的任何信息。无论如何,你可以尝试

sudo apt-get install mailutils

在您的服务器上。我只是假设你正在运行Ubuntu。然后你将不得不使用Swiftmailer包并将其配置为使用,例如google的smtp。 最后,您需要设置一个用于发送电子邮件的Google帐户,并使用正确的权限对其进行配置,以便在您的应用中使用。 就像我说的那样,这是一个很大的话题,为了实现你想要的东西必须做很多事情,你的问题非常普遍而且不清楚。 或者,您可以简单地查看mailgun等内容。

答案 1 :(得分:-1)

为此,您需要一个mailing系统。在www.packagist.org上,你可以找到许多非常好的作曲家安装项目。

例如: FileSync plugin for Eclipse

请阅读有关如何安装和使用它们的文档。

如果你还没有使用它,可以在这里找到作曲家:https://packagist.org/packages/swiftmailer/swiftmailer

发送电子邮件:

在您将数据保存到数据库的那一刻,邮件系统基本上被调用。