javascript - 没有 wordpress 的联系表格 7 功能

Question

我有一个使用 Bootstrap 框架构建的网站。

我想在没有 wordpress 的情况下实现 contact form 7 功能。 Like this with radio buttons.我尝试将 php 邮件功能与 bootstrap 一起使用，但它不像发送带有数据的电子邮件那样工作。

Like this Bootstrap with php以下是代码

“HTML 从这里开始”

<div class="center"><br>
  <button type="button" class="preview btn btn-info btn-lg" data-toggle="modal" data-target="#requestInfo">Free Consultation!</button>
</div>
<!-- The Modal -->
<div id="requestInfo" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <div role="form">
      <form method="post" action="modal_form.php" novalidate="novalidate">
        <div class="modal-header">
          <div class="center">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Free Consultation!</h4>
          </div>
        </div>

        <div class="modal-body"><br>

          <div class="form-group">
            <input type="text" name="name" id="name" value="" size="40" aria-invalid="false" placeholder="Name with Designation*" required/>
          </div>
          <div class="form-group">
            <input type="text" name="companyname" id="companyname" value="" size="40" aria-invalid="false" placeholder="Company's Name" />
          </div>
          <div class="form-group">
            <input type="email" name="email" id="email" value="" size="40" aria-invalid="false" placeholder="Email*" required />
          </div>
          <div class="form-group">
            <input type="tel" name="mobile" id="mobile" value="" size="40" aria-invalid="false" placeholder="Mobile" />
          </div>
          <div class="form-group">
            <input type="tel" name="state" id="state" value="" size="40" aria-invalid="false" placeholder="Any prefered State in India." />
          </div>

          <p class="lead">Help us to know more about your requirements</p>
          <h4>1. Purpose of Company*</h4>
          <div class="left-align">
            <div class="radio ">
              <label><input type="radio" name="PurposeOfCompany" id="manufacturing" value="Manufacturing Setup">Manufacturing Setup</label>
            </div>
            <div class="radio">
              <label><input type="radio" name="PurposeOfCompany" id="sectors" value="Sectors">Sectors</label>
            </div>
            <div class="radio">
              <label><input type="radio" name="PurposeOfCompany" id="investment" value="Investment">Investment/Finance</label>
            </div>
            <div class="radio">
              <label><input type="radio" name="PurposeOfCompany" id="trading" value="Trading">Trading</label>
            </div>
            <div class="radio">
              <label><input type="radio" name="PurposeOfCompany" id="jv" value="JV">Joint Venture / Mergers and Acquisitions</label>
            </div>
            <div class="radio">
              <label><input type="radio" name="PurposeOfCompany" id="other" value="Other">Others</label>
            </div>
            <div class="form-group" id="other_purpose" style="display: none;">
              <input type="text" name="PurposeOfCompany_Other" id="specify" value="" size="40" aria-invalid="false" placeholder="Specify" />
            </div>

            <div class="form-group">
              <textarea class="form-control" rows="4" id="details" placeholder="Details:"></textarea>
            </div>
            <p>* Mandatory Fields</p>
          </div>
          <div class="modal-footer">
            <div class="center">
              <input class="btn btn-info btn-md" type="submit" value="Submit" />
              <button type="button close" class="btn btn-info btn-sm" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </form>

    </div>
  </div>
</div>

“HTML 在这里结束”

“CSS 从这里开始”

<style>
    /* The Modal (background) */
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        padding: 10px;
        border: 1px solid #888;
        width: 70%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }

    /* Add Animation */
    @-webkit-keyframes animatetop {
        from {top:-300px; opacity:0} 
        to {top:0; opacity:1}
    }

    @keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
    }

    /* The Close Button */
    .close {
        float: center;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    .modal-header {
        padding: 0px 5px 5px 0px;
        font-size: 25px;
        font-weight: bold;

    }

    .modal-footer {
        padding: 5px 0px 0px 0px;
        font-size: 25px;
        font-weight: bold;

    }

    .modal-body {padding: 20px 20px;}

    }   
</style>

“CSS 在这里结束”

“JS从这里开始”

<script>
    $(document).ready(function(){
        $('input[name=PurposeOfCompany]').change(function(){
            if($(this).val() === 'Other') {
                $('#other_purpose').show();
            } else {
                $('#other_purpose').hide();
            }
        });
    })
</script>

“JS到此结束”

“PHP 从这里开始”

<?php
  $name    = $_POST['name'];
  $cname    = $_POST['cname'];
  $email   = stripslashes($_POST['email']);
  $phone   = stripslashes($_POST['phone']);
  $purpose = $_POST['purpose'];
  $message = $_POST['message'];
  $form_message = "Name: $name \nCompany's Name: $cname \nEmail: $email \nPhone: $phone \nPurpose of Contact: $purpose \nMessage: $message";

  header( "Location: http://www.example.com");

  mail("freeconsultancy@example.com", "Free Consultancy Message!", $form_message, "From: $email" );

?>

“PHP 到此结束”

当我点击提交按钮时，php 函数不发送数据。

Answer 1

不要使用 PHP 邮件功能。使用 PHPMailer .