HubSpotのフォームのCSSを変更して、フォームを入力しやすくするための方法を紹介。Automation/マーケティング・オートメーション)でよく聞くツールのひとつがHubSpotです。Management/顧客とのやり取りを管理すること)としての機能がベースにあって、訪問客を惹き付け(アトラクト)、関係を築き(エンゲージ)、満足させる(ディライト)機能(※)があり、この流れを自動化も含め、より効果的に進めていくためのツールです。知りたい方は以下のページをご覧ください。4顧客を満足させる(ディライト)という定義もあります。HubSpotのCRMは便利です。複数の営業担当がいる場合、お客様とのやりとりを自動で記録でき、コメントや売上情報なども残せるので、他の担当者がHubSpotのサイトで記録されたやり取りを見ることで引き継ぎが簡単に行えます。HubSpotのCRMはサインアップ(登録)すれば、無料ですぐに使えます。検索エンジンやSNSからウェブサイトへ訪問した方が、資料請求やお問い合わせをするときに必要となるのはフォームの機能です。HubSpotでは、資料請求やお問い合わせなどで使えるフォーム作成の機能を持っていて、フォームに入力された情報はCRMへそのまま記録することができます。フォームのレイアウトはドラッグ&ドロップで簡単にできるので、複雑なプログラムがわからない方にもオススメです。このフォームですが、標準のままだとフォームのスタイルの関係で、入力欄やエラー表示がわかりづらいのです。Starter以上)を契約していると、簡単に直せるようですが、まだそこまで本格導入するまでは...という方向けに、今回は無料版のままでも、フォームのスタイルの変更をできる方法を紹介します。]Loading...HubSpot標準のフォームのスタイルの問題点HubSpotの無料版で標準のスタイルのフォームは以下のような感じです。出典:お問い合わせ(ペーパーグッズのグラシン工房「そ・か・な」)個人的には以下の問題点があると思います。必須項目が「*」しか表示されておらず不親切。入力に不備があり、エラーになっても、枠線が赤くなるだけでわかりづらい。項目名(ラベル)が他の文字と同じ文字スタイルで区別が付きづらいそれぞれの入力項目が近すぎるこれらを解消します。作業手順HubSpotでフォームの作成を行い、外部ページに埋め込むコードを取得しておいてください。こんな感じのコードですね。}});</script>そして、このフォームを埋め込むページにjQueryをロードしてください。3.3.1をロードする場合は、こんな感じのコードですね。src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>なお、jQueryをロードしないと以下の説明で出てくるコードは動作しません。HubSpotのフォームのコードを以下のように変更します。"XXXXXXXXX"の後に「,」(カンマ)を入れて、onFormReadyというパラメーターを記述します。することで、HubSpotのフォームの準備ができたときに、onFormReadyに書かれたプログラムが動作します。何をしているのかを説明すると、HubSpotのフォームはiframeで生成されるので、その中のheadタグにスタイルを追加しています。スタイルでは以下のことを設定しています。{font-weight:bold;}→ラベルの文字を太字に変更し、区別できるようにするスタイル変更後の表示スタイルを変更すると、全体の表示としては以下の画像のように変わります。アニメーションGIFだとこんな感じ。標準のスタイルでは入力内容にエラーがあった場合、以下の画像のようになります。スタイル変更後は以下の画像のようになります。ラジオボタンの項目で入力内容に不備があると以下の画像のように変わります。コードを追加するだけなので簡単でしたね。それではよいHubSpotライフを。問題点このスタイル(CSS)ではチェックボックスの項目を必須項目にしたときのエラーで背景色の色が変わりません。この方法は、CSSを直に書いて追加するものなので、複雑なカスタマイズの場合は、記述が長くなってしまうところが問題です。CSSファイルを作成して読み込むようにした方が管理しやすくなるように思えますが、その方法だと複数行テキストの項目(<textarea>)の行を大きくしたときに、フォームが最初に表示された状態でフォームの一部が欠けて表示されるのでおすすめできません。(iframe内の要素の高さの変更を検知していないので溢れている)フォームの要素をクリックすると、欠けて表示されていた部分も表示されるのですが、あまり気持ちの良いものではありませんね。注意点:同じページに複数のフォームを設置している場合は...同じページ内のHubSpotのフォームすべてのスタイル(CSS)を変更するので、ひとつだけスタイルを変更したいときは、「function($form){...}」内のセレクターをID指定などで限定してください。jQueryを読み込むのか?onFormReadyのパラメーターのためにjQueryが必要です。純一・jdash2000ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。サーバー管理などをしています(前はDTPオペもやっていました)。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。Typeで構築されています)。Reserved.RSSフィードプライバシーポリシ。