フォーム関連の記事一覧



20181125-HubSpotのフォームのスタイルCSSを変える-00

皆さん、HubSpot使っていますか?


ウェブのMA(Marketing Automation/マーケティング・オートメーション)でよく聞くツールのひとつがHubSpotです。

HubSpotの簡単な説明をすると、ベースにCRM(Customer Relationship Management/顧客とのやり取りを管理すること)としての機能がベースにあって、訪問客を惹き付け(アトラクト)、関係を築き(エンゲージ)、満足させる(ディライト)機能(※)があり、この流れを自動化も含め、より効果的に進めていくためのツールです。

もう少し知りたい方は以下のページをご覧ください。

インバウンドマーケティングとは? | ハブスポット

※ー罎付ける(アトラクト) 見込み客に転換する(コンバート) 8楜匆修垢襦淵ローズ) じ楜劼鯔足させる(ディライト)という定義もあります。


HubSpotのCRMは便利です。複数の営業担当がいる場合、お客様とのやりとりを自動で記録でき、コメントや売上情報なども残せるので、他の担当者がHubSpotのサイトで記録されたやり取りを見ることで引き継ぎが簡単に行えます。HubSpotのCRMはサインアップ(登録)すれば、無料ですぐに使えます。


さて、検索エンジンやSNSからウェブサイトへ訪問した方が、資料請求やお問い合わせをするときに必要となるのはフォームの機能です。HubSpotでは、資料請求やお問い合わせなどで使えるフォーム作成の機能を持っていて、フォームに入力された情報はCRMへそのまま記録することができます。

フォームのレイアウトはドラッグ&ドロップで簡単にできるので、複雑なプログラムがわからない方にもオススメです。


このフォームですが、標準のままだとフォームのスタイルの関係で、入力欄やエラー表示がわかりづらいのです。


HubSpotの有料版(HubSpot Marketing Starter以上)を契約していると、簡単に直せるようですが、まだそこまで本格導入するまでは…という方向けに、今回は無料版のままでも、フォームのスタイルの変更をできる方法を紹介します。

記事の続きを読む



Yahoo!BBのページをスマートフォンで見ていたときに、この電話受付はなかなか良いな、参考にしようと思ったのでブログでシェアします。


●ウェブからの電話対応

そのページはYahoo!BBの ADSLのキャンペーンページです。

「お電話で今すぐお申し込み・ご相談」の下に「tel:」で始まるリンクが仕込まれた「電話をかける」ボタンがあります(なぜか「受付時間」という言葉がダブっていますが…)

「電話をかける」ボタンをタッチすると、電話アプリが立ち上がって電話が掛かります。


「電話をかける」ボタンのすぐ横に目立つ緑のカラーで「折り返し電話予約」ボタンがあります。

今回、いいなと思ったのはこの緑色のボタンです

20150802-Yahoo_BBのウェブから電話をかける-01

記事の続きを読む



今回もフォームの最適化について書いていこうと思います。


先日の「【Web制作】フォームの最適化しようと、いくつか表現を変えてみたテスト【初心者向け】(画像あり)」という記事の引用の中で紹介した「こんなにあった!シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由」(マミオン有限会社)のページで以下のアドバイスが書かれていました。

シニアのフォーム入力操作を観察していると、誤ってページから離脱してしまい、再びフォームのページに戻ったら最初から全部やりなおし…という悲しいシーンによく遭遇します。フォームからフォーカスが外れた状態なのに気付かず、文字を修正しようとしてbackspaceキーを押してしまうのです。

こうした悲劇を防ぐためには、上記のHOME’S介護のように確認メッセージを出す方法がよいでしょう。実装方法も簡単なので、費用対効果が高い対策ですね。

[jQuery] ページを離れる際に確認メッセージを出す方法(18th Tech Note)

こんなにあった!シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-シニアマーケティング、ウェブユーザビリティ評価

なるほど。Backspaceキーが「前のページに戻る」のショートカットキーになっていることに気がつかずに、または、意図せずショートカットキーの機能が有効になってページを移動してしまうというわけですね。


これは確かにストレスになります。


早速紹介されていたページを見て、jQueryのスクリプトを見てみました。

これはこのままでも使えるので、皆さん使ってみると良いと思います。

