このは屋 職人 2022.04.17

    お問い合わせフォームを設置できる!Tayoriを解説

    Tayoriとは? お問い合わせフォームと⾔えばビジネス⽬的のWebサイトに設置するのは、もはや当たり前ですね。 お問い合わせフォームを設置する...

    記事を読む 読了目安 6 分 / AI時代の自作と内製化
    お問い合わせフォームを設置できる!Tayoriを解説
    AI × DIY × Small Business 読んで終わりではなく、自分の商売に戻す。

    記事の最後で、ネット集客を自分で整えるための無料テンプレートを受け取れます。

    Theme職人
    Updated2022年4月17日
    Next Step記事の末尾で無料テンプレートを受け取れます
    目次
    このは屋 | お問い合わせフォームを設置できる!Tayoriを解説
    このは屋 | お問い合わせフォームを設置できる!Tayoriを解説
    このは屋
    (生成AI×デジタルマーケティングスクール)
    スモールビジネス特化の学び舎。スモールビジネスオーナーに向けて、ネットから集客する方法、オンラインで商売する方法、労働集約型から知識集約型へ移行する方法、安定した継続的な収入源を確保する方法…etc。悔いの無い生涯を謳歌する為の、鼻歌まじりの商売と生涯を、ワンストップで、トータルにサポートしている。

    Tayoriとは?

    お問い合わせフォームと⾔えばビジネス⽬的のWebサイトに設置するのは、もはや当たり前ですね。

    お問い合わせフォームを設置することで売上にも影響してきます。

    電話でのお問い合わせに⽐べ、営業時間に縛られることがないためですね。

    中には、電話が苦⼿!という⼈もいるので、Web上から気軽にお問い合わせができるのは、ありがたいことです。

    せっかくお問い合わせをしようとした訪問者をそのまま逃してしまってはもったいないですね。

    このお問い合わせフォームですが、出来るだけ余計なものがなく、シンプルなデザインでわかりやすいものがいいです。

    ⼊⼒項⽬と必須項⽬が⼀⽬でわかるようなユーザビリティーが良いデザインだとお問い合わせもしやすいです。

    そんなわかりやすいデザインで、しかも専⾨的な知識も必要なしで、無料でお問い合わせフォームを作成できるのが「Tayori(タヨリ)」というサービスです。

    Tayoriの使い⽅

    Tayoriの使い⽅は、すごくシンプルです。

    画⾯にそって、必要な項⽬を⼊⼒していくだけなんです。

    まずは、ユーザー登録から。

    1.ユーザー登録

    Googleで「Tayori」と検索すると、検索結果の⼀番上にくる公式サイトに移動してください。

    このは屋 | お問い合わせフォームを設置できる!Tayoriを解説

    公式サイトに移動すると、画⾯中央に「無料で試してみる」のボタンと、メールアドレスを⼊⼒する項⽬がありますので、普段お使いのメールアドレスを⼊⼒してください。

    このは屋 | お問い合わせフォームを設置できる!Tayoriを解説

    次の画⾯で、登録画⾯に進みます。

    必要な情報を⼊⼒し、利⽤規約にチェックを⼊れ、「Tayoriに登録する」をクリックしま
    しょう。

    しばらくすると登録したメールアドレスにメールが届きます。

    メールに記載された「以下のURLを24時間以内にクリックしてご登録⼿続きを完了してください。」をクリックしてください。

    次の画⾯で承認完了とできますので、ログインボタンをクリックしましょう。

    これで、登録は完了です。

    フォームを作成

    登録が完了すると早速フォームの作成ができます。

    「フォームの追加」をクリックしてください。

    このは屋 | お問い合わせフォームを設置できる!Tayoriを解説

    次の画⾯で、フォーム名の⼊⼒をします。

    こちらではお好きな名前を⼊⼒してください。

    フォームタイプの選択では、ご⾃⾝の⽤途にあったものを選択してください。

    今回はブログ設置⽤なので、⼀番上の「簡易お問い合わせ⽤テンプレート」で進めていきます。

    このは屋 | お問い合わせフォームを設置できる!Tayoriを解説

    次に「フォーム編集」の画⾯が表⽰されます。

    ここでは、フォームの⼊⼒項⽬を設定できます。

    「設問追加」をクリックすると、⼊⼒項⽬を追加することができます。

    このは屋 | お問い合わせフォームを設置できる!Tayoriを解説

    郵便番号、住所など、様々な項⽬を追加することができます。

    このは屋 | お問い合わせフォームを設置できる!Tayoriを解説

    項⽬の右側に配置してある鉛筆マークをクリックすると、⼊⼒項⽬の詳細内容を設定できます。

    「⼊⼒補助⽂⾔」は、⼊⼒しておくことをオススメします。

    この⽂⾔があると、⼊⼒してもらいやすくなる傾向があるためです。

    「ゴミ箱」マークをクリックすることで、必要ない項⽬を削除することが出来ます。

    完了画⾯設定については、そのままで結構です。

    公開設定については、公開にしておきましょう。

    デザイン

    デザインでは主に

    1. 背景⾊
    2. ⾒出し
    3. ボタン

    の⾊を指定する事ができます。

    このは屋 | お問い合わせフォームを設置できる!Tayoriを解説

    ⾊はカラーコードで指定するのが、⼿っ取り早いので、以下サイトからお好きなカラーコードをコピペしましょう。

    【WEB⾊⾒本 原⾊⼤辞典 】
    http://www.colordic.org/

    デフォルトのままでも、⼗分ですがこちらで⾃分好みに⾊のカスタマイズができます。

    ロゴ設定では、ご⾃⾝の会社のロゴ写真をアップロードすることで設定することができます。

    フォームの設置

    最後にフォームの設置です。

    このは屋 | お問い合わせフォームを設置できる!Tayoriを解説

    こちらの画⾯からは、表⽰するフォームの種類を選択できます。

    1. スタンダード
    2. トーク形式

    で設定できます。

    スタンダードは、オーソドックスなお問い合わせフォームです。

    トーク形式は、チャットのような形式でお問い合わせができるもの。

    今回は、スタンダード形式で作成します。

    Googleアナリティクスをご登録の⽅は、IDをご指定ください。

    このは屋 | お問い合わせフォームを設置できる!Tayoriを解説

    設置⽅法ですが、

    1. コード埋め込み
    2. iframe
    3. リンク

    の3種類があります。

    今回は、コード埋め込みで配置したいと思います。

    次にボタンの種類をお好きなものから、指定してください。

    今回は、ポップボタンを選択します。

    このは屋 | お問い合わせフォームを設置できる!Tayoriを解説

    ポップボタンをクリックすると、詳細設定画⾯に移動します。

    1. ボタンのアイコン
    2. ボタンカラー
    3. ボタン透明度

    を設定することができます。

    このは屋 | お問い合わせフォームを設置できる!Tayoriを解説

    続いて、表⽰位置を設定できます。

    デフォルトの右下で問題ないと思います。

    このは屋 | お問い合わせフォームを設置できる!Tayoriを解説

    設置サイトドメイン設定では、ご⾃⾝のサイトのドメインを指定しましょう。

    注意点ですが、http://(https://)の部分は含めないでください。

    例えば、http://sample.comというURLがあったとします。

    このURLの「sample.com」の部分を指定して下さい。

    ⼊⼒後は、「ドメインを追加」をクリックしてくださいね。

    これで、設定は完了です。

    保存または、変更を保存ボタンをクリックしましょう。

    このは屋 | お問い合わせフォームを設置できる!Tayoriを解説

    設定が完了しましたら、上記のようなコードをコピーしましょう。

    コピーの部分をクリックすると、しっかり漏れなくコピーできます。

    コードは</body>タグの真上に設置しましょう。

    WordPressに設置

    では、早速WordPressブログに設置して⾏きたいと思います。

    </body>タグに指定する⽅法もあるのですが、この⽅法はテーマファイルを直接編集する必要があるので、今回はもっと簡単な⽅法を解説します。

    WordPressプラグイン「Head, Footer andPost Injections」を使⽤する⽅法です。

    このプラグインを使⽤することで、テーマファイルを直接編集せずにすみます。

    まずは、このプラグインをインストールしましょう。

    1. WordPress管理画⾯
    2. プラグイン
    3. 新規追加
    4. 検索窓に「Head, Footer and Post Injections」と⼊⼒しましょう

     このは屋 | お問い合わせフォームを設置できる!Tayoriを解説

    検 索 結 果 に 「Head, Footer and Post Injections」プラグインが表⽰されるので、そちらをインストールしてください。

    同時に有効化もしておいてください。

    有効化をすると、設定の中に「Header andFooter」が表⽰されるので、そちらをクリックし、設定画⾯に移動してください。

    このは屋 | お問い合わせフォームを設置できる!Tayoriを解説

    設定画⾯から「BEFORE THE </BODY>CLOSING TAG (FOOTER)」の項⽬にTayoriで作成したコードをそのままコピペしてください。

    最後に忘れずに「saveボタン」をクリックしてくださいね。

    このは屋 | お問い合わせフォームを設置できる!Tayoriを解説

    アイコンをクリックすると、ホップアップでフォームが表示されます!

    このは屋 | お問い合わせフォームを設置できる!Tayoriを解説

    実際にサイトを⾒てみると、このように表⽰されているのが確認できるかと思います。

    クリックするとフォームが表⽰されます。

    デザインも余計なものがなく、シンプルでわかりやすくおしゃれなフォームのため、お客さまも利⽤しやすいですね。

    編集後記

    このTayoriを利⽤することで、初⼼者でもコードの知識を必要とせずにフォームが作成できます。

    WordPressでは、Contact Form 7というプラグインで作成できるのですが、Tayoriを使った⽅法の⽅が簡単に作成できるのでご紹介しました。

    お客さまからのお問い合わせ内容は、管理画⾯の⽅から確認することができます。

    このは屋 | お問い合わせフォームを設置できる!Tayoriを解説

    お問い合わせメールの管理も、⼀元化でき⼤変便利ですね。

    その他、FAQ機能、アンケート機能などをご利⽤できるので、⼤変オススメなサービスです。

    お問い合わせフォーム作成を検討中の⽅は、ぜひご利⽤してみてはいかがでしょうか。

    Free Web App 読むだけで終わらず、少し触ってみる。

    無料ウェブアプリで、AIと一緒に考え、整理し、作る感覚を試せます。現在地や次に取り組むことを確認してみてください。

    無料ウェブアプリを見る
    Free Template Kit 読んだ内容を、実際の商売に落とし込む。

    ランディングページ、ブログ、広告、メール。AIと一緒に作り、直し、育てるための型を、まずは手元に置いてください。

    無料テンプレート全13種を受け取る
    GET THE KIT
    まずは、型を手に入れる。

    このは屋は、スモールビジネスが外注業者に依存せず、AIと一緒に自分の商売を作れるようになるための学び舎です。記事を読んで終わりにせず、手を動かすための型を受け取ってください。

    ランディングページ・ブログ・広告・メールまで対応 使い方の解説動画付き AIと一緒に磨くための実践テンプレート
    無料テンプレート全13種の内容イメージ

    無料テンプレート全13種を受け取る

    メールアドレスを入力して送信してください。すぐに受け取り方法をご案内します。

    送信後、無料テンプレート全13種の受け取り方法をメールでお送りします。
    ※「@icloud.com、@me.com、@mac.com等のアドレス」および携帯アドレスは、メールが届かない場合があります。できればGmailアドレス、またはパソコンのメールアドレスをご登録ください。入力間違いを防ぐため、コピー&ペーストでの入力をおすすめします。同業者の方のお申し込みはご遠慮ください。
    無料テンプレートを受け取る
    Next Action 読んだら、型で試す。
    無料テンプレートを受け取る
    このは屋

    スモールビジネスが、AIとテンプレートを味方に、自分の商売を自分で育てるための学び舎です。

    About

    このは屋とは 進め方ガイド 会社概要

    Learn

    無料テンプレート セミナー集 無料ウェブアプリ一覧

    Policy

    利用規約 個人情報保護方針 特商法表記

    Contact

    お問合せ よくある質問 トップページ
    © このは屋合同会社
    利用規約 個人情報保護方針 特商法表記 お問合せ