【わずか5分】ホームページ・ブログにおしゃれな「お問い合わせフォーム」の作り方

お問い合わせフォームの作り方

「お問い合わせフォーム」の設置方法、色々あり過ぎて迷ってしまうかもしれません。

ウキワさん

スマホでちゃんと表示されるかや、セキュリティ面は大丈夫か、なんてことも気になるよね…

そこで、

  • コードなど専門知識がなくても、
  • おしゃれで安全・レスポンシブ対応、
  • さらに顧客管理もできてしまう

「お問い合わせフォーム」の作り方をご紹介します。

目次

無料で「お問い合わせフォーム」を作るときパターンは3つ

WordPressのホームページ・ブログに、無料で「お問い合わせフォーム」を設置する方法は大きく3つ。

  1. プログラムで作る
  2. プラグインで作る
  3. フォーム作成サービスを使う

プラグイン:WordPressにさまざまな機能を後付けできるアプリのようなもの

3つのうち、最も簡単な方法が「フォーム作成サービスを使う」です。

以降では、フォーム作成サービス「formrun」を使った、お問い合わせフォームの作成方法について解説します。

プラグインでの「お問い合わせフォーム」の作り方はこちら

「formrun」ならオシャレで安全・レスポンシブ対応のお問い合わせフォームが5分で!

formrun (フォームラン)とは、

Webマーケティングのサイトで有名な「ferret」を運営する、株式会社ベーシックによるフォーム作成サービス

ネットショップの「BASE」や「Chatwork株式会社」など、名だたる企業も利用する安心サービスです。

formrunでは「お問い合わせフォーム」だけでなく、アンケートフォームや会員登録フォームなども、簡単に作成できます。

formrunのアンケートフォームイメージ

料金プランは4種類。

formrunの料金プラン
参照:formrun

費用が一切かからない無料プラン(FREE)で、おしゃれで安全な「お問い合わせフォーム」を作成可能です。

ただし、無料プランのデメリットとして、

  • 作れるフォームが1つだけ
  • 自動返信メールが送れない
  • 作成したフォームの下部にformrunのクレジットが表示される

他の「フォーム作成サービス」も似たようなものですが、上記の点に注意してください。

■formrunのクレジット表示例

formrunのクレジット表示例

それに対しメリットは、

  • 40種類以上のフォームテンプレートが使える
  • 郵便番号から住所を自動入力してくれる「住所補完機能」を装備
  • 入力ミスをその場で判定してくれる「リアルタイム・バリデーション」が途中離脱を防ぐ
  • セキュリティ関連の国際的認証にもとづいた安全なフォームを設置できる
  • 「お問い合わせ」ごとに未対応 ・ 対応中 ・ 対応完了などの一元管理ができる

formrunなら「お問い合わせフォーム」が5分で作れ、しかも上記のような機能が無料で手に入ります。

ウキワさん

実際にお問い合わせフォームを作ってみて、試しでフォーム入力してみると、その便利さがわかると思うよ!

以降では、FREEプラン(費用0円)での「お問い合わせフォーム」の作り方を解説します。

「formrun」のアカウント作成

「formrun」のアカウント作成はこちら。

» formrun公式

1. 「無料でスタート」をクリック。

formrun「無料でスタート」ボタン

※すべての画像はクリックで拡大できます(戻す➜画像以外をクリック)

2. 「利用規約…に同意する」にチェックを入れ、お好みの登録方法を選んでください。

formrunのユーザー登録

3. 各項目を入力します。(メールアドレスで登録を選んだ場合)

formrunのユーザー登録2

「formrun」のアカウントが作成されました。

続けて、お問い合わせフォームを作っていきましょう。

「formrun」のアカウント作成はこちら。

» formrun公式

「お問い合わせフォーム」の作成

1. 「テンプレートから作成」をクリック。(最も簡単なフォーム作成方法)

formrunの「テンプレートから作成」

フォーム作成後の修正・削除も簡単に行えます

2. 左サイドにフォームのテンプレート一覧が表示されるので、「お問い合わせ窓口」をクリック。

formrunのテンプレート一覧

上記のとおり、さまざまなフォームを作成可能

3. さらにプルダウンメニューが開かれるので、「お問い合わせ窓口」を選びます。

