こんにちは、ひつじがです。
「ワードプレス」に「googleフォーム」を設置する方法を解説します。
お問い合わせとかアンケートの機能の話です。
「プラグイン以外の方法を探している」なら是非チャレンジしてみて下さい。
私はいろいろ試した結果、この方法にたどり着きました。
メール通知OK。スパム対策OK。で機能性も十分です。
簡単な設置方法からワードプレスに馴染むデザインでの設置方法まで解説します。
設置するメリットはこんな感じです。
- ワードプレスのプラグインを減らせる。
- 設置が簡単な方法がある。
- スプレッドシートなどで回答を受けとれる。
デメリットは下記です。
- メールは通知のみ、本文の場合は更に作業が必要。
- 全体的に手間がかかる。ですが、プラグインでも同様です。
- googleがサービスを辞めてしまう可能性がある。
さっそく実戦編へ進みます。googleフォームとは？などの説明はすっとばします。
レベル⓪ まずフォームを作る。
まず、フォームを作って動作確認するまで解説します。これが終わると機能的には100％完了です。
そのままでも使えます。
問い合わせ用の項目を作っていきます。最初の何も入力されてない画面
初期状態の項目を書き換えます。
- 一番上の部分は表示用です。何でもいいです。
- 「無題の質問」を「お名前」に書き換える。
- 「ラジオボタン」から「記述式」に変更する。
- 「必須」ボタンを有効にする。（どちらでもよい）
次にメール欄の作成。
- 「○に囲まれた＋」ボタンで項目の追加
- 「メールアドレス」「記述式」「必須」にする。
条件を付けます。
メールアドレスが入力されたかチェックできます。
- 「三つの点」を選択して「回答の検証」を選ぶ
- 「テキスト」「メールアドレス」にする。
＠を含んでいるかなどがチェックできます。
続いて本文。
- ＋ボタンで項目を増やす。
- 「本文」「段落」「必須」にする
長い文章を受け付けるため「段落」を選んでます。
フォーム最後の部分。スパム対策です。
- ＋ボタンで項目を追加
- 「ロボット対策：「みかん」と入力してください」と入力
- 「記述式」「必須」にする。
- 右下の３つの点を押して「回答の検証」
- 「テキスト」「次を含む」「みかん」にする。
「みかん」はどんな言葉でもよいです。
日本語のひらがなが良いです。海外スパム対策です。
「みかん」と入力できる人だけが回答できるようになります。
こんな感じに仕上がりました。
最後にメールで受け取るをチェックしたら作成終了です。
- 「回答」を開いて、右上の3つの点をクリック。
- 「新しい回答についてのメール通知を受け取る」をチェック
以上で作成終了です。
後は動作確認をします。完成したページを開きます。
- 右上の「送信」ボタンを押します。
- 送信方法を「リンクのマーク」を選択
- URLを短縮（しなくてもよい）
- 「コピー」を押します。
以上でURLがコピーされてます。ブラウザに張り付けるとフォームのページが開きます。
利用する人が見るページです。
あとは動作テストします。
- メール欄のチェック機能は働くか？
- スパム対策の文字、機能してるか？
- メール通知されるか？（作成したgoogleアカウントに届きます。）
このあたりを確認して下さい。
次のレベルへ進んで下さい。
レベル① リンクする。配色を変える。
あとはデザインの問題です。
- 完成したURLをそのまま使う
- ページに埋め込む
後半はこの2点の方法を解説します。
まず前者の方法を解説しておきます。
これは簡単です。
少し上の「フォームを送信」でコピーしたリンクを設置すると完了です。
外部の「googleフォーム」へ案内します。
少しだけデザインを変更できます。
「テーマをカスタマイズ」から色を変更できます。
10色くらいから選べるので、お好きな色を選択してください。
以上で終了です。
このままでも運用はできます。
こだわりたい方は後者の「埋め込み」に挑戦してみて下さい。
レベル② 埋め込み
「埋め込み」にすると自分のワードプレス内に表示できます。
2通りの方法があります。
- デザインはそこそこの「ただの埋め込み」
- フォームやCSS改造の「カスタム埋め込み」（本題）
前者の「ただの埋め込み」は簡単です。
とりあえず解説しておきます。（飛ばしてOK）
- 右上の「送信ボタン」を押す。
- <>の部分を押す
- サイズを選ぶ。とりあえずそのままでもよい。
- 「コピーボタン」を押す。
サイズはいろいろ試してちょうどよいサイズを選んで下さい。
張り付けたい場所で「ショートコード[/]」に張り付けると完了です。
レベル③ 本題。googleフォームのカスタム。
本題です。自分でデザインできる方法です。
配色や文章の削除や追加も行う事ができます。
ボタンの大きさや入力欄の大きさも自由です。
先に作っておきます。
フォーム送信後に表示されるページをワードプレスで作ります。
固定ページで作った方がよいでしょう。
「送信されました。ありがとうございます。」のページです。
参考。当ブログの thanksページ です。
フォームを埋め込むページを作ります。
固定ページで作ります。
このページに下で作られるHTML（フォーム部品）とCSSを貼り付けます。
参考。当ブログの contactページ です。
次に数値の取得。ツールを用意しました。簡単に出来ます。
自分で作成したフォームの個別の番号を調べます。
この番号は5つほどです。
作成したフォームのソースから見つけます。
- googleフォーム
- 右上の「目のアイコン」で「プレビュー」に移動する。
- ページ上で「右クリック」→「ページのソースの表示」
- ソース全文をコピーする。(マウス右ボタン「全て選択」など)
- 下記のページに貼り付ける。
- googleフォーム「form action」と「entry.」の数値表示ツール。
- 取得完了。
赤い文字が取得したい情報です。
取得した数値を下記のフォーム部品に書き込みます。
フォーム部品が完成します。
- contactページに「カスタムHTML」として貼り付けます。
- 下記のコードは右上のボタンでコピー出来ます。
<form action="https://docs.google.com/forms/u/0/d/e/■■■/formResponse" id="form" method="post" target="hidden_iframe" onsubmit="submitted=true;">
<div class="label">お名前</div>
<input id="name" name="entry.■■■" required="required" type="text" />
<div class="label">メールアドレス</div>
<input id="email" name="entry.■■■" required="required" type="text" />
<div class="label">本文</div>
<textarea id="msg" name="entry.■■■" required="required"></textarea>
<div class="label">ロボット対策：「みかん」と入力してください。 </div>
<input id="robot" name="entry.■■■" placeholder="みかん" required="required" type="text" pattern="みかん"/>
<div class="label"></div>
<input id="button" name="button" type="submit" value="送 信" />
</form>
<script type="text/javascript">var submitted = false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){window.location='●●受取り完了ページのURL●●';}"></iframe>- step2で取得した赤い文字の部分を■■■に入れ替えます。
- 上の画像部分の赤い文字列が順番に■■■に入ります。
- ●●受取り完了ページのURL●●を、step1で作ったthanksページのアドレスに変更します。
- 「みかん」の部分は設定した言葉に変えます。（2か所）
以上で設置完了です。とりあえず動作確認してみて下さい。
下のCSSを「CSS用コード」に貼ると完了です。
ワードプレス編集中に出てくる「CSS用コード」の欄です。
「contactページ」のみにCSSが適用されます。
下記のサンプルはご自由にお使いください。
CSSサンプル その①
<style>
#form ::placeholder {
color: #999;
}
#button {
min-width: 50%;
display: block;
margin: 0 auto;
border: none;
border-radius: 5px;
font-size: 1em;
padding: .5em 1em;
margin-top: 2em;
background-color: #4568DC;
color: #fff;
transition: .2s ease-in-out;
}
#button:hover {
background-color: #4C75AF;
cursor: pointer;
opacity: 0.8;
}
#button:active {
background-color: #4568DC;
box-shadow: none;
}
#name,
#email,
#msg,
#robot {
padding: .5em;
border: none;
border-radius: 5px;
background: #f5f5f5;
font-size: 1em;
max-width: 100%;
width: 100%;
color: #333;
}
#msg {
min-height: 250px;
min-width: 100%;
}
.radio > label {
margin: 14px;
cursor: pointer;
}
.label {
padding: 1em 0 5px;
font-weight: bold;
}
</style>
CSSサンプル その②
<style>
#form ::placeholder {
color: #999;
}
#button {
min-width: 50%;
display: block;
margin: 0 auto;
border: none;
border-radius: 5px;
font-size: 1em;
padding: .5em 1em;
margin-top: 2em;
background-color: #4578AC;
color: #fff;
transition: .2s ease-in-out;
}
#button:hover {
background-color: #4C8ABF;
cursor: pointer;
opacity: 0.8;
}
#button:active {
background-color: #4578AC;
box-shadow: none;
}
#name,
#email,
#msg,
#robot {
padding: .5em;
border: none;
border-radius: 5px;
background: #f5f5f5;
font-size: 1em;
max-width: 100%;
width: 100%;
color: #333;
}
#name:focus,
#email:focus,
#msg:focus,
#robot:focus {
outline: none;
border-color: #4C8ABF;
box-shadow: 0 0 5px #4C8ABF;
}
#msg {
min-height: 250px;
min-width: 100%;
}
.radio > label {
margin: 14px;
cursor: pointer;
}
.label {
padding: 1em 0 5px;
font-weight: bold;
}
</style>
CSSサンプル その③
<style>
#form ::placeholder {
color: #999;
}
#button {
min-width: 50%;
display: block;
margin: 0 auto;
border: none;
border-radius: 50px;
font-size: 1.1em;
padding: .3em 2em;
margin-top: 2em;
background: linear-gradient(to right, #4C75AF, #4568DC);
color: #fff;
transition: .2s ease-in-out;
-webkit-appearance: none;
}
#button:hover {
box-shadow: 0 2px 10px rgba(69, 104, 220, 0.6);
cursor: pointer;
opacity: 0.8;
}
#button:active {
box-shadow: none;
}
#name,
#email,
#msg,
#robot {
padding: .5em;
border: 1px solid #ccc;
border-radius: 5px;
background: #f5f5f5;
font-size: 1em;
max-width: 100%;
width: 100%;
color: #333;
}
#msg {
min-height: 250px;
min-width: 100%;
}
.radio > label {
margin: 14px;
cursor: pointer;
}
.label {
padding: 1em 0 5px;
font-weight: bold;
}
</style>お疲れさまでした。