1. ホーム
  2. 質問と答え
  3. このフォームでの情報の送信方法

このフォームでの情報の送信方法

2016-03-28 12 views
-1

クライアントが私に連絡できるように私のウェブサイト用にこのブートストラップフォームを作成しました。私は電子メールアドレスにフォームを送信するためにPHPを使用しています。フォームは自分のメールアドレスに送信されますが、受信したときにフォームのテキストフィールドに入力された情報は表示されません。このフォームでの情報の送信方法

ご迷惑をおかけして申し訳ございません。これは、次のと、 "それはあったようは、チェーンを壊す" でドット/ CONCATENATEが欠落し、タイプミスだったにもかかわらず

<?PHP 
 
\t 
 
\t 
 
\t 
 
\t /* Subject & Email Variables */ 
 
\t 
 
\t $emailSubject = 'Photography Quote'; 
 
\t $webMaster = '[email protected]'; 
 
\t 
 
\t /* Gathering Data Variables*/ 
 
\t 
 
\t $firstname = $_POST['firstname']; 
 
\t $lastname = $_POST['lastname']; 
 
\t $email = $_POST['email']; 
 
\t $hdyhau = $_POST['hdyhau']; 
 
\t $message = $_POST['message']; 
 
\t 
 
\t $body = <<<EOD 
 
<br><hr><br> 
 
First Name: $firstname <br> 
 
Last Name: $lastname <br> 
 
Email: $email <br> 
 
How Did You Hear About Us?: $hdyhau <br> 
 
Message: $message <br> 
 
EOD; 
 

 
\t $headers = "From: $email\r\n"; 
 
\t $headers .= "Content-type: text/html\r\n"; 
 
\t $headers = mail($webMaster, $emailSubject, $body, $headers); 
 
\t 
 
\t /* Results Rendered As HTML */ 
 
\t 
 
\t $theResults = <<<EOD 
 
<html> 
 
<head> 
 
<title>Contact Us</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" type="text/css" href="Contact.css"> 
 
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'> 
 
<style type="text/css"> 
 
\t 
 
\t /*logo*/ 
 

 
img{ 
 
\t display: block; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t 
 
} 
 

 
/*navbar*/ 
 

 
#wrap{ 
 
\t text-align: center; 
 
\t font-family: "Lora" serif; 
 
\t font-size: 13px; 
 
\t font-weight: normal; 
 
\t padding-right: 48px; 
 
\t padding-bottom: 40px; 
 
\t 
 
} 
 

 
.navbar li a{ 
 
\t display: block; 
 
} 
 

 
.navbar li{ 
 
\t display: inline-block; 
 
\t list-style: none; 
 
\t text-align: left; 
 
\t 
 
} 
 

 
.navbar a{ 
 
\t text-decoration: none; 
 
\t color: #9c9c9c; 
 
\t display: block; 
 
\t padding: 8px; 
 
\t background-color: white; 
 
} 
 

 
.navbar li ul{ 
 
\t position: absolute; 
 
\t display: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t height: auto; 
 
\t 
 
} 
 

 
.navbar li:hover, a:hover{ 
 
\t color: black; 
 
} 
 

 
.navbar li:hover ul{ 
 
\t display: block; 
 
} \t 
 

 
.navbar li ul li { 
 
\t display: block; 
 
} 
 

 
h1{ 
 
\t text-align: center; 
 
\t font-family: 'Lora' serif; 
 
\t font-size: 25px; 
 
\t padding-bottom: 30px; 
 
} 
 

 
input[type=button]{ 
 
\t border: 2px solid #9c9c9c; 
 
\t background-color: white; 
 
\t color: #9c9c9c; \t 
 
\t display: block; 
 
\t padding: 10px; 
 
\t width: 100px; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
} 
 

 
input[type=button]:hover{ 
 
\t background-color: #9c9c9c; 
 
\t color: white; 
 
\t border: 2px #9c9c9c; 
 
\t padding: 10px; 
 
\t height: 41px; 
 
} 
 

 

 
/*footer*/ 
 

 
footer{ 
 
\t text-align: center; 
 
\t font-family: "Lora" serif; 
 
\t font-size: 10px; 
 
\t font-weight: normal; 
 
\t padding-top: 30px; 
 
} 
 

 
\t 
 
    </style> 
 
