フォトイレブン

写真に関する事、Photoshop 上達へ向けての記録です。Photoshopの可能性をひたすら探究しています。

はてなブログにお問い合わせフォーム tayori を設置する方法

Tayori で お問い合わせフォーム つくりました!

 

pcではサイドバー下に、スマートフォンでは右下にメールのボタンが設置されました!

 

せっかくなんで、はじめてのお問い合わせフォーム設置にあたってのやり方や感想などお伝えできたらなとおもいます。

 

はじめは、グーグルフォームでつくっていたのですが、無料でもっといいフォームないかなと検索していたら Tayori にたどりつきました。

 

やり方は簡単でしたが、なんせはじめてだったのでつまずいた場面もあったのでそんなのも含めて書いていこうとおもいます。

 

※なお、こちらはブログに貼り付けるために自分が行った作業になりますので違う目的でつかわれる場合や(他にもいろいろできるみたいです)、間違ってる場合もありますのでご了承ください。

 

 

 

 

 

まずは Tayori に登録

 

新規フォームの作成

 

f:id:kyou33235:20201029111449j:plain

このような画面になったら 新規フォームを作成

 

 

f:id:kyou33235:20201029111722j:plain

簡易お問い合わせ用テンプレート を選択

 

 

f:id:kyou33235:20201029111922j:plain

このような画面になりますので、変更なければ右上の 変更を保存(ぼくはこのまま進みました)

 

 

f:id:kyou33235:20201029113341j:plain

こうなります

 

PC用リンクの作成

 

f:id:kyou33235:20201029113420j:plain

まずはpc用をつくります。今回は リンク方式 を選択してみました

選択し右上の次へ

 

 

f:id:kyou33235:20201029114420j:plain

フォームの種類はスタンダード で右上のURLを作成

 

作成されたURLをコピーし

はてなブログの画面へ

 

はてなブログに貼り付け

 

f:id:kyou33235:20201029115330j:plain

管理画面の デザイン → スパナのボタン

サイドバー → モジュールを追加 

リンクボタンをクリックし 

タイトルに お問い合わせ

リンクのタイトルに お問い合わせフォーム

その右に先ほどコピーしたhttpからはじまるURLをペースト

 

そして、適応 → 変更を保存する を押すのを忘れずに(つまづきました)!

 

 

スマートフォンへの設定①

f:id:kyou33235:20201029124527j:plain

フォーム管理 画面から 設置 を選択

 

 

f:id:kyou33235:20201029125848j:plain

コチラの画面になりますので、 設置方法の変更を開始 をクリック

 

 

f:id:kyou33235:20201029130100j:plain

スマートフォン用なので小さいボタンがいいかと思い、丸型ボタン方式 を選択後

画面右上 次へ をクリック

 

 

f:id:kyou33235:20201029130421j:plain

ボタンの種類 ボタンカラー 透明度 を選び

 

 表示するフォームの種類を選択してください 

は スタンダード

 

そして、

設置サイト ドメイン

https://    ~~~      /   の、 https:// と 最後の /

は省いて入力してください(つまづきました)

 

表示位置の設定を行ってください

pc    右  スマートフォン  右

 

右上のコードを作成 をクリック

 

出てきたコードをコピー 

 

 

スマートフォンへの設定②

 

はてなブログ 管理画面 → デザイン → スマートフォンのボタン

 

f:id:kyou33235:20201029132746j:plain

コチラの画面で、先ほどのコピーを貼り付ける

で、必ず 変更を保存する をクリック!

 

 

 

f:id:kyou33235:20201029140608j:plain

 

出来上がり、お疲れさまでした!

 

 

まとめ

 

もっといろんな機能・設定があるとおもいますが、はてなブログで無料で出来る範囲での紹介をさせていただきました。

 

少し長くなってしまいましたが、できるだけわかりやすくしたつもりです。

紙飛行機が飛んで行くアニメーション?などとても気に入りました。

 

まだ、お問い合わせフォーム設置してない方や、フォーム乗り換えを検討されている方の参考になればとおもいます。

 

tayori.com

 

ありがとうございました!