更新は Twitterでもお知らせします☆

【Tayori】で簡単に、ブログにお問い合わせフォームを設置できちゃうよ☆

f:id:NUu:20170113210048j:plain

こんにちは!カエル(@_kaelu)です!\(^~^)/ゲロゲロ ♪

あれれ?はてなブログにはお問い合わせのフォームがついてないぞ!?

ってことで、無料のTayoriというメールフォームをこのブログに付けてみました!

その使い方、設置方法について今日はご紹介します\(^o^)/

 

Tayoriとは?

https://www.youtube.com/watch?v=d2xbxGWTtsw

あなたのホームページに簡単にフォームを作成し、お問い合わせの管理をよりシンプルに。

ブログや個人ページにもフォーム・FAQを無料で簡単に導入できます。

ひとことで言うと、

自分のサイトにお問い合わせフォームを

簡単に設置できるよ!ってやつです(^^)

デザインもシンプル、

お洒落で可愛らしいかんじなので

そういえばお問い合わせフォームは

まだ設置してなかったなぁ!って方は

ぜひやってみてください(^_-)-☆

(安心の無料です☆)

※このブログ(PC版)の画面右下に表示されてるメールマークのボタンです。

※デザインテーマを変更したので、現在は表示されておりません

上の動画を見て気に入った方は

この記事を読んでみてね☆

はてなブログにTayoriを設置する方法

まずはTayoriのホームページに行きます。

Tayori – 無料のカスタマーサポートツール

TOP画面の右上に、

【無料で新規登録】のボタンがあるので登録。

f:id:NUu:20170114145452j:plain

すると登録したメールアドレスに

【Tayoriへようこそ!】のメールが来るので、

f:id:NUu:20170114133245j:plain

メール内の【以下のURLを24時間以内にクリックしてご登録手続きを完了してください】をクリックします☆

そうすると

承認完了のこの画面が表示されるので、

f:id:NUu:20170113192701j:plain

ログインします。

次にこの画面が表示されたら

右上の【フォーム追加】ボタンをクリック☆

f:id:NUu:20170113192702j:plain

ここから

フォームを作成していきます!

フォーム名は【お問い合わせ】でも【メッセージ】でもなんでも自由に入力しましょう♪(後で変更可能です)

f:id:NUu:20170113192703j:plain

フォームタイプは個人ブログ用なので、一番上の【簡易お問い合わせ用テンプレート】のまま

【フォーム作成】ボタンをクリックします。

次にフォーム編集の画面が表示されます。

f:id:NUu:20170114150836j:plain