</head> 
 
<body> 
 
\t  <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-sm-12 col-md-12"> 
 
\t    
 
\t    <img src="Images/NewLogoBlack.png" class="img-responsive" width="250px" height="250px"> 
 
\t   
 
\t   </div> 
 
\t   <div class="clearfix visible-sm-block"></div> 
 
     <div class="clearfix visible-md-block"></div> 
 
     <div class="clearfix visible-lg-block"></div> 
 
\t   
 
\t   
 
      <div class="col-sm-12 col-md-12"> 
 

 
\t \t \t <div id="wrap"> 
 
\t \t \t <ul class="navbar"> 
 
\t 
 
\t \t <li><a href="index.html">HOME</a></li> 
 
\t \t <li><a href="">PORTFOLIO</a> 
 
\t \t \t <ul> 
 
\t \t \t <li><a href="wedding.html">WEDDING</a></li> 
 
\t \t \t <li><a href="Love.html">LOVE</a></li> 
 
\t \t \t  
 
\t \t \t </ul>   
 
\t \t </li> 
 
\t \t <li><a href="#">ABOUT</a> 
 
\t \t \t <ul> 
 
\t \t \t <li><a href="AboutUs.html">US</a></li> 
 
\t \t \t </ul>   
 
\t \t </li> 
 
\t \t <li><a href="#">BLOG</a> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="NewBlogPage3.html">STORIES</a></li> 
 
\t \t \t \t <li><a href="Archive.html">ARCHIVE</a></li> 
 
\t \t \t </ul> 
 
\t \t </li> \t \t \t \t 
 
\t \t <li><a href="Contact.html">CONTACT</a></li> 
 
\t </ul> \t \t \t 
 
    \t </div> \t \t \t 
 

 
\t    
 
</div> 
 
<div class="clearfix visible-sm-block"></div> 
 
<div class="clearfix visible-md-block"></div> 
 
<div class="clearfix visible-lg-block"></div> 
 
     
 
     
 
     
 
<div class="col-sm-12 col-md-12"> 
 
\t   
 
<h1>Thank you for your inquiry. We'll be in contact shortly.</h1> 
 
\t   
 
</div> 
 
<div class="clearfix visible-sm-block"></div> 
 
<div class="clearfix visible-md-block"></div> 
 
<div class="clearfix visible-lg-block"></div> 
 
     
 
<form action="Instagram.html"> 
 
<input type="button" value="HOME"> 
 
</form> \t 
 

 

 
<div class="clearfix visible-sm-block"></div> 
 
<div class="clearfix visible-md-block"></div> 
 
<div class="clearfix visible-lg-block"></div> 
 
      
 
\t 
 
\t   
 
     
 
     
 
<div class="col-sm-12 col-md-12"><footer>All images Copyright © Seaward Photography 2016. Based in San Diego, California. Available for destinations worldwide.</footer></div> 
 
<div class="clearfix visible-sm-block"></div> 
 
<div class="clearfix visible-md-block"></div> 
 
<div class="clearfix visible-lg-block"></div> 
 

 
      
 

 

 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
 
</body> 
 
</html> 
 
EOD; 
 
echo($theResults); 
 

 

 
      \t \t 
 

 
?>
/*logo*/ 
 

 
img{ 
 
\t display: block; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t 
 
} 
 

 
/*navbar*/ 
 

 
#wrap{ 
 
\t text-align: center; 
 
\t font-family: "Lora" serif; 
 
\t font-size: 13px; 
 
\t font-weight: normal; 
 
\t padding-right: 48px; 
 
\t padding-bottom: 40px; 
 
