ラフなイラストブログ

日常でふと思った事をイラストや漫画にしています

4つのメールフォームを使った感想【PC/スマホ画像有】

f:id:Dorotea:20161116121603j:plain

f:id:Dorotea:20161117054044j:plain

f:id:Dorotea:20161116151656j:plain

はてなブログの無料版を利用しているPCスキルのない初心者の記事です。

4つのサービスを利用した理由

ブロガーさんなどが使っているのを参考にしながら、理想的なものを探していたらその4つを比較検討してました。なのでそれ以外のサービスが劣っているわけではなく、視界に入らなかっただけです。

最終的に選んだサービスと理由

フォームメーラー(無料版)です。PCとスマホに設置できることと、独自URLにリンクできるので、なにかと便利だったからです。

簡単な紹介(個人的意見)

【忍者メールフォーム】

特徴:1つのIDで作成できるメールフォーム数は無制限。

感想:余計なものはないが一昔前のデザイン。昔よく見た気がする。

www.ninja.co.jp

【グーグルフォーム】

特徴:グーグルドライブでフォームの一元管理ができる。

感想:スタイリッシュではあるがやや使いづらい。

www.google.com

【Tayori】

特徴:ビジネスへの導入も簡単。

感想:オシャレ。本当はこちらを使いたかったくらい。

tayori.com

【フォームメーラー

特徴:特筆するところはないが、オールラウンダー。

感想:使いやすい。

www.form-mailer.jp

百聞は一見に如かず。画像をどうぞ。(PC&スマホ

【忍者メールフォーム】

項目を減らせばスマホの一画面に収まる。

f:id:Dorotea:20161116132417j:plain

f:id:Dorotea:20161116133805j:plain

【グーグルフォーム】

項目を減らせばスマホの一画面にぎりぎり収まる。余白たっぷりなデザイン。

f:id:Dorotea:20161116134547j:plain

f:id:Dorotea:20161116134601j:plain

【Tayori】

スマホでの最適化は、はてなブログの無料版ではできませんでした。今回はボタン型と埋め込み型を紹介。ボタン型はとてもかわいらしいですが画面をスクロールしても常に表示されるので、問い合わせない方にとっては目にやかましい。かも。さりげないアニメーションが使われているのはすごくテンション上がる。

f:id:Dorotea:20161116143756j:plainf:id:Dorotea:20161116144809j:plain

送信すると紙ヒコーキが飛んでいくかわいいアニメーションも。

f:id:Dorotea:20161116150226j:plain

f:id:Dorotea:20161116145303j:plain

 スマホでもバーが沢山…。一本で満足です。

f:id:Dorotea:20161116154536j:plain

【フォームメーラー

設置したフォーム。余分な設定は削除し、文字は拡大した。スマホ画面はスクロールする必要があるけれど、一番スッキリしたデザインだったので選んだ。

f:id:Dorotea:20161116155516j:plain

f:id:Dorotea:20161116160514j:plain

f:id:Dorotea:20161116160531j:plain

スマホではサイドバーが表示されないので、プロフィール欄にメールフォームのリンクを貼りましょう。

おまけ

気付いたらフォームボタンも作っていた。自分が作れるとは思わなかった。

f:id:Dorotea:20161116163022j:plain

せっかくなので今回設置した方法を載せときますね。※ちなみにスマホでは表示されません(有料版は未確認)。

簡単!フォームボタンの設置方法

まず画像を用意します。

ダッシュボード>デザイン>カスタマイズ>サイドバー>モジュールを追加>HTML>
下にある枠に次のコードをコピペします。


<a href='メールフォームのURL'  target='blank'><img src='画像のURL'></a>

この画面は閉じずにそのまま置いときます。

すでに作ってあるメールフォームのURLをコピーしてさっきの画面に戻り、
コード文中にある「メールフォームのURL」に上書きペースト。

次に、用意した画像を、はてなフォトライフや記事作成時の
「写真を投稿」からアップします。
アップした画像を右クリックし、「画像URLをコピー」します。

それを今度はコード文中の「画像のURL」に上書きペースト。
適用後、変更を保存するをクリックして完成です。

まとめ

PCスキルのない初心者が悪戦苦闘しながらメールフォームを設置した経緯は、同じような方の役に立つかなと思い、分かりやすいように記事を書きました。

それぞれのサービスでつまづいたところはいくつかありましたが、きりがないので省略しますね。

載せた画像はシンプルな仕様のものが多いですが、デザインのカスタマイズは色々できるので、他のバリエーションももちろんありますよ。

 

今回フォームを設置するにあたり、参考にさせていただいたサイトです。

コードは広野ヨウさんのこちらの記事から拝借しました↓

www.mayoinu.com

Tayoriに関しては、よしまさんの記事が参考になりました。

yoshimamo.hatenablog.com

それから、1枚目の画像で書いたある企業さんとは「レバレジーズ」さんです。

いくつかあるサービスの中の「レバテッククリエイター」というWeb・3Dクリエイターに特化した案件提案・転職支援サービスがあり、その特集記事で僕の記事を紹介してくださいました!

creator.levtech.jp

詳しくはこちらからどうぞ↓

dorotea.hatenablog.com

あなたのサイトにまだフォームがないなら設置をしてみてはいかがでしょうか?

おわり

広告を非表示にする