(ブログに設置したお問い合わせボタンがクリックされた時に表示される、文言などを細かに設定できます

ちなみに僕は【お名前】のフォーム名を

【あなたのお名前やニックネーム】に変更したくなりました。

その変更方法はまず、

【+設問追加】のボタンをクリックします。

f:id:NUu:20170113192704j:plain

そしてその中から

【一行テキスト】を選択して

f:id:NUu:20170113192708j:plain

【選択した設問を追加する】をクリックしてください☆

f:id:NUu:20170113192709j:plain

【一行テキスト】というフォームが新たに追加されたので、それをクリック☆

f:id:NUu:20170113192711j:plain

設問タイトルを【あなたのお名前やニックネーム】

入力補助文言を【入力してください】

必須チェックを行うにチェックマークをして

f:id:NUu:20170113192712j:plain

【編集終了】のボタンをクリック☆

元から表示されている【お名前】のフォームはもう不要になったので、

f:id:NUu:20170113192713j:plain

画面右隅のゴミ箱マークをクリックして消しちゃってください☆

僕はこんなかんじに設定しました(^^)b

f:id:NUu:20170113192714j:plain

そして【フォーム名】は、

カエルさんへのお手紙

f:id:NUu:20170113192716j:plain

【フォームの内容(説明)】は、

このブログの感想やコメント、なんでもお気軽にどうぞ☆ ゲロゲロ♪

にしました(笑)

みなさんも自由に、

楽しい文言にしちゃってください☆w

【完了画面設定】のところはイジらず、

f:id:NUu:20170113192717j:plain

【公開設定】は公開のままでOKです。

次はフォームデザインの画面になります。

f:id:NUu:20170114141433j:plain

ここも好きなようにカラーを変更しましょう☆

ちなみに僕はこんなかんじにしました。(^^)v

f:id:NUu:20170113192719j:plain

次にフォーム設置の画面です。

(もう少しで完了なのでガンバ!)w

表示するフォームの種類を

【スタンダード】【トーク形式】から選べます。

(僕はPCとスマートフォン、両方ともスタンダードにしました)

f:id:NUu:20170113192720j:plain

Googleアナリティクスもやってる方は、ここでIDを入力しておきましょう。

Tayoriのフォームは

以下の3種類の方法で表示する事が出来ます。

・コード埋め込みボタン

・iframe表示

・リンク貼付け

(それぞれの環境や用途により選択して、設置してね☆)

僕はコード埋め込みボタンで設置しました!(^^)

f:id:NUu:20170113192721j:plain

ボタンのデザインもカラーも好きなように変更できます(´∀`)♪

そして

3.設置サイト ドメインのところに

f:id:NUu:20170113192722j:plain

自分のブログの https:// の部分を抜いたURLを入力して追加してください。

例)

NG!→ https://〇〇〇.jp

OK!→ 〇〇〇.jp

※あと、最後に .com/のように

/(スラッシュ)がついていると表示されないみたいです!

次の画面でコードが表示されますので、

f:id:NUu:20170113192723j:plain

このコードをコピーして、

はてなブログ

デザイン

カスタマイズ

サイドバー

+モジュールを追加

HTMLにコードを貼り付けて適用

変更を保存する

で完成です!(*^^*)!

うまくできていると

あなたのブログ画面、右下に表示されているはずです!(^^)b

f:id:NUu:20170113192725j:plain

そのボタンをクリックすると、

にゅる~ん!と回転しながらお問い合わせフォームが現れてくれます☆

ポチ☆にゅる~ん!♪

f:id:NUu:20170113192726j:plain

(これ押すの超楽しい)w

おわりに

スマホの方にも表示するには、

はてなブログのPROに契約するか

(無料版でも)レスポンシブデザインにチェックを入れると、

表示されるみたいです!

詳しくはコチラ → Tayoriメールフォームのブログへの設置の仕方:はてなブログ

(ちなみに僕はまだ無料版なんですけど、レスポンシブデザインをONにすると表示が綺麗じゃなくなるテーマを使用しているので、とりあえずはPCの方だけに表示させてます。PRO契約にしたらスマホの方にも設置してみようかと思います)

※現在は違うデザインテーマを使用しているので 、使用しておりません

Tayoriのフォームは、

こんな使い方もできるみたいです!

・ブログのお問い合わせ

・会社のお問い合わせ

・オンラインショップの注文に関するお問い合わせ

・カタログやパンフレットの申し込み

・セミナーやイベントの参加予約

・アンケート

・レストランの来店予約

無料プランでも、

【すべてのメールフォームで通信はSSL暗号化】とのことで安心安全に使えますね!\(^o^)/

FAQ【よくある質問】ってのも、無料で簡単に作れるみたいです(^^)b

https://www.youtube.com/watch?v=HAXZyeJgw4U

そしてここまで書いて

この動画の存在に気づいたんですけど…

この動画を見れば、だいたい設置方法分かるんじゃね??

https://www.youtube.com/watch?v=9otZ-uYdDOo

うぉぉおおーい!!(´Д`)

この記事書くのに6時間はかかったんやぞーい!w

ちくしょう!!ちくしょう!!w

だけどこの記事がきっと、誰かの役に立つと信じて、今日はさよならをしたいと思います。( ´ー`) ウウゥ…

※追記※

この記事を書いた後にツイッターでTayoriの公式さんから、

「ご紹介ありがとうございます!」と言っていただけました!

良かった!この記事書いて

ほんと良かった…!(ToT)♪

ハイ!ということで、!

このブログについての感想やコメントが何かありましたらお気軽に、画面右下のメールマークを押して送ってくださいませ\(^o^)/

(現在は、PCはサイドバー右下、スマホは最下部のお問い合わせ欄からメッセージを送ってね!☆)

それじゃあ、またねん!(´∀`)ノ”

→ Tayori – 無料のカスタマーサポートツール

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です