\t 
 
} 
 

 
.navbar li a{ 
 
\t display: block; 
 
} 
 

 
.navbar li{ 
 
\t display: inline-block; 
 
\t list-style: none; 
 
\t text-align: left; 
 
\t 
 
} 
 

 
.navbar a{ 
 
\t text-decoration: none; 
 
\t color: #9c9c9c; 
 
\t display: block; 
 
\t padding: 8px; 
 
\t background-color: white; 
 
} 
 

 
.navbar li ul{ 
 
\t position: absolute; 
 
\t display: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t height: auto; 
 
\t 
 
} 
 

 
.navbar li:hover, a:hover{ 
 
\t color: black; 
 
} 
 

 
.navbar li:hover ul{ 
 
\t display: block; 
 
} \t 
 

 
.navbar li ul li { 
 
\t display: block; 
 
} 
 

 
/*image*/ 
 

 
.contact img{ 
 
\t width: 70%; 
 
} 
 

 

 
/* form */ 
 

 
.form label{ 
 
\t padding-top: 30px; 
 
\t padding-left: 400px; 
 
\t display: block; 
 
\t float: right; 
 
\t padding-right: 189px; 
 
\t font-family: "Lora" serif; 
 
\t font-size: 12px; 
 
\t 
 
} 
 

 

 
input, textarea{ 
 
\t font: 1em "Lora" sans-serif; 
 
\t width:300px; 
 
\t 
 
\t 
 
} 
 

 
textarea{ 
 
\t vertical-align: top; 
 
\t height: 5em; 
 
\t resize: vertical; 
 
\t 
 
} 
 

 
input[type=submit]{ 
 
\t border: 2px solid #9c9c9c; 
 
\t background-color: white; 
 
\t color: #9c9c9c; \t 
 
\t display: block; 
 
\t padding: 10px; 
 
\t width: 100px; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
} 
 

 
input[type=submit]:hover{ 
 
\t background-color: #9c9c9c; 
 
\t color: white; 
 
\t border: 2px #9c9c9c; 
 
\t padding: 10px; 
 
\t height: 44px; 
 
} 
 

 

 
/*footer*/ 
 

 
footer{ 
 
\t text-align: center; 
 
\t font-family: "Lora" serif; 
 
\t font-size: 10px; 
 
\t font-weight: normal; 
 
\t padding-top: 10px; 
 
\t 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Contact Us</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" type="text/css" href="Contact.css"> 
 
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'> 
 
<style type="text/css"> 
 
\t 
 
\t img{ 
 
\t \t padding-bottom: 30px; 
 
\t } 
 
\t 
 
\t .contact-form{ 
 
\t \t padding: 20px; 
 
\t } 
 
\t 
 
\t label{ 
 
\t \t font-family: "Lora" serif; 
 
\t \t font-weight: 300; 
 
\t } 
 
\t 
 
    </style> 
 
</head> 
 
<body> 
 
\t  <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-sm-12 col-md-12"> 
 
\t    
 
\t    <img src="Images/NewLogoBlack.png" class="img-responsive" width="250px" height="250px"> 
 
\t   
 
\t   </div> 
 
\t   <div class="clearfix visible-sm-block"></div> 
 
     <div class="clearfix visible-md-block"></div> 
 
     <div class="clearfix visible-lg-block"></div> 
 
\t   
 
\t   
 
      <div class="col-sm-12 col-md-12"> 
 

 
\t \t \t <div id="wrap"> 
 
\t \t \t <ul class="navbar"> 
 
\t 
 
\t \t <li><a href="index.html">HOME</a></li> 
 
\t \t <li><a href="">PORTFOLIO</a> 
 
\t \t \t <ul> 
 
\t \t \t <li><a href="wedding.html">WEDDING</a></li> 
 
\t \t \t <li><a href="Love.html">LOVE</a></li> 
 
\t \t \t  
 
\t \t \t </ul>   
 
\t \t </li> 
 
\t \t <li><a href="#">ABOUT</a> 
 
\t \t \t <ul> 
 
\t \t \t <li><a href="AboutUs.html">US</a></li> 
 
\t \t \t </ul>   
 
\t \t </li> 
 
\t \t <li><a href="#">BLOG</a> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="NewBlogPage3.html">STORIES</a></li> 
 
\t \t \t \t <li><a href="Archive.html">ARCHIVE</a></li> 
 
\t \t \t </ul> 
 
\t \t </li> \t \t \t \t 
 
\t \t <li><a href="Contact.html">CONTACT</a></li> 
 
\t </ul> \t \t \t 
 
    \t </div> \t \t \t 
 

 
\t    
 
      </div> 
 
      <div class="clearfix visible-sm-block"></div> 
 
     <div class="clearfix visible-md-block"></div> 
 
     <div class="clearfix visible-lg-block"></div> 
 
\t 
 
\t <div class="col-sm-12 col-md-12"> 
 
\t   <div class="img-list">  
 
\t    
 
\t   
 
    
 
     <img src="Images/ContactImage.jpg" class="img-responsive" width="750px" height="auto" /> 
 
      
 
     
 

 
\t   </div>  
 
      </div> 
 
      <div class="clearfix visible-sm-block"></div> 
 
      <div class="clearfix visible-md-block"></div> 
 
     <div class="clearfix visible-lg-block"></div> \t 
 
     
 
     
 
     \t   
 
\t  <form method="post" action="Contact%20Form.php" > 
 
    <div class="contact-form"> 
 
    
 
      
 
\t  <div class="row"> 
 
\t \t <div class="col-md-6 ">  
 
     <div class="form-group"> 
 
      <label for="firstname">First Name</label> 
 
      <input type="text" class="form-control" name="firstname"> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-6"> 
 
     <div class="form-group"> 
 
      <label for="lastname">Last Name</label> 
 
      <input type="text" class="form-control" name="lastname"> 
 
     </div> 
 
     </div> 
 
     <div class="clearfix visible-md-block"></div> 
 
     <div class="col-md-12"> 
 
     <div class="form-group"> 
 
      <label for="email">Email</label> 
 
      <input type="email" class="form-control" name="email"> 
 
     </div> 
 
     <div class="clearfix visible-md-block"></div> 
 
     <div class="form-group"> 
 
      <label for="hdyhau">How Did You Hear About Us?</label> 
 
      <input type="text" class="form-control" name="hdyhau"> 
 
     </div> 
 
     <div class="form-group"> 
 
\t   <label for="message">Message</label> 
 
      <textarea class="form-control" rows="4" name="message"></textarea> 
 
      </div> \t \t 
 

 

 
     <div class="form-group"> 
 
     <div class="col-sm-8 col-sm-offset-2"> 
 
      <input id="submit" name="submit" type="submit" value="SEND!" class="btn btn-primary"> 
 
     </div> 
 
    </div> 
 
\t  </div> 
 
    </form> 
 

 
\t 
 
\t 
 
      <div class="col-sm-12 col-md-12"><footer>All images Copyright © Seaward Photography 2016. Based in San Diego, California. Available for destinations worldwide.</footer></div> 
 
      <div class="clearfix visible-sm-block"></div> 
 
      <div class="clearfix visible-md-block"></div> 
 
     <div class="clearfix visible-lg-block"></div> 
 

 
      
 

 

 

 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
 
</body> 
 
</html>

出典

2016-03-28 R.Seaward

+0

それは '$ヘッダ=タイプミスですmail（$ webMaster、$ emailSubject、$ body、$ headers）; 'ここには何が欠けているのか気づいてください。うん。ドットと "チェーンリンク"が壊れました。タイプミスは*トピック外です*。ここで '$ headers。= mail ...' - * Enjoy * –

+0

@ Fred-ii- Thank YOOOOOUUUU !!!それは今完璧に動作します。 –

+0

よろしくお願いします。 –

答えて

2

：

$headers = "From: $email\r\n"; 
$headers .= "Content-type: text/html\r\n"; 
$headers = mail($webMaster, $emailSubject, $body, $headers); 
     ^Missing a dot/concatenate and is "broken"

いるはず読み取られた：

$headers .= mail($webMaster, $emailSubject, $body, $headers);

空のメールを受信するリスクがあるので、空のフィールドを確認する必要があります。ボタンもクリックされた提出した場合

たとえばと、ユーザーがJSを無効にする必要があります使用するのが最善であるサーバーサイド方式であること、次はその小切手を行います

if(isset($_POST['submit'])){ 

    if(!empty($_POST['firstname']) 
    && !empty($_POST['lastname']) 
    && !empty($_POST['email']) 
    && !empty($_POST['hdyhau']) 
    && !empty($_POST['message'])) 

    { 

    // Send the mail here 

    } 

}

あなたも可能性入力に（HTML5）required属性を使用します。

すなわち：

<input type="text" class="form-control" name="firstname" required>

はまた、JSの方法については、以下に見る：

出典

2016-03-28 20:17:47

 関連する問題

  • 関連する問題はありません^_^