お 問い合わせ フォーム デザイン。 入力フォームのデザイン・UXを高める15のルールを徹底図解!

【簡単】Contact Form 7(WordPressお問い合わせフォーム設置)の使い方徹底解説

お 問い合わせ フォーム デザイン

Contact Form 7の基本的な使い方 お問合せフォームの設置は、サイト運営では欠かせません。 そしてWordPressのプラグイン「Contact Form 7」は、難しい専門的な知識を必要とせずに、お問合せフォームが作成できるプログラムです。 Contact Form 7を使えば、用途にあったお問合せフォームが簡単に設置できます。 ここではまず、Contact Form 7の最も基本的な使い方を解説します。 お問合せフォームのカスタマイズ方法は次章以降を参照ください。 【事前準備】プラグインをインストール WordPressがインストール済であることを前提に解説をいたします。 Contact Form 7を利用するためには、まずWordPressにこのプラグインをインストールする必要があります。 WordPressで「プラグイン」メニューをひらき、「新規追加」をクリックします。 「プラグインの追加」ページに移動します。 キーワードに「Contact Form」と入力し検索を実行します。 検索結果の中にContact Form 7が表示されます。 その欄の「今すぐインストール」をクリックします。 インストールが完了したら、同じ欄に表示される「有効化」をクリックします。 これでContact Form 7が使えるようになります。 【作成】お問い合わせフォームを作る ここでは、問い合わせされる方のお名前・メールアドレス・問い合わせの題名・メッセージ本文を送信してもらう、以下のようなもっともシンプルなお問合せフォームの作り方を紹介します。 WordPressにContact Form 7がインストールされると、メニューの中に 「お問い合わせ」という項目が追加されているはずです。 まずは「お問い合わせ」をクリックして、Contact Form 7の設定欄を表示します。 「コンタクトフォーム」 Contact Form 7の設定メニュー が表示されます。 「新規追加」をクリックします。 「コンタクトフォームを追加」メニューの「フォーム」タブが表示されます。 ここでは、お問い合わせフォームに入力してもらう内容を設定します。 「テキスト」「メールアドレス」など表示されるフォームメニューの中から必要なものをクリックして追加していくかたちになりますが、今回ご説明する シンプルな問い合わせフォームの内容は初期設定ですでに入力済みです。 そのため、このままで構いません。 仮に上記イメージ図の内容が入力されていない場合、もしくは消してしまった場合は、入力欄に以下テンプレートを 貼り付けていただいても同じ動作を実現できます。 「メール」タブに移動します。 ここでは、フォームからお問い合わせが入力された場合に、その 内容を指定のメールアドレス宛に送信するための設定を行います。 「送信先」には、初期状態でWordPressが利用するメールアドレスが入力されていますが、他の宛先へお問い合わせフォームの内容を送信したい場合はここを書き換えて下さい。 このままでよければ編集する必要はありません。 画面上部の空白に作成したお問い合わせフォームのタイトルを入力します。 タイトルの文字列は任意です。 日本語でも構いません。 ここまで設定が終了したら「保存」をクリックします。 お問い合わせフォームを、WordPressのコンテンツ内に埋め込むための「ショートコード」が表示されます。 この文字列をコピーして、投稿や固定ページなどにペーストすると、それだけでお問い合わせフォームの設置が完了です。 なお「お問い合わせ」メニューから作成したフォームのタイトルをクリックすると、「コンタクトフォームの編集」メニューへ遷移し、そのフォームをあとから編集することができます。 オプションなどをうまく利用してフォームをカスタマイズ! オプションで用意されたメニューを使うと、より高性能なフォームにカスタマイズすることもできます。 ここでは中でも特に便利な プレースホルダーテキスト・ドロップダウンリスト・自動返信の3つのオプションを紹介します。 上記イメージ図のように表示されます。 これによって問い合わせされる方が、より簡単にフォームへ正しい内容を入力できるようになります。 ・編集前 題名 [TEXT your-subject] メッセージ本文 [textarea your-message] ・編集後 題名 [TEXT your-subject placeholder"お問い合わせの題名を入力してください"] メッセージ本文 [textarea your-message placeholder"お問い合わせの内容を入力してください"] [submit "送信"] なおプレースホルダーテキストを入力できるフォームタグの種類は、以下の通りです。 text, email, url, tel, textarea, number, range, date, captchar 選択肢が多くても大丈夫!ドロップダウンメニュー ドロップダウンメニューとは、お問い合わせフォームで あらかじめ用意した選択肢をえらんでもらう場合に、その選択肢を上記イメージのようにドロップダウンのメニューとしてまとめる設定をさします。 ドロップダウンメニューなら、たとえば都道府県をえらんでもらうときのように質問の選択肢が多くても、お問い合わせフォームにその選択肢を全て表示する必要がなく見た目が悪くなりません。 ドロップダウンリストの設定• ドロップダウンメニューを利用する場合は、まずContact Form 7の「コンタクトフォームを追加 編集 」メニューの「フォーム」タブを表示します。 フォームの内容の中で、ドロップダウンリストを入力したい場所をクリックした上で、「ドロップダウンメニュー」をクリックします。 「フォームタグ生成」が表示されます。 以下の項目を入力して「タグの挿入」をクリックします。 必須項目 この質問をお問い合わせフォームの必須項目とする場合はチェックを入れます。 名前 ドロップダウンメニューで作る質問項目の名前を入力します。 任意の内容で結構です。 オプション ここに選択肢を入力します。 1行に1項目ずつ入力します。 複数選択を可能にする 選択肢を複数えらべるようにするためにはここにチェックを入れます。 空の項目を先頭に挿入する ドロップダウンメニューの先頭を空にしたい場合は、ここにチェックを入れます。 ドロップダウンメニューのタグが挿入されます。 この内容を以下の例を参考に編集します。 入力が終わったら「保存」をクリックします。 お礼をすぐに!自動返信メール お問い合わせフォームの自動返信メールとは、問い合わせを受け付けた旨のメッセージを記載したメールを、訪問者が入力したメールアドレス宛に自動的に送る機能のことをさします。 利用は任意ですが、自動返信メールが届いていれば、問い合わせがきちんと受け付けられていることがわかるので、訪問者は安心できます。 また自動返信メールには、フォームに入力した内容のコピーを記載することができるので、訪問者があとから入力内容を確認することが可能です。 自動返信メールの設定• 「コンタクトフォームを追加」 「コンタクトフォームの編集」 メニューにアクセスして「メール」タブをクリックします。 「メール」タブの一番下の方にある「メール 2 を使用」にチェックをいれます。 これで「保存」をクリックすると自動返信メールが送られるようになります。 なお「メール 2 を使用」の下には自動返信メールの内容が記載されています。 初期設定のままでも利用できますが、メールの件名 「題名」 や本文 「メッセージ本文」 を編集することも可能です。 お問い合わせフォームを作るなら「Contact Form 7」! Contact Form 7を使えば、お問い合わせフォームが簡単に作成・設置できます。 その上オプションをカスタマイズすれば、プレースホルダーテキストや自動返信メールといったよりフォームを使いやすくする機能を追加することも可能です。 サイトの訪問者とコンタクトをとるのにお問い合わせフォームは重要ですから、Contact Form 7で希望にあったフォームを作成ください。

