Loading…

記事内にプロモーションが含まれています。

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

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

記事上に人気記事表示

所要時間目安: 9

This session is using  IPv4  is established in

この記事は2016年2月16日のものです。現在は状況が異なる可能性がありますのでご注意ください。

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

以下です。
続、プラグインなしでコンタクトフォームを作成方法 | せきろぐ

よろしくお願いします。

Stinger6, Stinger7, WordPress, カスタマイズ, 備忘録」同じカテゴリーの記事一覧

あなたにおすすめ

抗がん剤オプジーボとは小林麻央さん

伝えたいこと 備忘録 時事ネタ 治療

がん免疫治療薬オプジーボについて、小林麻央さんは使ってみたのかなぁ。厚生労働省は16日50%の緊急値下げを提案し了承

昨今話題のがん治療薬の化学療法である抗がん剤でオプジーボ(商品名です:一般名はニボルマブ)ですが、 あまりにも高額だということで厚生労働省が異例に半額:50%値下げに承認を出しました。これまでは100…

もっと読む

インフィード広告アドセンス

キッチン水道蛇口ワンホールタイプ

カスタマイズ 伝えたいこと 備忘録

キッチンの蛇口交換費用がかかるので自分でする方法

えー、これまで5年と3ヶ月間キッチンのワンホールタイプの水道蛇口の高さが低いので、食器を洗う際や料理を作る時などには腰をかがまなければなりませんでした。ということは、腰に負担がかかっていました。 もち…

もっと読む

インフィード広告アドセンス

別のユーザーでPlugfree NETWORKが起動しています。

PC Windows10 伝えたいこと 備忘録 設定

別のユーザーでPlugfreeNETWORKが起動しています。解決方法

ここ数日の間ですが、タイトルのように「別のユーザーでPlugfree NETWORKが起動しています。」というポップアップ通知が表示されるようになりました。 このアプリケーションは、富士通製PCにイン…

もっと読む

インフィード広告アドセンス

所要時間表示閲覧時間表示

WordPress カスタマイズ 伝えたいこと 備忘録

記事の閲覧時間や所要時間の目安を表示する方法(今は需要ないかも…。)

以前は結構流行っていた「この記事は何分で読めます。」という閲覧所要時間表示と言うものがあります。 ユーザビリティの為に概ねの記事の文字数で「何分何秒」と表示させていたアレです。 しかし、最近ではそのナ…

もっと読む

インフィード広告アドセンス

2017年総選挙

伝えたいこと 備忘録 時事ネタ

JAPAN CHOICEで選挙前に候補者や経歴などを確認可能

来たる10月22日(日曜日)は、総選挙の投票日です。今回の解散の大義はなんだったのか様々な憶測が飛び交う中、もう投票日まであと今日を含めると4日しかありません。各党の政策や無所属候補の政策や自分の選挙…

もっと読む

インフィード広告アドセンス

メンテナンス 伝えたいこと 備忘録 時事ネタ

DAIHATSU全車販売停止。軽自動車のシェア33%国内外全ての車種が対象

以前のDENSO製の燃料ポンプのリコール情報に関しても、いまだに影響が拡大している中で今度は軽自動車の名門でもあるダイハツ工業(DAIHATSU)による実証実験不正?により全車種の国内のみならず国外へ…

もっと読む

おすすめの記事一部広告

お小遣い稼ぎにアンケート。

Multiplex 広告

おすすめ!!

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

おすすめ2

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

Googleニュース

2024-04-27

... 見逃せない! ホイールのブレーキ ... 独立後はカーオーディオ、クルマ、腕時計、モノ系 ... カーメーカー「旧」関連プロジェクトの全貌 ...

2024-04-27

近所の便利屋、修理屋、目指して頑張ってます!どんな些細な事でもご相談してください! お問い合わせはトータルリペア ヨッシー 吉川 智幸長野県長野市風間386 ...

2024-04-27

国土交通省の「事業用軽自動車の共同使用」(※2)についての通達を受け、この度新サービスをリリース。2023年3月にスタートした軽貨物メンテナンスパックサービス ...

2024-04-27

CBcloudは、自社が保有する車両を代として配送パートナーに一時的に提供することで、車検や修理時にも業務を継続できるよう支援する。 国交省は3月に、「貨物 ...

2024-04-26

趣味、修理・自動車整備については高橋巨樹におまかせ! 修理・自動車整備に関するご相談や困りごとなどを解決する高橋巨樹プロのコラムは必見。 今回の ...

Total392


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

目次に戻る

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

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

目次に戻る

目次に戻る


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

comment

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

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