読者です 読者をやめる 読者になる 読者になる

Apple Life

「あ!これ面白い!」「あ!これ便利!」と共感できたら嬉しいです。

【はてなブログ】formrun(フォームラン)問い合わせフォームを作成してみた!

はてなブログ

f:id:applebaka:20170105213155j:plain
まいど!JOY(@appletksb)です!

ブログを始めてもうすぐ1年になりますが、未だに問い合わせフォームがありません。昨年は、投稿依頼時に手間を取らせてしまったので、今度いつ依頼が来てもいいように無料で簡単にできる問い合わせフォームを作成したので、ご紹介します!

スポンサーリンク

 

レビュー記事依頼

昨年、レビュー記事の投稿依頼があり1度だけ書かせていただきました。その記事がこちらです。iOSデバイスのデータ復元ソフトをいただいたので、使用したレビューを書きました。

依頼はメールでやり取りを行なったのですが、問い合わせフォームがないため初めは記事のコメントから依頼があり、そこからメールのやり取りという物凄い手間をとらせてしまいました。やはりいつそんな依頼があるかわからないので、問い合わせフォームは必要ですね。

ネットで「問い合わせフォーム」で検索していると、Googleが無料で簡単に作成できる問い合わせフォームがあるんですね。

www.google.com

もうここまで作成していましたが・・・やめました。
f:id:applebaka:20170103201930p:plain
別タブで問い合わせフォームを開く感じのをもとめて再度Googleで検索。そしてそこで出会ったのがこの問い合わせフォーム

form.run

無料で作成することができたので、簡単に作成方法をご紹介します。

スポンサーリンク

 

作成方法

f:id:applebaka:20170104184423j:plain

f:id:applebaka:20170104192901j:plain

  • 名前を入力(本名じゃなくてもいけましたよー)
  • メールアドレスを入力
  • パスワードを入力(ログイン時に必要になります)
  • 間違いないようにパスワードを2度入力
  • 「登録する」を選択

f:id:applebaka:20170104201756j:plain

  • 「チーム名」を入力(正直よくわかっていない、とりあえず入力しないと進めなかったのでブログ名にしておいた)わかる人教えてくださいw

f:id:applebaka:20170104202044j:plain

  • 「フォーム名」を入力(ここも正直よくわかっていない。無料で1つのみフォームを作成するつもりがないのでとりあえずお問い合わせと名前をつけました。わかる人教えてくださいw)

f:id:applebaka:20170104202511j:plain

  • いろいろカスタマイズできるところがありますが、そこは我慢してフォームクリエイターのところの「編集画面へ」を選択

f:id:applebaka:20170104202739j:plain

  • ここでは作成したいフォームのテンプレートを選択します。私は問い合わせフォームを作成したかったので、「お仕事ご依頼」の「選択」をクリック

f:id:applebaka:20170104203005j:plain

  • 上の「入力画面」を確認(問い合わせ入力画面)
  • 左側のフォームから追加したい項目を選びます
  • 不要な項目はゴミ箱のマークで消すことができます

f:id:applebaka:20170104203421j:plain

  • 「入力画面」から「完了画面」に切り替えます(問い合わせの送信完了後に表示する画面のカスタマイズ)
  • 表示するメッセージも自由にカスタマイズすることができるので自分なりに編集してみてください

f:id:applebaka:20170104203748j:plain

  • (入力画面)左上の「カバー」から画像を選択するとフォームの上の画像を変更することができます。

f:id:applebaka:20170104204041j:plain

  • 左側の「スタイル」の中ので、カラーテーマを変更することができます。ブログに合わせたい場合は、カラーコードを入力すると合わせやすいですね
  • 「送信」ボタンのカラーが変わります

f:id:applebaka:20170104204303j:plain

  • 「レイアウト」から「サイド」を選択すると先程までフォームの上にあった画像が左側に大きく表示されます。右側が問い合わせフォームになって、感じがガラッと変わりますね

f:id:applebaka:20170104204523j:plain

  • 「フルスクリーン」を選択するとフォームの背景が選択したテーマ画像に変わります。これいいですよね?MacBookが写ってるからかなw

 

f:id:applebaka:20170104210541p:plain

  • こんな感じで好きな画像を表示することもできるので、ご自身のブログのイメージを表示するといいかもしれませんね。私はとりあえずデフォルトの画像を使いましたw

 

f:id:applebaka:20170104210937j:plain

  • 「プレビュー」で画面を確認して、OKなら「更新」をクリック

 

f:id:applebaka:20170104211504j:plain

  • 更新すると問い合わせフォームのリンクが作成されるので、あとはブログに設置するだけでOKです!簡単ですよね。

 

f:id:applebaka:20170104211623p:plain

  • 完成したら自分でテキトーに名前やアドレスや内容を入力してテスト送信して確認しておきましょう

 

f:id:applebaka:20170104211749p:plain

  • 送信後にはカスタマイズした「送信完了画面」が表示されるのでここでも確認することができます。

ブログに導入

f:id:applebaka:20170104212931p:plain

  • 問い合わせフォームができたら早速ブログに設置。設置する方法はオシャレなカスタマイズしている人に聞いてください。(誰かカッコイイ問い合わせフォームのボタンを作成してください!!!)私は似顔絵のアイコンの下にある黄色いメールのやつが問い合わせボタンです。

 

f:id:applebaka:20170104213053p:plain

  • これで見やすいですかね。ここをポチっと押すと、新しいウインドウで問い合わせフォームの画面が表示されます。試しに「元気ですかー」って送らないでくださいね。一応「元気ですよー」って返事しますけどね。うそw

まとめ

まだブログに問い合わせフォームがない方には簡単で少しオシャレな問い合わせフォームはいかがでしょうか。問い合わせがきたら、登録しているメールアドレスに転送されるので見逃しません!もうこれで依頼が私に・・・フフフ。

 

誰かカッコイイボタンを作成してください!!(土下座)

 

最後まで、ありがとうございました!