ページを移動しようとすると、以下の様な「このページから移動しますか? 入力したデータは保存されません。[このページから移動する][このページに留まる]」という確認用のダイアログが出てきます(画面はFirefox)。

20141218-jQueryでフォームページを移動する時に確認する-01


ですが、個人的な見地から、もう少し修正すると更に良くなると考えたので、修正版を公開します。

記事の続きを読む



小杉聖さんのFacebookの投稿を見て、自分が関わっているサイトのフォームを直してみようかなと思ってみた。


シニアだけでなく、いわゆる「初心者だから?」と自称するタイプの人を対象にしたホームページは、ここまでやっていいと思う。さすが・・・!

エラー項目の見せ方が素敵で目から鱗が落ちた。

こういうのってプラグインに頼ってるとなかなかできないよね。

入力欄は統合したほうがいいのも同意。

今は色々なjsライブラリあるし。

「名前と名字」って文言は、わざとなのかなあ?

こんなにあった!シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-シニアマーケティング、ウェブユーザビリティ評価

小杉 聖 - シニアだけでなく、いわゆる「初心者だから?」と自称するタイプの人を対象にしたホームページは、ここまでやっていいと思う。さ...
投稿 by 小杉 聖.


一気に変えるのではなく、少しずつ変えてみて、何が良いのか考えてみようと思います。


●とあるCMSの標準フォーム

まずはとあるCMSから出力される標準の形。

20141217-フォームの表示のさせ方-01

これって今でも見る形ですけど、「*」が何を表しているのか分かりづらい!! わかるかこんなの!

知っている人なら知っているでしょうけど、「*」は「必須」を意味しています。申し訳程度に「*は入力必須項目です」とフォームに書いてあるけど(それもフォームの末尾に!)、普通の人は分かりませんわ。

記事の続きを読む



このブログのフッター部分にはメッセージを送るフォームがあります。

このフォームで何も書かずに「確認する」ボタンを押してフォーム送信したらどうなるのでしょうか。

20140424-フォームコントロール-HTML5-01


ページが移動して(画面が遷移して)エラーが表示されます。

「名前を入力して下さい」「メッセージを入力して下さい」というエラーが表示されます。

20140424-フォームコントロール-HTML5-02


こういうパターン、一昔前にはよくありましたよね。フォーム送信した後にエラーが表示されるパターン。

一昔前のフォームであれば、これでも仕方が無いのですが、HTML5の時代です。フォームのエレメントに属性を付けるだけで、フォームを送信する前にエラーのチェックができるのです。

属性は5秒以内で付けられる簡単なものですので、フォーム入力がある場合、ぜひ付けておきましょう。

それではその属性を紹介します。Firefox 28・Internet Explorer 11・Chrome 34での動作も調べてみました。

記事の続きを読む



20121125-Microsoft-Community-質問フォーム-00

みなさん、コミュニティ(掲示板・フォーラムとも呼ばれます)を利用していますか?


コミュニティを運営する上で、できれば避けたいのが「よくわからないタイトルの書き込み」そして「ほとんど同じ質問が書き込まれること」です。

私はコミュニティを昔から運営しているワケではないですが、会社でDTP・印刷関連の掲示板の過去ログを掲載するサイトを作っていて、これは特に感じました。そして掲示板でもよくいわれていることです。

  • タイトルを付けないで書き込む
  • タイトルを読んだだけでは何が何だかわからない
  • 前にも同じ質問があった

これを少しでも解消できると、掲示板・コミュニティを運営する側、利用する側で、素早い回答と的確な回答、そして迅速な解決ができるようになり、よりよい体験ができるようになると考えています。



Microsoftのコミュニティのページを利用していたら、ちょっとこれはいいな、と思ったUI(ユーザーインターフェイス)になっていたので、紹介します。

記事の続きを読む



mixiの設定変更のところを見ていて。

mixiフォーム
*[mixi] 基本設定


へぇ。パスワードを入力し始めても「(新しいパスワード)」などの文字は消えないんだ。面白いね。


dl・dd・dtタグでフォームの意味を定義しているのね。
HTMLのタグとして意味が合っていて大変よろしいのじゃないかしら。


ただ、パスワードの文字が10文字を超えると文字が重なってしまって何か気持ち悪いけど…
記事の続きを読む



ブログ著者

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索