Zoho CRMのWebフォームをホームページにあったデザインに変更する方法

Zoho CRMのWebフォームは、埋め込みコードの3種類のうち「ソース」を選べば、HTMLとCSSを直接書き換えて自社サイトのデザインに合わせられます。

触ってはいけないのは1箇所だけです。 コード内に Do not remove this code とコメントが付いた行は、フォームのデータをZoho CRMへ渡すための記述なので、削除するとフォームが機能しなくなります。

デフォルトのまま貼り付けると、サイトの他のページと明らかに雰囲気が違う見た目になります。せっかく整えたホームページの中で問い合わせフォームだけが浮いていると、そこで離脱する人も出ます。

デザインを変えるには、どのコードを選びますか？

まずはじめに重要なのが、Webフォームを組み込む際に[ソース]を選択することです。Zoho CRMのWebフォームをホームページなどに埋め込む際は、3種類のコードが用意されています。

• ソース：HTMLとCSSによる埋め込み

• 組み込み：JavaScriptによる埋め込み

• iframe：iframeによる埋め込み

このうちHTMLとCSSがそのまま手元に出てくるのは[ソース]だけです。JavaScriptとiframeの形式では、デザインの指定がZoho側で完結してしまうため、サイトのCSSで自由に上書きできません。

Webフォームの画面の[組み込みオプション]にて、ホームページなどに貼り付けるためのソースコードを取得できます。

コードの先頭には何が書いてありますか？

組み込みオプションで取得したコードの先頭には、次のような注意書きが入っています。

Note :

• You can modify the font style and form style to suit your website.
• Code lines with comments Do not remove this code are required for the form to work properly, make sure that you do not remove these lines of code.
• The Mandatory check script can modified as to suit your business needs.
• It is important that you test the modified form before going live.

要点は3つです。

1. ウェブサイトに合わせてフォントやフォームのスタイルは変更してよい

2. Do not remove this code と書かれた行は削除しない

3. 公開前に、変更したフォームを必ずテストする

逆に言えば、この3点さえ守れば残りは自由に触れます。

変更してはいけないのはどこですか？

ソースコードをさらに見ていくと、早速削除してはいけない部分が登場します。下記の青線で囲った部分です。実際のWebフォームの画面には表示されませんが、フォームを通過したデータがZoho CRMに入るために必要な項目なので削除しないでください。

ただし、一番下から2行目の name=returnURL となっている部分の value には、Webフォーム送信後に遷移する先のページのURLが指定されているだけなので、こちらは変更しても問題ありません。

returnURLは、フォームをホームページに挿入してデザインを合わせたあとで、送信後の遷移先URLを変えたくなった場合などに触る箇所です。原則として、むやみに変更しないことをおすすめします。

デザインを変えるとき、何を押さえておきますか？

style以降の部分に関しては存分に変更できます。変更にあたって事前に押さえておきたいポイントが4つあります。

テーブル構造になっている

世の中のおおよそのWebフォームもそうですが、Zoho CRMのWebフォームもご多分に漏れず、テーブル構造になっています。

企業名	入力項目
部署名	入力項目
役職	入力項目
URL	入力項目

こんなイメージです。このようなテーブル構造になっているということを意識しながらソースコードを眺めてみましょう。

フォントや横幅は別々に設定されている

ソースコードの中に、次のように書かれている部分が多くあることに気づくはずです。

td style=nowrap:nowrap;text-align:left;font-size:12px;font-family:Arial;width:200px;

これは、それぞれの部分に対してどういったデザイン（フォントの種類、色、大きさ、テキストの位置、横幅）にするのかを指定しています。すなわちここを修正することで、デフォルトのデザインを変更できます。

フォントの大きさを変更したければ font-size:12px の部分を、フォントの種類を変更したければ font-family:Arial の部分を書き換えます。またこの部分を削除すれば、ホームページ側に設定されているスタイルが適用されます。

