【WordPressプラグイン不要】問い合わせフォームの作り方

株ブログの始め方

【WordPressプラグイン不要】問い合わせフォームの作り方

WordPressの固定ページにお問い合わせフォームを設置したい。contact form7っていうプラグインが有名みたいだけど、プラグインは増やしたくない。何かおすすめのやり方ってないのかな?

こんにちは、サラリーマン個人投資家の有馬です。今回はcontact form7プラグインを使わず、Googleフォームで問い合わせページを作る方法について解説します。35枚の画像で図解しました。

本記事を読めば以下のことができます。

  • Googleフォームで問い合わせフォームを作る
  • 問い合わせフォームを固定ページに設置する
  • Googleフォームで作るメリットを理解する

ではいきましょう。

【WordPressプラグイン不要】問い合わせフォームの作り方

Googleフォームで問い合わせフォームを作る手順

Googleで「google form」と検索。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

「Googleフォームを使ってみる」をクリック。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

右下の「+」をクリック。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

こんな感じの画面↓になります。「無題のフォーム」をクリックして「お問い合わせ」と入力。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

「無題の質問」をクリックして「お名前」と入力。

右側の「ラジオボタン」をクリック。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

「記述式」を選択します。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

「必須」をクリックしてON状態にする。

これで、読者に名前を入力してもらうフォームが完成しました。

続いて、右側の「+」をクリック。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

同じようにして、読者にメールアドレスを入力してもらうフォームを作ります。

  • 「無題」をクリックして「メールアドレス」と入力。
  • 「ラジオボタン」をクリックして「記述式」を選択。
  • 「必須」をクリックしてON状態にします。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

読者にメールアドレスを入力してもらうフォームが完成しました。

続いて、「+」をクリック。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

次は、読者に問い合わせ内容を入力してもらうフォームを作ります。

  • 「無題」をクリックして「お問い合わせ内容」と入力。
  • 「ラジオボタン」をクリックして「段落」を選択。
  • 「必須」をクリックしてON状態にします。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

「テーマをカスタマイズ」のアイコンをクリック。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

初期状態ではデザインカラーが紫色になっています↓

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

あなたのwebサイトのイメージに合う色を選択してください。

webサイトの全体カラーがまだ決まっていないなら、無難なグレーをとりあえず選択しましょう。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

右上の「設定」アイコンをクリック。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

こんな画面↓が出てきます。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

「プレゼンテーション」を選択。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

「確認メッセージ」に「お問い合わせありがとうございます。」と入力して「保存」をクリック。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

Googleスプレッドシートのアイコンをクリック。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

「新しいスプレッドシートを作成」の欄に「お問い合わせ_有馬アヤトのブログ」と入力して「作成」をクリック。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

自動でスプレッドシートが開きます。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

「プレビュー」アイコンをクリック。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

Googleフォームがちゃんと機能するのかテストしてみます。適当にフォームを埋めて「送信」をクリック。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

「お問い合わせありがとうございます。」が表示されました。スプレッドシートのタブをクリック。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

先ほど適当に入力した問い合わせ内容が反映されています。OKです。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

読者から問い合わせが来た時に、メールで通知が来るよう設定していきます。

「ツール」から「通知ルール」をクリック。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

「ユーザーがフォームを送信したとき」と「メール - その都度」を選択して「保存」をクリック。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

「完了」をクリック。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

作成した問い合わせフォームをWordPressの固定ページに設置していきましょう。

「送信」をクリック。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

「<>」をクリックするとHTMLが表示されます。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

表示されたHTMLをメモ帳にコピペ。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

WordPressの固定ページから「新規追加」をクリック。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

「+」をクリックして「<>」を選択。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

「HTML」タブを選択して、先ほどメモ帳にコピペしたHTMLを貼り付け。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

「プレビュー」タブを選択すると、先ほど作った問い合わせフォームが表示されました。

右上の「文書」をクリック。

【WordPressプラグイン不要】問い合わせフォームの作り方

 

 

URLスラッグ(パーマリンク)はシンプルに「contact」としましょう。

「公開する」をクリック。これで完了!

【WordPressプラグイン不要】問い合わせフォームの作り方

 

問い合わせフォームをGoogleフォームで作るメリット

問い合わせフォームをGoogleフォームで作るメリットは下記↓

  • プラグインを更新する手間が省ける
  • プラグインは定期的にアップデートしないとセキュリティ性能が低下して危険である
  • contact form7は有名なプラグインなので悪い人に狙われやすい

プラグインは増やさない方が良いです。

ちなみに、当ブログで有効化しているプラグインは7つだけ。

まとめ

以上、まとめておきましょう。

  • 問い合わせフォームはGoogleフォームで作った方がいい
  • プラグインは増やさない方がいい

-株ブログの始め方

© 2020 有馬アヤトの株ブログ Powered by AFFINGER5