Loading…

Stinger6 Stinger7 WordPress カスタマイズ 備忘録

WordPressプラグインなしでコンタクトフォームを作成方法

本日の人気記事BEST10

所要時間目安:9


Stinger6 Stinger7 WordPress カスタマイズ 備忘録

記事上に人気記事表示

コンタクトフォーム

 

当ブログにも、ページの欄・所にコンタクトフォームを設けていて、
emailでメール送信されるようにしています。

コンタクトフォームは、
俗に言う「お問い合わせ先」です。

今はSNSで匿名的なブログなどでも連絡手段があり得ることもありますが、
もし、何かあった場合にはやはり「お問い合わせ先」として、
コンタクトフォームがあった方が良いと思われます。

 

そのコンタクトフォームですが、

よく読まれている人気記事一覧

WordPressでは有名なプラグイン:Contact Form7というものがあります。

 

ですが、
jsやcssなどプラグインを導入すると意外とページ表示速度が遅くなってしまったりします。
(多くのプラグインを導入している場合は特に…。)

要は、
Contact Form7をインストールすると、

全ページでContact Form7のCSSとJavaScript が読み込まれてしまいます。

スポンサーリンク

アドセンス336pxPC閲覧記事下表示1つ目コード

そこで、
少しでもプラグインを使わずにできることはプラグインを使用しないでやっていこうと思いました。

 

目次に戻る


スポンサーリンク

プラグインなしでコンタクトフォームを作成するには、

 

Stinger6の場合ですと以下のコードをphpファイルとして新たに作成して、
テーマディレクトリ内にアップロードします。
(contact-form.php)必ずUTF-8形式です。

 

<?php
 /*
 Template Name: お問い合わせフォーム
 */
 ?>
 <?php
 if(isset($_POST['submitted'])) {

//項目チェック
 if(trim($_POST['checking']) !== '') {
 $captchaError = true;
 } else {

 //名前の入力なし
 if(trim($_POST['contactName']) === '') {
 $nameError = '名前が入力されていません';
 $hasError = true;
 } else {
 $name = trim($_POST['contactName']);
 }

 //メールアドレスの間違い
 if(trim($_POST['email']) === '') {
 $emailError = 'メールアドレスが入力されていません';
 $hasError = true;
 } else if (!preg_match('|^[0-9a-z_./?-]+@([0-9a-z-]+.)+[0-9a-z-]+$|', trim($_POST['email']))) {
 $emailError = 'メールアドレスが正しくありません';
 $hasError = true;
 } else {
 $email = trim($_POST['email']);
 }

 //お問い合わせ内容の入力なし
 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)) {
 mb_language("japanese");
 mb_internal_encoding("UTF-8");
 $emailTo = get_option('admin_email');
 $subject = 'お問い合わせ';
 $body = "お名前: $name nnメールアドレス: $email nnお問い合わせ内容: $comments";
 $title = get_bloginfo('name'); 
 $from = mb_encode_mimeheader(mb_convert_encoding("$titleのお問い合わせ","UTF-8"));
 $headers = 'From: '.$from.' <'.$emailTo.'>';
 mb_send_mail($emailTo, $subject, $body, $headers);
 //自動返信用
 $subject = 'お問い合わせ受付のお知らせ';
 $from = mb_encode_mimeheader(mb_convert_encoding("$title","UTF-8"));
 $headers = 'From: '.$from.' <'.$emailTo.'>';
 $body = "$name 様 nnお問い合わせありがとうございます。n改めて担当者よりご連絡をさせていただきます。nnお名前: $name nnメールアドレス: $email nnお問い合わせ内容: $comments";

mb_send_mail($email, $subject, $body, $headers);

$emailSent = true;

}
 }
 } ?>
 <?php get_header(); ?>
 <main>
 <?php if(isset($emailSent) && $emailSent == true) { ?>
 <h1 class="entry-title archive-title"><?=$name;?>様、お問い合わせありがとうございます。</h1>

メールを確認次第、返事をさせて頂きます。

<?php } else { ?>
 <?php if (have_posts()) : ?>
 <?php while (have_posts()) : the_post(); ?>
 <h1 class="entry-title archive-title"><?php the_title(); ?></h1>

<?php the_content(); ?>
 <form action="<?php the_permalink(); ?>" id="contactForm" method="post">
 <ol class="forms">
 <li><label for="contactName">お名前</label>
 <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" />
 <?php if($nameError != '') { ?>
 <span class="error"><?=$nameError;?></span>
 <?php } ?>
 </li>
 <li><label for="email">メールアドレス</label>
 <input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="requiredField email" />
 <?php if($emailError != '') { ?>
 <span class="error"><?=$emailError;?></span>
 <?php } ?>
 </li>
 <li class="textarea"><label for="commentsText">お問い合わせ内容</label>
 <textarea name="comments" id="commentsText" rows="20" cols="30" class="requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
 <?php if($commentError != '') { ?>
 <span class="error"><?=$commentError;?></span>
 <?php } ?>
 </li>
 <li class="buttons"><input type="hidden" name="submitted" id="submitted" value="true" /><button type="submit">送信する</button></li>
 </ol></form>

<?php endwhile; ?>
 <?php endif; ?>
 <?php } ?>
 </main>
 <?php get_sidebar(); ?>
 <?php get_footer(); ?>

 