formrunの「お問い合わせ窓口」

4. フォームのプレビューを確認して「このフォームを使う」をクリック。

formrunの「このフォームを使う」

5. フォームの入力画面へ移動します。

formrunのフォーム入力画面

左メニュー上部のタブから、

  • 項目:フォーム内の各パーツの追加や詳細設定など
  • カバー:トップ画像の変更や削除など
  • スタイル:レイアウトやフォントの変更など
  • 設定:通知設定やSNSシェアボタン設定など

といった操作が可能です。

6. フォーム内の各項目をクリックすると選択状態となり、左サイドに詳細設定の作業ウインドウが表示されます。

formrunのフォーム作業ウインドウ

名前(項目)の「表示設定」や「項目設定」が意味するところは、以下のようなイメージです。

formrunの「表示設定」や「項目設定」

「コピー」「下に移動」「削除」ボタンも表示されます。

フォームの「コピー」「下に移動」「削除」ボタン

7. 名前の項目を以下のように設定(変更)しました。

formrunの名前項目
  • 表示設定 ➜ 名前のみ
  • 項目設定 ➜ タイトル=お名前 サンプルテキスト=鈴木 太郎
  • 入力必須/任意ラベル ➜ 必須
名前項目の変更前
変更前
名前項目の変更後
変更後

8. 「スパム対策」項目の追加で、「わたしはロボットではありません」の表示もできます。

スパム対策の挿入
「わたしはロボットではありません」が表示

9. 不要な項目を削除し、「スパム対策」を挿入して、このような状態に。

formrunの「スパム対策」を挿入したお問い合わせフォーム

10. 「スタイル」タブから、レイアウトで「フルスクリーン」を選びました。

「スタイル」タブから、レイアウトで「フルスクリーン」

スマホやタブレットでのフォーム入力を想定している場合、レイアウトは「ステップ」が推奨されています

11. 「カバー」タブの「写真」から画像を変更しました。

「カバー」タブの「写真」から画像を変更
「カバー」タブの「写真」から画像を変更2

「カバー」タブの「カスタム」から、画像の削除・アップロードも可能

12. 「プレビュー」を確認して問題なければ、「保存」をクリック。

お問い合わせフォームの「プレビュー」を確認して問題なければ、「保存」

13. こちらの画面が表示されます。

フォーム作成完了画面

①回答確認画面を開く(ボード画面)
②作成したお問い合わせフォームのURL
③作成したお問い合わせフォームのQRコード
④Webページに埋め込む(iframe):お問い合わせフォームのコードが表示

②をクリックして、実際のお問い合わせフォームを確認してみましょう。

14. このような「お問い合わせフォーム」が完成しました。

formrunの「お問い合わせフォーム」が完成

操作に慣れてくると、フォームの作成自体は1~2分で完了します。

作成したフォームを編集したい

作成したフォームを編集したり、削除したりも簡単です。

ボード画面の左上「フォーム」をクリックすると、作成したフォーム一覧が表示されます。

formrunのボード画面の左上「フォーム」から作成したフォーム一覧が表示

変更したいフォームの③部分のボタンから、編集・削除などが簡単に行えます。

「formrun」のアカウント作成はこちら。

» formrun公式

対応状況がひと目でわかる

お問い合わせ直後に送信完了の画面が表示。

お問い合わせ直後の送信完了画面

アカウント登録したメールに、お問い合わせがあったことを知らせるメールが届きます。

アカウント登録したメールに、お問い合わせがあったことを知らせるメールが届く

「ログインして確認する」をクリックすると、ボード画面に移動します。

返信メールを送ったり、お問い合わせごとに作成される「カード」を、対応状況にあわせて移動(ドラッグ&ドロップ)したりが可能です。

お問い合わせごとに作成される「カード」を、対応状況にあわせて移動

カスタマーサポートや調査・アンケートフォームも作成できるため、顧客対応を一元管理できるボード画面は重宝します。

無料プランで作成できるフォームは1つだけ

「formrun」のアカウント作成はこちら。

» formrun公式

ホームページ・ブログへの「お問い合わせフォーム」設置方法【WordPress】

