[サイト作り] [WordPress] コンタクトフォームをページテンプレートで

ページテンプレートを使って、コンタクトフォームを設置する。

コンタクトフォームのプラグインもあるのですが、勉強の為に備忘録

ソースサイト:英語サイト
How to make contact us /inquiry / guest book form page for wordpress default theme | Php Development

ソースサイトより、テンプレートファイル(contact_form.php)をダウンロードし、テーマディレクトリーにアップロード

コンタクトフォーム用の新規ページを作成し、”contact_form” を、ページテンプレートに選択して投稿。

ソースサイトからダウンロードしたファイルのままだと英語表記なので、自分のサイトに合った言語に修正する。

使用中のサーバーが自動で文字コードを変更しない場合は、ファイルを “UTF-8″ で保存する。

とりあえず、contact_form.phpのサンプルです。

<?php
/*
Template Name: contact_form
*/
?>
<?php get_header(); ?>

<div id="content">

<h2 class="title">お問い合わせフォーム</h2>

<?php
if(isset($_POST['Submit'])){ //check if user submitted the contact form
$error="";
if($_POST['contact_name']=='')$error.="Name required.<br/>";
if($_POST['contact_email']=='')$error.="Email required.<br/>";
if($_POST['contact_phone']=='')$error.="Phone required.<br/>";
if($_POST['contact_sex']=='')$error.="Sex required.<br/>";
if($_POST['contact_comment']=='')$error.="Comment required.<br/>";
if($error!=""){
//if any errors skip mailing and display the errors for users.
echo "$error";
}else{

// get admin email from wordpress default options
$to=get_option('admin_email');
$subject="受信メールの件名: ".$_POST['contact_reason'];
$body="\r\n こんにちわ、管理人さん";
$body.="\r\n 次の内容のメールが届いてます:";
$body.="\r\n 問い合わせ:\t".$_POST['contact_reason'];
$body.="\r\n お名前: \t".$_POST['contact_name'];
$body.="\r\n メールアドレス: \t".$_POST['contact_email'];
$body.="\r\n 電話番号:\t".$_POST['contact_phone'];
$body.="\r\n 性別:\t".$_POST['contact_sex'];
$body.="\r\n 本文: \r\n ".$_POST['contact_comment'];
// wordpress default handy mail function
wp_mail( $to, $subject, $body);
echo "ここにメール送信後にフォームに表示させるメッセージ";
// display success message.
}

}
?>
<form id="contact_form" name="contact_form" method="post" action="<?php echo the_permalink(); ?>">
<table border="0">
<tr>
<td>お問い合わせ </td>
<td><select name="contact_reason" id="contact_reason" style="width:145px;">
<option value="Product">製品について</option>
<option value="Service">サービスについて</option>
<option value="Other">その他</option>
</select>
</td>
</tr>
<tr>
<td>お名前</td>
<td><input name="contact_name" type="text" id="contact_name" style="width:145px" /></td>
</tr>
<tr>
<td>メールアドレス</td>
<td><input name="contact_email" type="text" id="contact_email" style="width:145px" /></td>
</tr>
<tr>
<td>電話番号</td>
<td><input name="contact_phone" type="text" id="contact_phone" style="width:145px" /></td>
</tr>
<tr>
<td>性別</td>
<td><input name="contact_sex" type="text" id="contact_sex" style="width:145px" /></td>
</tr>
<tr>
<td>本文</td>
<td><textarea name="contact_comment" id="contact_comment" style="width:300px"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Submit" value="送信" />
<input type="reset" name="Submit2" value="リセット" /></td>
</tr>
</table>
</form>

</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

スタイルは自分のテーマに合わせて下さい。

■ 項目の追加
フォームに項目を追加したい場合は、次のコードを変更して付け足す。

//check if user submitted the contact formより下の場所

if($_POST['contact_項目']=='')$error.="項目 required.<br/>";

例えば、性別を付け足す場合。

if($_POST['contact_sex']=='')$error.="Sex required.<br/>";

■ 追加項目の表示
次に、追加した項目をフォームに表示させる。

テーブルタグの場所に

<tr>
<td>性別</td>
<td><input name="contact_sex" type="text" id="contact_sex" style="width:145px" /></td>
</tr>

※セレクトやチェックボックスで表示させる方法はここでは省略します。「テーブルタグ チェックボックス」などで検索すると見つかります。

■ 追加項目を受信メール内に表示
最期に、受信メールに追加した項目を表示させるようにする。