そして、

固定ページの作成でテンプレート属性をお問い合わせフォームにします。

 

すると…。

なぜかエラー表示なってしまいました。^^;)

エラー表示内容を見ると、
なにやら1行目が云々とありました。
(すみませんスクリーンショット撮り忘れました。)

なので、
1行目にコメントアウトしてあるはずの
/*Template Name:お問い合わせフォーム*/という部分を削除します。

 

<?php
 if(isset($_POST['submitted'])) {

//項目チェック
 if(trim($_POST['checking']) !== '') {
 $captchaError = true;
 } else {

 //名前の入力なし
 if(trim($_POST['contactName']) === '') {
 $nameError = '名前が入力されていません';
 $hasError = true;
 } else {
 $name = trim($_POST['contactName']);
 }

 //メールアドレスの間違い
 if(trim($_POST['email']) === '') {
 $emailError = 'メールアドレスが入力されていません';
 $hasError = true;
 } else if (!preg_match('|^[0-9a-z_./?-]+@([0-9a-z-]+.)+[0-9a-z-]+$|', trim($_POST['email']))) {
 $emailError = 'メールアドレスが正しくありません';
 $hasError = true;
 } else {
 $email = trim($_POST['email']);
 }

 //お問い合わせ内容の入力なし
 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)) {
 mb_language("japanese");
 mb_internal_encoding("UTF-8");
 $emailTo = get_option('admin_email');
 $subject = 'お問い合わせ';
 $body = "お名前: $name nnメールアドレス: $email nnお問い合わせ内容: $comments";
 $title = get_bloginfo('name'); 
 $from = mb_encode_mimeheader(mb_convert_encoding("$titleのお問い合わせ","UTF-8"));
 $headers = 'From: '.$from.' <'.$emailTo.'>';
 mb_send_mail($emailTo, $subject, $body, $headers);
 //自動返信用
 $subject = 'お問い合わせ受付のお知らせ';
 $from = mb_encode_mimeheader(mb_convert_encoding("$title","UTF-8"));
 $headers = 'From: '.$from.' <'.$emailTo.'>';
 $body = "$name 様 nnお問い合わせありがとうございます。n改めて担当者よりご連絡をさせていただきます。nnお名前: $name nnメールアドレス: $email nnお問い合わせ内容: $comments";

mb_send_mail($email, $subject, $body, $headers);

$emailSent = true;

}
 }
 } ?>
 <?php get_header(); ?>
 <main>
 <?php if(isset($emailSent) && $emailSent == true) { ?>
 <h1 class="entry-title archive-title"><?=$name;?>様、お問い合わせありがとうございます。</h1>

メールを確認次第、返事をさせて頂きます。

<?php } else { ?>
 <?php if (have_posts()) : ?>
 <?php while (have_posts()) : the_post(); ?>
 <h1 class="entry-title archive-title"><?php the_title(); ?></h1>

<?php the_content(); ?>
 <form action="<?php the_permalink(); ?>" id="contactForm" method="post">
 <ol class="forms">
 <li><label for="contactName">お名前</label>
 <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" />
 <?php if($nameError != '') { ?>
 <span class="error"><?=$nameError;?></span>
 <?php } ?>
 </li>
 <li><label for="email">メールアドレス</label>
 <input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="requiredField email" />
 <?php if($emailError != '') { ?>
 <span class="error"><?=$emailError;?></span>
 <?php } ?>
 </li>
 <li class="textarea"><label for="commentsText">お問い合わせ内容</label>
 <textarea name="comments" id="commentsText" rows="20" cols="30" class="requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
 <?php if($commentError != '') { ?>
 <span class="error"><?=$commentError;?></span>
 <?php } ?>
 </li>
 <li class="buttons"><input type="hidden" name="submitted" id="submitted" value="true" /><button type="submit">送信する</button></li>
 </ol></form>

<?php endwhile; ?>
 <?php endif; ?>
 <?php } ?>
 </main>
 <?php get_sidebar(); ?>
 <?php get_footer(); ?>

 

