ホームページに簡単メールフォームを自作する(HTML+PHP)

アイフォン

ワードプレスならばプラグインを使えば簡単に設置できるメールフォームですが、ホームページに設置するとなるとレンタルか、Googleなどのツールか自作ですね。

ということで覚書きの自作サンプル。コピペOKですが動作の責任は取れません。あしからず。

目次

ホームページに設置する自作メールフォーム・サンプル

本当にただの覚え書きなので。デザインなどはCSSで調整を。

HTMLコード

「contact」フォルダを作成。

以下のコードをindex.htmlとしてフォルダ内にUPします。

 

       
<form action="confirm.php" method="post">
<form class="form1 mt-5">
<div class="form-group">
<label for="formName">お名前</label><span class="require">(必須)</span>
<p><input name="name" type="text"></p>
</div>
<div class="form-group">
<label for="formEmail1">メールアドレス</label>
<p><input type="email" name="mail" autocomplete="email"></p>
</div>
<div class="form-group">
<label for="formContent">お問い合わせ内容</label>
<p><textarea name="detail" textarea class="form-control" id="formContent" rows="5"></textarea></p>
</div>
<p class="align-center"><button type="submit" class="is-style-btn_normal btn-warning">送信</button></p>
</form>

PHPコード

以下のコードをconfirm.phpとして「contact」フォルダ内にUP。入力画面を作ります。

<?php
/*----- 入力フォーム -----*/

  session_start();
 
  $key = md5(time()."任意の文字");
 
  $_SESSION['key'] = $key;
?>

<?php
mb_language("japanese");
mb_internal_encoding("utf-8");
//入力漏れがないか確認する  
if(!empty($_POST['mail']) && !empty($_POST['name']) && !empty($_POST['detail'])){
    $name=$_POST['name'];
    $mail=$_POST['mail'];
    $detail = $_POST['detail'];
    $detailDisp=nl2br($_POST['detail']);  
    $success = true;
}
?>
  
<?php if($success){//確認画面 ?>
<form action="submit.php" method="post">
<input name="company_name" type="hidden" value="<?php echo $company_name; ?>"></p>
    <p class="form_tit">お名前</p>
    <p><?php echo $name; ?><input name="name" type="hidden" value="<?php echo $name; ?>"></p>
    <p class="form_tit">メールアドレス</p>
    <p><?php echo $mail; ?><input type="hidden" name="mail" value="<?php echo $mail; ?>"></p>
    <p class="form_tit">お問い合わせ内容</p>
    <p><?php echo $detailDisp; ?><input type="hidden" name="detail" value="<?php echo $detail; ?>"></p>
    <p class="align-center"><input name="submit" type="submit" value="送信"></p>
  <p class="align-center"><a href="index.html">戻る</a></p>
</form>
<?php }else{//不備 ?>
             <p>申し訳ございません、入力内容に不備があります。<br>
                    前ページに戻って入力してください。</p>
                    <p class="align-center"><a href="index.html">戻る</a></p>
<?php } ?>

以下のコードをsubmit.phpとしてフォルダ内にUP。送信完了画面を作ります。

 

<?php
/*----- 完了画面 -----*/

  session_start();
  
  $msg = "";
 
      if (  isset($_SESSION['key']) &&
      isset($_POST['key']) &&
      $_SESSION['key'] == $_POST['key']) {

      }
unset($_SESSION['key']);
?>

<?php
mb_language("japanese");
mb_internal_encoding("utf-8");
 
if(!empty($_POST['mail']) && !empty($_POST['name']) && !empty($_POST['detail'])){
$name=$_POST['name'];
$mail=$_POST['mail'];
$detail=htmlspecialchars($_POST['detail']);

$success=mb_send_mail("あなたの@アドレス","「あなたのホームページ名」からのお問い合わせ","\n名前:".$name."\nメールアドレス:".$mail."\nお問い合わせ内容\n".$detail,"from:".$mail);
}
?>
<?php
if($success){//送信完了 ?>
<p>お問い合わせありがとうございます。</p>
 <p class="align-center"><a href="トップページURL">TOPに戻る</a></p>
<?php }else{//送信失敗 ?>
<p>大変申し訳ございません。お問い合わせの送信に失敗しました。</p>
<? } ?>
文字コードは必ずUTF-8で保存。

お名前とアドレスと用件だけのシンプルなフォームです。

自作メールフォーム

エックスサーバーの提供CGI

この記事を書いている最中に気づいたのですが、エックスサーバーさんでメールフォームを提供してくださっているのですね。

自作が面倒だったら、こういうものを使ってみるのもいいかも。

あわせて読みたい
?᡼??ե????????ּ?? | ??󥿥륵???С??ʤ饨?å????????С? ??󥿥륵???С??֥??å????????С??פΤ????ѥޥ˥奢??ä??䤤??碌?ե?????ʤɤ????Ѳ?ǽ?ʡ֥᡼??ե?????פ????֤?????Ǥ??????å????????С??Ǥϴ????ġ??뤫???󥯥?å??ǥ᡼??ե?????????֤??뤳?Ȥ???ǽ?Ǥ???
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

profile

主にWordpress中心のサイト・ブログ制作&コーダー、カスタマイザー。

2000年からHP制作を始めました。

ハウツーサイトやキュレーションサイトのライター、ブログ作成・運営のお手伝いなどをしております。

お仕事で関わった無料ブログ&Wordpressカスタマイズ案件実績500件以上。

携わったワードプレステーマ30以上。

アナリティクスを観察するのは生活の一部。

Google Analytics個人認定資格取得(GA4)。 SEOマーケティングアドバイザー資格取得。

SEOに特化したページ作りをめざしています。

 

カスタマイズのご依頼は「一木堂」へ

follow us in feedly 映画@見取り八段 | 映画感想ブログ coconara ss

サポートよろしくお願いします

いつもありがとうございます。

この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。

Amazonギフト券- Eメールタイプ - Amazonベーシック
金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は 「ageru15@gmail.com」です。
※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。

a
よろしくお願いいたします。

なお、この投げ銭システムに関する記事はこちら→『ブログに「投げ銭」システムをつける方法を考えてみたまとめ』

コメント

コメントする

目次