次の

お問い合わせフォーム(ContactForm7)のデザイン追加|CARAT

お 問い合わせ フォーム デザイン

お問い合わせフォームを作るWebデザイン・テンプレート集よくあるお問い合わせページのようにフォームを設置する方法を紹介します。 通常、お問い合わせフォームを設置するためにはPHPの知識が必要だったり、場合によってはレンタルサーバーとSSLの契約をしたり別にSSLサービス会社の契約が必要だったり、なかなか敷居が高いものです。 そこでを利用してお手軽にお問い合わせフォームを設置する方法を解説します。 いい点• PHPの知識なしでもOK• 豊富なテーマからデザインを選択できる• Googleの高品質な共有SSLを利用 悪い点• デザインのカスタマイズができない• Googleのロゴが入ってしまう• 普段使いのアカウントではなくサイト運営用に新しく作るのもいいですね。 フォーム内容をつくる 新規フォームを作る 左側の「作成」をクリックして、さらに「フォーム」を選択します。 テーマやフォーム名を決める テーマやフォーム名を決めます。 あとで変更もできるので適当に決めても大丈夫です。 お問い合わせの項目を作る テキスト入力はもちろん、ラジオボタンやセレクトボックスなどいろいろできます。 フォームのタイプを変えたい時は「質問の形式」の項目の部分を変更しましょう。 1 質問内容を増やしたいときは「アイテムを追加」ボタンを押します。 2 質問項目の順番はドラッグ&ドロップで変更できます。 埋め込み用のソースの取得 質問内容が出来上がったら、確認ページ欄の「別の回答を送信するためのリンクを表示」のチェックを外しておきます。 他の項目はデフォルトでチェックが入っていません。 そのままにしておきましょう。 1 「フォームを送信」をクリックします。 2 さらに表示されたポップアップの「埋め込む」をクリックします。 3 設置する箇所のサイズが分かっている場合はカスタムサイズの設定もします。 あとでサイズの変更はできますので、サイズが分からない場合はそのままにしておきます。 表示されたiframeのソースをコピーしましょう。 4 フォームをサイトに設置する 前の項目で取得したiframeのフォームをHTMLに貼り付けます。 Webページのデザインに合うようにwidthとheightを調整します。 内容が長いとスクロールバーがでます。 その場合はスクロールバーが出なくなるまでheightの値を大きくして調整します。 お問い合わせ内容を確認する 回答を記録するためのシートを作る お問い合わせされた内容を確認するにはGoogle ドライブにアクセスし、先ほど作成したフォームを開きます。 「回答先を選択する」をクリックします。 表示されたポップアップは「新規スプレッドシート」にチェックが入り、作成したフォーム名+(回答)と書かれています。 そのまま「作成」をクリックします。 回答内容の確認をする きちんとシートにお問い合わせフォームの内容が記録されるか、テストします。 設置したフォームに適当に回答したあと、先ほどGoogle ドライブで作成した「お問い合わせ(回答)」のシートを見てみましょう。 質問の回答が表示されます。 開けっ放しにしておいても、新しく回答されると再読込などの操作を行うことなく、回答が追加されていきます。 以上でフォームは完成です! 作ってみたフォーム テーマは「ノート」を使用しました。 動作確認はご自由にお試しください。 読み込み中… 投稿ナビゲーション.