// get admin email from wordpress default options より下の場所に、次のコードを付け足す。

$body.="\r\n 性別:\t".$_POST['contact_sex'];

以上です。

受信メールは、ブログに登録したadminのメールアドレスに届く。

[送信者]
WordPress

[件名]
上で設定したメッセージ

[本文]
こんにちわ、管理人
次の内容のメールが届いてます:
問い合わせ: 製品について
お名前: ハウスウエディング
メールアドレス: メアド
電話番号: 665-667
性別: ついてる(ノ∀`)
本文:
杏仁豆腐味のビスコを作ってください!

このようになる。

会社サイトであれば、電話番号などの項目があってもいいと思いますが、個人のブログじゃ必要ないので、必要な項目だけ残して要らない項目は削除したり

各部分を修正した、アンケート用のページテンプレートファイルを作ったり。

簡単な注文書ページを作ったり

応用すれば、色々と遊べそうです。

Spread on Twitter

関連してるかも

  • 2010年6月29日 -- [WordPress] カスタムポストを設置する
    投稿とは違った投稿を作成する。 通常の投稿と変わりは無いんですが、この投稿はカテゴリーを持たず、新着記事などにも表示されない投稿です。 作成したページテンプレートで公開したページ上に表示されますので、ブログに乗せるまでもない投稿(更新履歴)や、別テーマの投稿などを 参考 How to create a side blog with WordPress 3.0 テスト WP...
  • 2010年6月28日 -- [WordPress] Facebookのリンクを
    Facebookに投稿を送るボタンを追加するプラグイン「Add Post To Facebook」と同じ事を手動で 単一ページなどのボタンを表示させたい場所に テキストリンク ...
  • 2010年4月10日 -- [WordPress] ユーザープロフィールの項目を追加
    投稿者データをシングルページの本分の下に表示するプラグイン 「Simple Author Box」 こんな感じ 機能としては、ユーザープロフィールの連絡先の項目にTwitterとFacebookが追加され、AIM と Yahoo IM の項目が隠れます。 シングルページにはパブリックなアバターとプロフィールに入力してあるユーザーデータが表示される。 プラグインをアップ...
  • 2010年3月22日 -- [WordPress] author.phpに投稿者に応じて。 備忘録
    author.phpで、ユーザーに応じて表示を変更 author.phpの項目を表示させたいとこに ユーザーネーム"john"のauthorページにだけ表示 ユーザーネーム"bob"のauthorページにだけ表示 サイドバーを、投稿者別に single.phpの get_sidebar() のとこを ...
  • 2010年2月6日 -- [WordPress] 外部サイトの新着情報を表示させる
    他のサイトのフィードを登録して、登録したサイトの新着記事タイトル一覧を表示 複数ブログをやってる人は、メインブログのサイドバーにでも他のブログの新着情報を表示させるのもいいかも 参考: WordPress MUのトップページに、RSSフィードを取得して各ブログの新着記事を日付順にソートして表示する 関連記事 外部サイトのRSSフィードを取得して表示させてみる。 ※、IE6などの旧世代ブラウ...
  • 2009年12月6日 -- [WordPress] カテゴリーページにパンくずとサブカテゴリーリストと並び替えを
    カテゴリーページにパンくずとサブカテゴリーリストと並び替えを付けるハック こんな感じ articlesss.com category.phpを開き、div id=contentの下にでも ...
  • 2009年12月1日 -- [WordPress] id や class にカテゴリースラッグ
    body や div の id や class にカテゴリースラッグを付ける bodyに付ける ...
  • 2009年11月20日 -- [WordPress] カテゴリーアーカイブページテンプレート
    カテゴリーアーカイブのページテンプレート。 各カテゴリーの新着記事を表示したアーカイブページが作れます 参考WordPress How To: Latest Posts by Category Archive テーマディレクトリに category-archive.php を、作成して次のコードを記述しアップロード。 ※使用中のテーマに合わせて変更して下さい。 ...
  • 2009年11月10日 -- [WordPress] 新着/編集記事リスト
    新着記事以外に編集した記事もリストに表示。 参考:英語サイト Display Recently Updated Posts or Pages in Wordpress ...
  • 2009年11月1日 -- [WordPress] カテゴリーリストを2列にする。
    幅広なサイドバーやフッターにカテゴリーリストを表示する時に2列にすると見た目的に 参考:英語サイト 10 WordPress Hacks to Make your Life even Easier 「Breaking Categories into Columns」の部分 スタイルシートに .right {float:left; width:140px;} .le...