2つの設置方法をご紹介します。

  1. グローバルメニューに作る
  2. 記事に埋め込む

グローバルメニューに作る

当ブログのグローバルメニュー
グローバルメニューの「お問い合わせ」
ウキワさん

スマホからの問い合わせを想定した「ステップ」レイアウトでのお問い合わせフォーム設置はこの方法ね!

1. WordPressダッシュボードで「外観」➜「メニュー」と進みます。

WordPressダッシュボードで「外観」➜「メニュー」
  • 編集するメニューを選択:グローバルメニューを選び「選択」をクリック
  • メニュー項目を追加:「カスタムリンク」をクリック

2. カスタムリンクの項目を入力します。

カスタムリンクの項目を入力
  • URL:お問い合わせフォームのURL
  • リンク文字列:お問い合わせ(グローバルメニューの名称)

「メニューを保存」をクリック。

お問い合わせフォームURLの確認方法

ボード画面の左上「フォーム」から確認できます。

お問い合わせフォームURLはボード画面の左上「フォーム」から確認

3. グローバルメニューに「お問い合わせ」が表示されました。

グローバルメニューに「お問い合わせ」が表示された

4. メニューの「お問い合わせ」をクリックすると、作成したお問い合わせフォームが表示されます。

メニューの「お問い合わせ」をクリックすると、作成したお問い合わせフォームが表示

記事に埋め込む

記事中に埋め込んだ「お問い合わせフォーム」イメージ
記事中に埋め込んだ「お問い合わせフォーム」

iframe(インラインフレーム)を使うと、「お問い合わせフォーム」を記事中に埋め込んで一体的に表示できます。

ウキワさん

レイアウトで「ステップ」を選んだ場合、iframe表示できないので注意してちょうだい!

1. ボード画面の左上「フォーム」から、作成したお問い合わせフォームの「設定」をクリック。

ボード画面の左上「フォーム」から、作成したお問い合わせフォームの「設定」

2. 下へスクロールし、左メニューの「iframe埋め込みフォーム」をクリック。

左メニューの「iframe埋め込みフォーム」

3. まずは「お問い合わせフォーム」を埋め込みたい、ホームページ・ブログの記事URLをコピーしてください。

「お問い合わせフォーム」を埋め込みたい、ホームページ・ブログの記事URLをコピー

①コピーした記事URLを貼り付け
②「更新する」をクリック
③スクリプトをコピー

4. 記事中の埋め込みたい箇所のブロックに「ショートコード」を呼び出す。

記事中の埋め込みたい箇所のブロックに「ショートコード」を呼び出す

コピーしたスクリプトを貼り付け。

コピーしたスクリプトを貼り付け

5. プレビューや公開で確認してみると、「お問い合わせフォーム」が挿入されています。

プレビューや公開で確認してみると、「お問い合わせフォーム」が挿入

以上、「お問い合わせフォーム」2つの設置方法でした。

  1. グローバルメニューに作る
  2. 記事に埋め込む

上記2つの方法を知っておくと、ホームページ・ブログのお好みの場所に「お問い合わせフォーム」を設置できるようになります。

【ホームページ・ブログにおしゃれな「お問い合わせフォーム」の作り方】まとめ

この記事のポイント

  • 「お問い合わせフォーム」を作るなら、フォーム作成サービスの利用が一番簡単
    ・formrunは名だたる企業も利用する安心なフォーム作成サービス
    ・40種類以上のフォームテンプレートが使える
    ・入力ミスをその場で判定してくれる「リアルタイム・バリデーション」が途中離脱を防ぐ
  • formrunの「お問い合わせフォーム」の特長
    ・5分でホームページやブログに設置できる
    ・安全・おしゃれ・レスポンシブ対応
    ・未対応 、 対応中 、 対応完了などの一元管理ができる
ウキワさん

当ブログのお問い合わせフォームにもformrunを使ってるよ!

安全・おしゃれ・レスポンシブ対応の「お問い合わせフォーム」を無料で作るならformrunがおすすめ!

「formrun」のアカウント作成はこちら。

» formrun公式

お問い合わせフォーム用の「受信メールアドレス」を今すぐ手に入れる方法!

メルマガ配信を始めたいときオススメは無料で使えるこのシステム!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次