0
我有一個網站，它是使用bootstrap框架構建的。聯繫表7功能沒有wordpress
我想實現沒有wordpress的聯繫表格7功能。 Like this with radio buttons. 我試着用bootstrap使用php的郵件功能，它不像使用數據發送郵件那樣工作。
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">×</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("[email protected]", "Free Consultancy Message!", $form_message, "From: $email");
?>
「PHP到此爲止」
當我點擊提交按鈕PHP函數不發送數據。