問い合わせページ作成 for beginner

2021-05-05ブログ for ビギナー,WordPressブログデビュー,作成,作り方,ホームページ,ウェブサイト作成,webサイト,Contact Form7,問い合わせボタン,問い合わせページ作成,css装飾,webサイト作成,WordPress学習,WordPress模写,WordPress新規作成,WordPress,初心者向け

ビギナーさんのブログデビューのステップ6

問い合わせフォーム作成


【初心者向け】
ワードプレスでウェブサイト作成
親切丁寧にナビゲート♪

WordPress模写、新規作成のステップ6まで来ましたね!
もう少しで完成です。
サイトでよく見られる問い合わせフォームの作成です。
問い合わせページを作成する場合はこの項を参考になさってください。

snow

ユーザーさんからのメッセージやコメントは問い合わせフォームを設置しなくてもコメント欄から受け取れます。

問い合わせフォームが必要ない方は次回に進んでくださいね。
最終回!! です♬

問い合わせフォーム(固定ページ)の作成準備

企業のホームページやポートフォリオサイトなどでよく見られる問い合わせフォームです。

snow

通販サイトで商品についての質問などもしますね。

ポートフォリオサイト
問い合わせページ
You got a mail ♬

私 snow のポートフォリオサイトのお問い合わせページです。
ヘッダーの お問い合わせ ボタンをクリックするとこのページに遷移します。
ここで必要事項を入力して送信すると問い合わせメールが届きます。


Contact Form7 というプラグインを利用しています。
インストールして有効化します。

問い合わせページを新規作成する場合は固定ページなので、固定ページの新規追加をします。
タイトルやパーマリンク、カテゴリー、タグなどを入力します。

バディのクリス

固定ページの作り方だね!

トップページなど既存の固定ページや投稿記事に設定することもできます。
Contact Form7 のインストール、有効化と設置したいページが用意できれば準備完了です。

Contact Form7 基礎編

Contact Form7 を有効化するとダッシュボードのメニューバーに お問合せ (Contact Form7) が増えます。

固定ページ 新規追加画面

お問い合わせ  が Contact Form7 のメニューです。
新規追加を選びます。

フォームタブ

Contact Form7
フォームタブ

新規追加するとこのような画面になります。
タイトルには適宜わかりやすい名前を入力します。
(例:お問い合わせフォーム)

フォーム というタブが開いています。
ここに問合せ画面で入力してもらう項目を設定します。
特にこだわりがなければデフォルトでいいと思います。

次にメールタブを開きます。

メールタブ

オレンジ枠の内容が運営側(わたし)に届きます。
デフォルトで各項目が設定されています。

送信先はWordPressで利用しているメールアドレスが設定されています。
もし他のアドレスで受信したい場合はアドレスを入力します。
このままでいい場合は特に編集の必要はないと思います。

オレンジ枠の下に メール(2) という項目があります。ここにチェックを入れるとお問合せメールを受信した際に自動で折り返し送信者に受付メールを送ることができます。

バディのクリス

受け付けました。ってメールだね!

snow

お問合せありがとうございます。受付いたしました。
など書いてありますね。
通販で注文した際にも届きますね。

グリーン枠の内容が問い合わせを送信してくださった方に届きます。

メッセージ本文に「お問合せありがとうございます。下記のようなお問合せを受け付けました」などの文言を追加します。

送信者のメッセージ本文は[your-message]で表示されます。

メッセージ本文:[your-name]様 お問合せありがとうございます。
下記のお問合せを受付いたしました。
後ほどお返事を差し上げます。
しばらくお待ちくださいませ。

***********************
[your-message]
このメールは[site-title]([site-url])のお問合せフォームから送信されました

  • タイトルを入力
  • フォームタブを確認
  • メールタブを確認

ここまでチェックができたら 保存 をクリックします。

保存ができるとタイトル入力欄の下にショートコードが表示されます。
このショートコードをコピーします。

次に問い合わせフォームを設置したいページの編集画面(ブロックエディタ)を開きます。

ブロックエディタでショートコードを選択します。
ショートコード入力欄にコピーしたショートコードをペーストします。

バディのクリス

カンタンにお問い合わせフォームが作れるんだね🎵

シンプルな問い合わせフォームはこれで完成です。
項目を増やしたい場合や背景色や色の変更などCSS装飾をしたい場合のカスタマイズを応用編でご紹介します。

Contact Form7 応用編

項目の追加

デフォルトでは氏名、メールアドレス、タイトル、内容の4つの項目が用意されていました。
これにカナ氏名(フリガナ)を追加してみます。

Contact Form7
フォームタブ

フォームタブを開きます。
追加したい項目の場所に下記のコードを入力します。

<label>カナ氏名</label>