そうすると、
固定ページを作成する際にテンプレート属性で「お問い合わせフォーム」と選択できた部分が、
選択不能になりますが、
ブログ上ではちゃんとしっかりとコンタクトフォームとして機能しています。
(お問い合わせ先とも言う…。)

なので、
まだまだ零細的な当ブログでは機能しているので問題ありません。

 

一応スタイルcssは以下です。(CSS)

 

/*コンタクトフォーム*/
 .forms {
 margin:16px
 }

.forms li {
 margin:16px;
 list-style:none
 }

.forms label {
 cursor:pointer;
 display:block;
 font-weight:800
 }

.forms input,.forms textarea {
 border:1px solid #7E8AA2;
 border-radius:8px;
 padding:8px;
 width:240px;
 font-size:100%
 }

.forms li .error {
 font-size:80%;
 color:red
 }

.forms li.textarea .error {
 display:block;
 position:absolute;
 right:0;
 top:0
 }

.forms li.buttons button {
 cursor:pointer;
 padding:8px
 }
 /*コンタクトフォーム*/

 

特にCSSは指定しなくても普通に機能します。

また、若干のバグなのか右サイドバーがカラム落ちしちゃってますが…。

気にしません。

何より機能するかしないかが一番重要です!!

以上、
プラグインなしでコンタクトフォーム(お問い合わせ先)を追加・作成する方法でした。

参考になれば幸いです。

 

スポンサーリンク

追記)2016年2月17日の記事で訂正版を修正して投稿しました。

 

お手数ですが、
固定ページでの属性の選択ができるように修正したphpコードをお試ししてみてください。m(__)m

以下です。
続、プラグインなしでコンタクトフォームを作成方法 | WordPressデビュー津々浦々

先日、 WordPressでプラグインを使わないでお問い合わせ(先)フォーム(コンタクトフォーム)の作成する方法を記載しました。 (プラグインなし)Word

よろしくお願いします。

Stinger6, Stinger7, WordPress, カスタマイズ, 備忘録」同じカテゴリ人気記事


アドセンス336pxPC閲覧記事下表示1つ目コード

おすすめの記事一部広告

関連記事

Amazonプライム会員アイキャッチ画像

インターネット 伝えたいこと 備忘録 時事ネタ

Amazonプライム会員になる10のメリットを紹介してみます。

Amazonプライムを見てみる 以前に「Amazon(アマゾン)で間違った商品の返品方法」というタイ…

もっと読む

Twitter10年

SNS Twitter インターネット 伝えたいこと 備忘録

Twitter過去記事ツイートって意味あるのかなぁ。SEOとかに良いの?

時折、というかよく見る?Twitterでの過去記事ツイート・・・。 もちろん、過去記事を拡散する意味…

もっと読む

仮歯が外れてしまった

伝えたいこと 備忘録 噛みあわせ 治療

仮歯が取れた!!そんな時どうしたら良いのか2つの方法

多くの方々はこれまでの人生において歯医者さんに行ったことがない人というのはほとんどいないと思います。…

もっと読む

マウス分解清掃前

PC メンテナンス 不具合 伝えたいこと 備忘録

マウスの左クリックや右クリックが効かないのでマウス分解して直す方法

マウスは今やパソコンなどにはなくてはならない入力装置です。入力機器。昔のキーボードのみでの操作には戻…

もっと読む

よろしかったらシェアよろしくお願いします。

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

-Stinger6, Stinger7, WordPress, カスタマイズ, 備忘録
-, , , ,



この記事が良かったら
いいね!お願いします(#^.^#)

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!



目次に戻る


コメントを閉じる
  1. […] WordPressプラグインなしでコンタクトフォームを作成方法 – WordPressデビュー津々浦々 […]

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください