「How to create a built-in contact form for your WordPress theme」
テーマにコンタクトフォームをビルトインさせる方法を試してみました。
結果としては、アウトルックエクスプレスで受信すると、日本語は文字化けしますが、Gmailでは問題なく受信できます。
環境で変わるかもしれませんが。
なので、ブログの一般設定の管理者メールアドレスにGmailを使う
流れ
ステップ1
ページテンプレートの作成
ステップ2
テーマフォルダに js フォルダを作りjsファイルを追加
ステップ3
header.phpにスクリプトのタグを追加
ステップ1 ページテンプレートの作成
ソースサイトのコードをちょいといじってます。日本語で表示させるので文字コードはUTF-8に
次のコードを入れ、contact.phpとでも名前をつけてテーマフォルダにアップロードします。
サンプル
<?php
/*
Template Name: Contact
*/
?>
<?php
if(isset($_POST['submitted'])) {
if(trim($_POST['contactName']) === '') {
$nameError = '※,名前が入力されてません';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}
if(trim($_POST['email']) === '') {
$emailError = '※,メールアドレスが入力されてません';
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$emailError = 'You entered an invalid email address.';
$hasError = true;
} else {
$email = trim($_POST['email']);
}
if(trim($_POST['title']) === '') {
$titleError = '※,タイトルが入力されてません';
$hasError = true;
} else {
$title = trim($_POST['title']);
}
if(trim($_POST['comments']) === '') {
$commentError = '※,メッセージが入力されてません';
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}
if(!isset($hasError)) {
$emailTo = get_option('tz_email');
if (!isset($emailTo) || ($emailTo == '') ){
$emailTo = get_option('admin_email');
}
$subject = '[ブログ名] '.$title;
$body = "件名: $title 名前: $name \n\nEmail: $email \n\nメッセージ: $comments";
$headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}
} ?>
<?php get_header(); ?>
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="entry">
<?php if(isset($emailSent) && $emailSent == true) { ?>
<div class="thanks">
<p>有難う御座います, メールは送信されました。</p>
</div>
<?php } else { ?>
<?php the_content(); ?>
<?php if(isset($hasError) || isset($captchaError)) { ?>
<p class="error">エラー, 入力ミスがあります。<p>
<?php } ?>
<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
<dl class="contactform">
<dt>名前:
<?php if($nameError != '') { ?>
<?=$nameError;?>
<?php } ?>
</dt>
<dd>
<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="required requiredField" />
</dd>
<dt>Email
<?php if($emailError != '') { ?>
<?=$emailError;?>
<?php } ?>
</dt>
<dd>
<input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="required requiredField email" />
</dd>
<dt>件名:
<?php if($titleError != '') { ?>
<?=$titleError;?>
<?php } ?>
</dt>
<dd>
<input type="text" name="title" id="title" value="<?php if(isset($_POST['title'])) echo $_POST['title'];?>" class="required requiredField" />
</dd>
<dt>メッセージ:
<?php if($commentError != '') { ?>
<?=$commentError;?>
<?php } ?></dt>
<dd>
<textarea name="comments" id="commentsText" rows="20" cols="30" class="required requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
</dd>
<dt>
<input type="submit" name="Submit" value="送信" />
<input type="hidden" name="submitted" id="submitted" value="true" />
</dt>
<dd>
内容に間違いがなければ送信をクリックして下さい
</dd>
</dl>
</form>
<?php } ?>
</div>
</div>
<?php endwhile; endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
スタイルはテーマに合わせて下さい。
んで、簡単に修正した箇所を
ソースサイトのコードでは、「名前」「メールアドレス」「本文」の3つだけだったので、「件名」の項目を追加。
まずは、入力されてない項目にエラーメッセージを表示する箇所に「件名」の項目を追加。
追加場所は、メールと本文の間にでも
メールの部分
if(trim($_POST['email']) === ”) {
$emailError = ‘※,メールアド
省略
タイトルの部分
if(trim($_POST['title']) === ”) {
$titleError = ‘※,タイトルが入力されてません’;
$hasError = true;
} else {
$title = trim($_POST['title']);
}
本文の部分
if(trim($_POST['comments']) === ”) {
$commentError = ‘※,メッセ
省略
もし、年齢の部分などを追加したい場合は
if(trim($_POST['old']) === ”) {
$oldError = ‘※,年齢が入力されてません’;
$hasError = true;
} else {
$old = trim($_POST['old']);
}
こんな感じになる。
次に、メール送信後に届くメールの設定箇所で
メールの件名部分を”[ブログ名] 件名”にする。
$subject = ‘[ブログ名] ‘.$title;
デフォルトでは.$name; と、送信者名が表示されるのですが、件名があった方が見やすいかと思ったので
.$name; のままでもいいです。
んで、メール本文にも件名を表示
件名: $titleを追加するだけ
$body = “件名: $title 名前: $name \n\nEmail: $email \n\nメッセージ: $comments”;
年齢を追加する場合は”年齢: $old”を追加する
$body = “件名: $title 年齢: $old 名前: $name \n\nEmail: $email \n\nメッセージ: $comments”;
次に、フォーム部分にタイトルの項目を追加する。
追加する場所は、本文部分の上にでも
<dt>件名:
<?php if($titleError != '') { ?>
<?=$titleError;?>
<?php } ?>
</dt>
<dd>
<input type="text" name="title" id="title" value="<?php if(isset($_POST['title'])) echo $_POST['title'];?>" class="required requiredField" />
</dd>
“$titleError”は、ミキ乳児のエラーメッセージの部分
“title”は、追加項目のタイトルを示してます。
年齢の項目を追加した場合に”old”を割り当てたら、コード内もoldに変更する
“$oldError”
“old”
ステップ2 jsファイルの設置
使用中のテーマフォルダに”js”のディレクトリー(フォルダ)を作り、中に次のファイルを追加してテーマフォルダにアップロード
jquery.validate.min.js
verif.js
ステップ3 ヘッダーにコードを追加
header.php の head /headの間に次のコードを入れる。
“/head”の上にでも
<?php if( is_page('contact') ){ ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/verif.js"></script>
<?php }?>
あとは、作成したページテンプレートを使って”contact”のページスラッグでコンタクト用ページの作成。
質問は受け付けてません。