次にカーソルを </label>の直前に位置づけます。

カーソル位置を確認したらテキストボタンをクリックします。
これは1行の入力欄を作成するときに使います。

フォームタブ
テキスト追加
項目入力内容
項目タイプ入力必須の場合チェック
名前必要がなければこのままでOK
変更する場合は他と重複しない英数字
デフォルト値最初に表示しておきたい入力例
プレースホルダーとして使用にチェック
AkismetAkismet サービスを利用する場合チェック
ID 属性CSS装飾用(英数字、重複NG)(入力しなくてもOK)
クラス属性CSS装飾用(英数字、重複OK)(入力しなくてもOK)

必要項目を入力すると下部にショートコードが生成されています。
ショートコードを挿入 をクリックします。

氏名とメールアドレスの間にカナ氏名を追加することができました。

プレースホルダーは入力例を表示させます。

薄いグレーで表示している部分です。
項目入力欄でよく見かけますね。
同じように他の項目にもプレースホルダーを設定してもいいですね。

 placeholder "〇〇〇"

〇〇〇に表示したい内容を入力します。
" (ダブルクォーテーション)で囲むのを忘れないようにします。
プレースホルダーは実際入力する際には消去されます。

設定ができたらメールタブにします。

メールタブ

先ほど追加したカナ氏名を問い合わせメールに設定します。
カナ氏名なので氏名の後ろにカナ氏名の名前[text-648]を入力します。

カナ氏名の追加ができました。
また、デフォルトの題名をカットしました。
(必要なら残してくださいね)

<label>題名 [text* your-subject]</label>

他にも複数行の入力欄や電話番号、URL名などの項目やドロップダウンメニューやチェックボックスなども設定できます。
こちらのサイトで丁寧に説明してくださっています。

CSS装飾

上記までの設定で問い合わせフォームが表示できました。

snow

表示はできましたが、相当地味ですね……。
(ボタンの部分は装飾してあります)

snow ポートフォリオサイト

カラフルにしよ!

なるべく簡単に設定できるよう紹介していますが、
コピペだけではカラフルにできません。
何カ所か修正や設定をしなければならないので
読んでみて「タイヘンそうだな」と思われたなら今はこのままでいいと思います。

サイトの運営や編集に慣れてきたらチャレンジしてみてください。

フォームタブの設定

<div class="form-wrapper2">
/* 名前 */
<div class="form-content">
  <label class="form-content_title" for="name">
   <div class="flex">
    <p class="label-title">お名前</p>
    <span class="required">※必須</span>
   </div>
  </label>
  <div class="form-content_item">
   [text* your_name id:name placeholder "横浜 花子"]
  </div>
 </div>
/* 名前(カナ) */
 <div class="form-content">
  <label class="form-content_title" for="kana">
   <div class="flex">
     <p class="label-title">フリガナ</p>
     <span class="required">※必須</span>
   </div>
  </label>
  <div class="form-content_item">
   [text* your_kana id:kana placeholder "ヨコハマ ハナコ"]
  </div>
 </div>
/* メールアドレス */
 <div class="form-content">
  <label class="form-content_title" for="email">
   <div class="flex">
     <p class="label-title">メールアドレス</p>
     <span class="required">※必須</span>
   </div>
  </label>
  <div class="form-content_item">
   [email* your_email id:email placeholder "example@engineersnow.co.jp"]
  </div>
 </div>
/* 問い合わせ内容 */
 <div class="form-content">
  <label class="form-content_title" for="message">
   <div class="flex">
     <p class="label-title message_label">お問い合わせ内容</p>
     <span class="any">(任意)</span>
   </div>
  </label>
  <div class="form-content_item">
  [textarea textarea-906 id:message class:text-area 40x5 placeholder "お気軽にお声がけください!"]
  </div>
 </div> 
/* 送信ボタン */
 <div class="btn_area">
 [submit id:submit class:submit "送 信"]
 </div>
</div>

上のコードをコピーして使ってください。
基礎編で設定した問い合わせ(Contact Form7)のフォームタブにコピペします。