次の

超簡単!Wix フォームを使った問い合わせページの作り方

お 問い合わせ フォーム デザイン

確認用にチェックボックスを追加するだけで3つの効果!! Contact Form 7のキャプチャ画像はVersion 4. 2のものです。 【1】確認画面がなくても安心して使える 「Contact Form 7」は、確認画面がありません。 これは確認画面が日本特有の文化だからという事に関係するのですが、日本人としては 確認画面があると思ってボタンを押したらそのまま送信されてしまい、戸惑うユーザーが多いのも事実です。 このチェックボックスがあることにより、一度内容を確認してから送信ボタンを押してもらえるので安心です。 【2】入力途中の送信ミスを防げる 「Contact Form 7」は確認画面がない都合上、 入力途中でEnterキーをうっかり押してしまうと、入力途中のまま送信されてしまいます。 このチェックボックスがあることによりEnterキーを押しても未入力エラーがでるので、入力途中で送信してしまうミスを防ぐことができます。 【3】迷惑メール対策 お問い合わせフォームをつけたが、迷惑メールが多くて困っているという方も多いと思います。 お問い合わせフォームからの迷惑メールの投稿は自動投稿プログラムで送信されている事が殆どなのですが、このプログラムが必須項目のチェックボックスに気が付かないようです。 チェックを入れていないと送信できませんので、迷惑メール防止に繋がるというわけです。 タグが挿入されました。 チェックボックスの場所は、フォームの送信ボタンの直前に追加するといいです。 フォームにタグを挿入したら、「保存ボタン」を押せば完了です! 簡単ですので是非追加してみてみださい! 見逃してるかも!? 応答メッセージボックスの位置を変えてみよう! 「送信」ボタンを押したあとや、必須項目が未記入の場合に、応答メッセージが表示されます。 この応答メッセージが図のようにデフォルトではフォームの最下部に表示されるので、 入力項目が多いフォームの場合ではブラウザからはみ出してしまい、見逃してしまう可能性があります。 これでは応答メッセージに気づかずに、送信されたか不安になったり、送信ボタンを2度押しするユーザーもいるので、応答メッセージの位置を変えてみましょう! 応答メッセージの表示位置が変わりました。 これで、メッセージを見逃すことがないので安心ですね! タグを追加するだけですので、こちらも是非お試し下さい。 Google Analyticsでコンタクトフォームのコンバージョン(お問い合わせ率)を計測する方法 アクセス解析ツールのGoogle Analyticsで、 お問い合わせページが表示されたうちの、実際のお問い合わせがどれだけあったかの割合を計測することができます。 「Contact Form 7」はこれらのデータを簡単に計測するための機能が備えてあります。 是非、ここで設定方法をマスターしてください。 もちろんGoogleAnalyticsでの設定も必要なので、順番にみていきましょう。 目標の詳細画面 設定完了です! これでコンバージョン測定が可能になっているはずです。 実際に問い合わせを行ってみてから測定されるまでに 1日~2日かかりますので、時間が経ってからGoogleAnalyticsにコンバージョン測定が出るか試してみてください。 お問い合わせ率が少ないようでしたら、フォームの内容を見直したりと改善することができますので、こちらも是非設定してみてください。 【3】の「迷惑メール対策」のチェックボックスですが、 タグをコピペしてもうまくいきませんでした。 どうやら、バージョンアップで、仕様が変わったようで、 コンタクトフォーム編集画面の、「フォーム」タブ内に色々ボタンがつきました。 チェックボックスの場合、そのボタンの中の「チェックボックス」を押すと、 「フォームタグ生成: チェックボックス」が表示され、タグの設定を触る感じになっています。 チェックボックスの名前も、その画面内で決めるようになっています。 かなり変わってしまったようなので、 よろしければ一度、管理人さんも触ってみてください。 それでは、失礼いたします。

次の