[サイト作り] [WordPress] コンタクトフォームをテーマにビルトインな備忘録

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”のページスラッグでコンタクト用ページの作成。

質問は受け付けてません。

Did you like this? Share it:

PR

『行列のできる超人気洋菓子店のチョコ練り込み本格ケーキチョコ通もびっくり!チョコレートをた...』を見る [楽天]http://a.r10.to/hCFMgZ <

関連してるかも