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

Question

Currently, our form is saving data in database on form submission but now we want (for example: to send email to email@example.com) as well. Below is the code but we are not sure, which script and where exactly we need to add.

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

We want to send emails while form submission as its saving data in database only.

Answer 1

You should add code for email sending right where you handling a form data and saving it to database. To send emails you'll need a properly configured server environment. It's a big topic and you haven't provided any information about your server OS. Anyway, you can just try

sudo apt-get install mailutils

on your server. I am just assuming you're running Ubuntu. Then you'll have to use Swiftmailer package and configure it to use, for example, google's smtp. Lastly, you'll need to set-up a google account to use for sending e-mails and configure it with correct permissions to use in your app. Like I said, it's a big topic, a lot of things must be done to achieve what you want, and your question is very general and unclear. Alternatively, you can look at things like mailgun for simplicity.

Answer 2

For this you will need a mailing system. On www.packagist.org you can find a lot of very good working composer installing projects.

For example: https://packagist.org/packages/swiftmailer/swiftmailer

Please read the documentation on how to install and use them.

Composer can be found here incase you are not using it yet: https://getcomposer.org/

To send an email:

The mailing system is basically being called near the moment you save your data into the database.