項目ごとに個別に指定されているため、まとめて変えたい場合は1つずつ書き換えるよりも、CSS側でセレクタを指定するほうが早く終わります。

項目名は文字コードに変換されている

Zoho CRMのWebフォームで一番気をつけなければならないのが、各項目の日本語の項目名が文字コードに置き換えられているという点です。

下記の図の青枠で囲った部分がそれに当たります。

例えば、始めにある

&#x4fla;社

は「会社」という日本語を示す文字コードになっています。ここは日本語表示になっていないので注意が必要です。のちのちわかりやすいように、この文字コードを日本語に書き換えておくと保守が楽になります。

Placeholderを活用する

Placeholderとは、下記の青枠で囲ったように、入力項目の中であらかじめどのような情報を入れるかを補助する機能です。これを入れておくことによって、どのような情報を、どのような形式で入れるべきかを、問い合わせをする人が判断できます。

Placeholderを使う際は

td input type=text class=form-control maxlength=30 name=Phone placeholder=03-1234-5678

このような形で入力しておくと、以下のように表示されます。

実際にどこまで変えられますか？

これを踏まえた上でソースコードを変更していきます。例えば当社の場合は以下のようなコードにしています。

こうすることによって、以下のように、ホームページの他の部分と遜色のないWebフォームができあがります。

デフォルトのコードから変えているのはスタイル指定とPlaceholderだけで、フォームの動作に関わる記述には触れていません。 見た目の差はほとんどCSSで作れます。

よくある失敗

1. 隠し項目まで消してしまう

画面に出ない行を「不要なコード」と判断して削除すると、フォームは送信できるのにZoho CRMへデータが入らない状態になります。送信テストで完了画面まで進んでも、CRM側に見込み客が作られないことがあるため、必ずZoho CRMのタブでレコードが増えたかまで確認してください。

2. 組み込み（JavaScript）やiframeで貼ってから、デザインを変えようとする

この2形式ではスタイルを外側から当てにくく、結局[ソース]で取り直すことになります。デザインを合わせる前提なら、最初から[ソース]を選んでください。

3. 文字コードのまま編集して、別の項目を書き換える

項目名が文字コードのままだとどの行がどの項目か読めず、電話番号の欄に会社名のPlaceholderを入れる、といった取り違えが起きます。実際のフォーム画面と並べて確認しながら進めてください。

4. 公開前のテストを省く

コードの先頭にも書かれているとおり、変更後のテストは必須です。必須項目のチェック、送信後の遷移先、CRMへの登録の3点を通しで確認してください。

5. 項目を増やしすぎる

デザインを整えても、入力項目が多いフォームは離脱します。見た目を直すタイミングは、項目を削れないかを見直す機会でもあります。

まとめ

Zoho CRMのWebフォームは、[ソース]形式で取得すればHTMLとCSSを直接編集でき、自社サイトと同じ見た目に揃えられます。触ってはいけないのは Do not remove this code の行だけで、それ以外のスタイル指定は自由に変更できます。

編集にあたっては、テーブル構造であること、スタイルが項目ごとに指定されていること、項目名が文字コードになっていることの3点を押さえておくと迷いません。公開前のテストでは、CRM側にレコードが入るところまで必ず確認してください。

フォームの作成手順や登録件数の考え方はZoho CRMのWebフォームの作り方と上限、入力形式そのものの設計はフォームの入力方式の選び方をご覧ください。Zoho CRMでできることの全体像はZoho CRMとはにまとめています。

当社はZoho認定パートナーとして導入・運用の支援を行っています。詳しくはZoho 導入・運用支援をご覧いただき、フォームの実装でお困りの場合はお問い合わせよりご相談ください。

FAQよくあるご質問

RELATEDZohoの新しい記事

出典・執筆：株式会社トライエッジ／向佐 望（CRMコンサルタント）。 2024年3月29日公開／2026年8月15日更新。