名前の部分で説明すると基礎編でご案内した
<label>名前
[text your-name placeholder “横浜 花子"]</label>
にいろいろと項目が増えています。
これから文字の色を変えたり、背景に画像を設定するためにクラス名(名前)をつけています。

バディのクリス

名前を付けないと何を装飾したいのかわからないもんね。

細かい説明は省きます。
変更しなければならないところだけ書きますね。

/* 名前 */
<div class="form-content">
  <label class="form-content_title" for="name">
   <div class="flex">
    <p class="label-title">お名前</p>
    <span class="required">※必須</span>
   </div>
  </label>
  <div class="form-content_item">
   [text* your_name id:name placeholder "横浜 花子"]
  </div>
 </div>

まず日本語の部分ですね。
➀「お名前」は項目名ですね。このままでよければこれでOKです。
変更する場合はここを書き換えます。

➁「横浜 花子」の部分は入力例ですね。
ここを変更する場合は “" (ダブルコーテーション)を絶対に消さないでください。
横浜花子の文字の部分だけ書き換えてください。

➂「※必須」の部分はこの項目(名前)を必須項目にするかどうかです。
入力していないと問い合わせメールが送信できません。
必須項目のままでいいならこのままでOKです。

もし必須項目でなくてもいいという場合は
<span class="required">※必須</span>の部分を
<span class="any">(任意)</span>に書き換えます。
日本語の部分は自由に書き換えてくださいね。

同じようにカナ氏名、メールアドレス、問い合わせ内容についても書き換えてください。

バディのクリス

修正したら保存するのを忘れないでね🐾

スタイルシートの記述

各項目の修正が終わりましたね。
次は名前をつけたクラス名にどんな装飾をしたいのか設定します。

CSS装飾 といいます。
下のコードをコピーしてください。

/* 背景にグリーンの画像を設定 */
.post.post-**** form {
	background: url(https://snowlilas.com/wp-content/uploads/2020/10/3622008_s.jpg) no-repeat;
	background-size: cover;	
}
/* 入力フォーム幅の調整、背景を半透明 */
.post.post-**** .form-wrapper2 {
	width: 70%;
	height: 100%;
	margin: 0 auto;
	background: rgba(255,255,255,0.5);
}
/* 項目名と入力欄を横に配置 */
.form-content_title {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	overflow: hidden;
	margin-bottom: 35px;
}
/* 項目名の幅の設定 */
.flex {
	width: 30%;
	display: flex;
	flex-direction: column;
	text-align: right;
	padding-right: 20px;
}
.flex > p {
	margin: 0;
}
/* 入力欄の幅の設定 */
.form-content_item {
	width: 70%;
	display: flex;
	align-items: center;
}
.form-content_item > .wpcf7-form-control-wrap {
	width: 100%;
}
.form-content_title > p {
	margin-top: 0;
}
.form-content_title > p > br {
	display: none;
}
/* 入力必須の文字を赤 */
.required {
	color: #f34213;
}
/* 送信ボタン */
.wpcf7-submit {
	width: 370px;
	height: 75px;
	border-radius: 50px;
	color: #ffffff;
	font-size: 24px;
	font-family: "Font Awesome 5 Free" !important;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	padding: 10px;
	background-color: #00ced1 !important;
	border-bottom: 5px solid #0099cc !important;
	transition: .3s;
}

いったん Contact form7 (お問合せ)設定画面から離れます。
ダッシュボードから ルクセリタス 子テーマ編集 に進みます。

ルクセリタス 子テーマ編集

上にあるタブの中から スタイルシート を選びます。

赤字でいろいろなコードが記入されていますね。
ルクセリタスのテーマ開発者の方の設定です。
絶対に消さないでください。

 * ここから上を消すと正しく動作しなくなることがあります。
 * ( Erasing the elements above here might cause system issues. )
 */

/* 以下、好みに応じて子テーマ用のスタイルをお書きください。
 * ( Below here, please write down your own styles for the child theme. )
 */

少し下に進むとこんな記述があると思います。

この記述の下の行にさっきコピーした内容をペーストしてください。
これで項目につけた名前(クラス名)の文字の色や背景の設定をしたことになります。

背景にグリーンの画像を指定しました。
項目と入力欄も横並びにしました。
入力が必須の項目の部分のテキストを赤にしました。
ボタンも色をつけました。

さきほどの地味な問い合わせフォームが明るくなりましたね。
これはわたしのサイトの設定なので、みなさんのブログ用に修正できる部分を説明しますね。

背景の設定

/* 背景にグリーンの画像を設定 */
.post.post-**** form {
	background: url(https://snowlilas.com/wp-content/uploads/2020/10/3622008_s.jpg) no-repeat;
	background-size: cover;	
}

わたしのサイトでグリーンの写真を設定している部分です。

.post.post-**** form の部分を皆さんのサイトの問い合わせフォームを設置したいページ名に変更します。

設置したいページ(固定ページでも投稿記事でもOK)の一覧を表示させます。
ページ名にマウスと持っていくと(グリーン線)
左下にそのページの情報が表示されます。(グレーの部分)
そこに post=254 と書いてあります。
この番号をメモしておいてください。

さきほどの .post.post-**** form の *** をメモした番号に置き換えてください。
これで「皆さんのページの問い合わせフォームの背景を設定するよ」という宣言になります。

次は画像の設定ですね。
わたしの設定ではurl(https://snowlilas.com/wp-content/uploads/2020/10/3622008_s.jpg)としています。
このURLでグリーンの写真を呼び出しています。
ここを皆さんの設定したい画像(イラストでも写真でもOK)に変更します。

メディアライブラリ

ダッシュボードからメディアライブラリを選びます。
設定したい画像がない場合は新規追加してください。
次に画像をクリックします。

画像の詳細情報が表示されますね。
ここの URLをクリップボードにコピー をクリックします。

background: url(https://snowlilas.com/wp-content/uploads/2020/10/3622008_s.jpg) no-repeat;
	background-size: cover;	

ここのurlのカッコの中 https://snowlilas.com/wp-content/uploads/2020/10/3622008_s.jpg を今コピーしてきたURLに置き換えます。

画像でなくて色を設定することもできます。
その場合は

background: url(https://snowlilas.com/wp-content/uploads/2020/10/3622008_s.jpg) no-repeat;
	background-size: cover;	

の部分を

background: #カラーコード;

に置き換えます。
「カラーコード」の部分に変更したい色のカラーコードを設定します。
カラーコードを調べるにはこちらのサイトがおススメです。

snow

これで背景が華やかになりますね。

入力フォーム幅の調整など

/* 入力フォーム幅の調整、背景を半透明 */
.post.post-**** .form-wrapper2 {
	width: 70%;
	height: 100%;
	margin: 0 auto;
	background: rgba(255,255,255,0.5);
}

ここは #post-*** の *** をさっき調べたページ名に書き換えるだけでOKです。
背景設定のときと同じ番号ですね。

ここでは入力する部分(名前などの項目が並んでいるところ)だけ
文字を見やすくするように背景を薄くしています。
ひとまずこのままでいいと思います。

幅の設定など

とりあえずこのままでいいかなと思います。

文字の色の変更

/* 入力必須の文字を赤 */
.required {
	color: #f34213;
}

「※必須」の文字を赤に設定している部分です。
このままでよければ変更なしでOKです。
他の色を設定したい場合はカラーコード(#のうしろの数字)を変更してください。

送信ボタンの変更

/* 送信ボタン */
.wpcf7-submit {
	width: 370px;
	height: 75px;
	border-radius: 50px;
	color: #ffffff;
	font-size: 24px;
	font-family: "Font Awesome 5 Free" !important;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	padding: 10px;
	background-color: #00ced1 !important;
	border-bottom: 5px solid #0099cc !important;
	transition: .3s;
}

color は文字の色ですね。#ffffff は白です。
background-color はボタンの色です。
border-bottom がボタンの下の線の色です。

それぞれお好みのカラーコードを設定します。
もちろんこのままの色でよければ変更しなくてOKです。

それから 送信 の横に 記号がありますね。
これは Font Awesome というフォントを利用しています。
このフォントを利用するために設定をします。

ルクセリタス カスタマイズ

ダッシュボードから ルクセリタス カスタマイズ に進んで Font Awasome タブを選びます。
以下のように設定してください。

Font AwesomeバージョンFont Awesome 5
アイコンの読込方法Web Fonts with CSS ( Web フォントで表示 )
CSSの読込方法非同期(レンダリング高速)
CSSの読込元CDN
フォントファイル本体の読込元CDN

これでFont Awesome が利用できるようになります。
とてもたくさんのアイコンがあります。
眺めているだけでも楽しいですよ。

これでCSS装飾の設定ができたと思います。
プレビュー画面で確認してみてください。

snow

もしうまく表示できない場合は、修正したフォームタブやスタイルシートの記述を見直してみてください。スペルミスがあるかもしれません。カンマ(.)やダブルコーテーション(“")、シャープ(#)などの記号が抜けているかもしれません。

新規追加の問い合わせページだけでなく、
固定ページや投稿記事の一部にも挿入できます。

必要な部分にショートコード(Contact formで表示されているコード)を挿入してください。

ブルーの部分!

これで問い合わせフォームができました!

バディのクリス

やったね! おめでとう🎵

わかりづらい点、うまくいかなかった箇所などありましたらお知らせください。   コメント欄へ

問い合わせフォームの作成でした!

Contact me 📧

お問合せフォームからメールを受信できるようになりました。
少し大変でしたね。
お疲れ様でした。

次回はいよいよ最終回!
最後の確認や調整をしていよいよ公開!

ブログデビューですね♬

バディのクリス

とうとうブログデビューだね!
ぼくまでワクワクしちゃうよ🐾

趣味で源氏物語を【超訳】しています。
 話し言葉でお気軽GENJI

 よかったら遊びにきてください。

小倉百人一首も【超訳】しています。
 話し言葉でお気軽 OGURA

 よかったら遊びにきてください。