テーマの編集画面のカスタマイズ(旧バージョン)

テーマの編集画面のカスタマイズ(旧バージョン)

テーマの編集画面では、影、透明度、色、パターンなどを使用して、企業や組織のイメージをフォームに反映できます。これにより、モバイルを含むあらゆるデバイスで見栄えが良いフォームを作成できます。フォームのすべての要素を細かくカスタマイズできるため、ブランドの個性を際立たせることができます。

フォームの外観をカスタマイズするには:
  1. フォームを作成後、[テーマ]タブに移動します。

  2. [最初から作成する]または[Customize Form](フォームのカスタマイズ)をクリックします。
    最初から作成するの画像

  3. [フォームのカスタマイズ]では、以下の要素の外観をカスタマイズできます。

    1. フォーム

    2. サブフォーム

    3. 複数ページからなるフォームの各ページ

    4. お礼ページ

      フォームのカスタマイズの画像

フォームタブ

[フォーム]タブでは、以下の設定を行うことができます。



設定の手順について、それぞれ詳しく説明します。

フォームの背景のカスタマイズ

壁紙の追加

フォームの背景をカスタマイズしたり、フォームの各セクションごとに異なる背景を設定したりすることが可能です。必要に応じて、背景にパターンを設定したり、画像を使用したりすることができます。

パターンを背景に設定するには:
  1. [フォーム]タブで、[背景]セクションのドロップダウンメニューから[壁紙]を選択します。
  2. [背景の種類][パターン]から、パターンを選択します。
  3. [色]を選択し、必要に応じて[透明度]を調整します。
フォームの壁紙の画像

画像を背景として設定するには:
  1. [フォーム]タブで、[背景]セクションのドロップダウンメニューから[壁紙]を選択します。
  2. [背景の種類]から[画像]を選択します。デスクトップから画像をアップロードするか、[Search from Unsplash](Unsplashで検索する)をクリックして、Unsplashの高解像度画像を使用します。
  3. [色]を選択し、必要に応じて[透明度]を調整します。

    壁紙として設定される画像の画像

バナーの追加

バナーは、製品の宣伝や、自社のブランドやサービスを知ってもらうのに役立ちます。フォームの上部のスペースに、自社のビジネスに合ったバナーを追加できます。 
バナーの画像

  1. デスクトップから画像をアップロードします。対応している画像形式は、JPG、JPEG、PNG、BMP、GIFです。 
  2. アップロード後に画像の配置を設定することも可能です。

フォームの要素のカスタマイズ

ボックスのカスタマイズ

[ボックス]とは、すべての項目やボタンを含むフォームの一部を指します。 

ボックスをカスタマイズするには:
  1. [フォームのカスタマイズ][フォーム]タブの順に移動します。[ボックス]のドロップダウンメニューでは、レイアウト、枠線、角、配置、余白、影など、[ボックス]のさまざまな設定を行うことができます。
  2. [ボックス]の背景の色、透明度、パターンを変更できるほか、枠線の太さ、スタイル、透明度、色、[ボックス]の角のデザインを設定できます。また、[配置]では、フォーム内での[ボックス]の配置を設定できます。


    必要に応じて、フォームの幅、[ボックス]間の間隔、影の効果もカスタマイズできます。

    フォームのカスタマイズの画像

ヘッダーのカスタマイズ  

  1. [フォームのカスタマイズ][フォーム]タブの順に移動します。ドロップダウンメニューの[ヘッダー]では、ヘッダーの背景、枠線、角のデザイン、配置、フォームの幅、余白、影など、さまざまな機能を設定できます。
  1. ロゴの挿入 ブランドの認知度を高めるために、推奨される形式で自社のロゴをフォームのヘッダーとしてアップロードすることも可能です。 画像を挿入後、配置やサイズを調整できます。
ロゴの挿入の画像

フォームの本体のカスタマイズ               

フォームの本体とは、ボタンをのぞくフォームの入力項目で構成される部分です。



フォームの本体をカスタマイズするには、[フォームのカスタマイズ][フォーム]タブの順に移動します。ドロップダウンメニューから[本体]を選択し、要件に合わせてフォーム本体の機能を自由に変更できます。
  1. 背景、枠線、角のデザイン、配置、フォームの幅、余白、影などの設定も変更可能です。
  2. フォーム本体の背景の色、透明度、パターンを変更したり、フォーム本体の幅、スタイル、透明度、色を変更したりもできます。

項目のカスタマイズ

項目のボックス
項目のボックスとは、フォーム内の各項目を囲む部分を指します。



フォーム内の項目をカスタマイズするには、ドロップダウンメニューから[フォームのカスタマイズ][フォーム]タブの順に移動して、[項目]を選択します。
[項目のボックス]では、項目のボックスの背景、枠線、角のデザイン、余白をカスタマイズできます。また、項目のボックス内のテキストのフォントも変更できます。

項目のカスタマイズの画像

 

すべての項目
[すべての項目]では、項目のボックスの背景、枠線、角のデザイン、フォント、余白、影をカスタマイズできます。



セクション 
フォームに個別のセクションがある場合、セクションごとに背景、枠線、角のデザイン、フォント、余白などの設定をカスタマイズできます。

表形式の選択肢
フォームに[表形式の選択肢]項目がある場合、項目内の質問と回答の色、フォント、スタイル、フォントサイズをカスタマイズできます。

選択肢
選択肢形式の項目がある場合、項目内の選択肢の色、フォント、スタイル、フォントサイズをカスタマイズできます。

スタイルの選択
[スタイルの選択]では、[選択肢]項目内の[ラジオボタン][チェックボックス]のテンプレートのスタイルをカスタマイズできます。


評価、スライダー
フォームに[評価]/[スライダー]項目が含まれている場合、[評価]項目のスタイルやサイズの編集、枠線のカスタマイズ、項目の一部の選択状態(選択済み/未選択)に応じた色の選択が可能です。

複数選択
フォームに[複数選択]形式の問題が含まれている場合、項目内の選択肢の色、フォント、スタイル、フォントサイズをカスタマイズできます。

選択リスト

フォームに[選択リスト]項目がある場合、[選択リスト]のスタイルをカスタマイズできます。[選択リスト]のスタイルを設定し、[Type 2]のスタイルを使用することで、リスト内から必要な項目をすばやく見つけるための選択肢を追加できます。 

フッターのカスタマイズ 

フッターとは、フォーム内のすべてのボタンが配置されている部分を指します。[フォームのカスタマイズ][フォーム]タブ→[フッター]では、背景、枠線、角のデザイン、配置、フォームの幅、余白、影など、フッターのさまざまな機能をカスタマイズできます。


フォームのボタンのカスタマイズ

ボタンには、[送信][保存][確認]の3種類があります。[フォームのカスタマイズ][Button](ボタン)→[幅]で、ボタンのラベルの幅をカスタマイズできます。
[送信]ボタンのセクションに移動すると、[送信]ボタンのラベルの背景、枠線、角のデザイン、フォント、配置、余白、影の設定を変更できます。

 送信ボタンのカスタマイズの画像


フォームに[保存]および[確認]ボタンがにある場合、それぞれのドロップダウンのメニューから機能を変更できます。

サブフォームタブ

フォームにサブフォームが含まれている場合は、必要に応じてサブフォームをカスタマイズできます。

サブフォームのボックス 

サブフォームをカスタマイズするには、[サブフォーム]タブに移動し、ドロップダウンメニューから[サブフォーム][ボックス]を選択します。
サブフォームのボックス

サブフォーム項目 

  1. [サブフォーム]の項目をカスタマイズするには、[サブフォーム]タブでドロップダウンメニューを使用して、[項目]を選択します。[項目のボックス]では、[項目のボックス]の背景、枠線、角のデザイン、余白、フォントをカスタマイズできます。
  2. サブフォームに選択肢形式の項目がある場合、項目内の表示内容の色、フォント、スタイル、文字サイズをカスタマイズできます。
  3. [スタイルの選択]の[選択肢]項目内の[スタイルの選択]で、テンプレートのスタイルを選択できます。
  4. サブフォームに[評価]項目が含まれている場合、[評価]項目のスタイルやサイズを編集したり、項目の一部の選択状態(選択済み/未選択)に応じた色を選択したりすることができます。
  5.  フォームに[複数選択]形式の設問が含まれている場合、項目内の選択肢の色、フォント、スタイル、文字サイズを編集できます。

ポップアップ形式のサブフォーム 

ポップアップ形式のサブフォームを選択している場合は、[Pop-up](ポップアップ)→[Card](カード)セクションで、背景、枠線、角などのポップアップの表示設定や、入力内容のフォントを編集できます。

ページタブ

ページ数の多いフォーム
ページ数の多い、長いフォームは、記入するのが退屈に感じられることがあります。フォーム内のページのデザインをカスタマイズして、ページ数の多い長いフォームを魅力的に仕上げましょう。
[フォームのカスタマイズ][ページ]タブでは、ページそのものをカスタマイズできるだけでなく、ページ上のページ移動ボタンといった細かい部分までカスタマイズできます。

ページのカスタマイズ

  1. 背景、枠線、角、配置、余白など、ヘッダーの機能をカスタマイズするには、ドロップダウンメニューの[ページ][ヘッダー]から行うことができます。
  2. 各ページのタイトル部分に表示される内容に使用されるフォント、色、スタイル、サイズは、[ページ][タイトル]から設定できます
  3. フォームの閲覧済みページと未閲覧ページのフッターの番号や色は、[ページ][Number](番号)セクションでカスタマイズできます
    ページのカスタマイズの画像

ページ移動ボタンのカスタマイズ 

  1. [ページ移動][Button](ボタン)セクションでは、ページ移動ボタン([次へ][戻る])の背景、枠線、角、フォント、配置、間隔、影などの設定をカスタマイズできます。
  2. ページの閲覧状況を示すページ移動バーの色変更や、ページ内でのバーの配置間隔は、ドロップダウンメニューから[ページ移動]を選択して、カスタマイズします。

    ページ移動ボタンのカスタマイズ

お礼ページタブ

お礼ページでは、フォームの送信後に回答者を任意のページにリダイレクトし、お礼のメッセージを表示できます。[確認メッセージと移動先URL]の設定でお礼ページを設定したり、回答内容に応じて、異なるお礼ページに回答者をリダイレクトするようにフォームルールを設定したりすることができます。
お礼ページの外観は、必要に応じてカスタマイズできます。実行するには:
  1. フォームを作成後、[テーマ]タブに移動します。

  2. [Customize Form](フォームのカスタマイズ)をクリックします。

  3. [Customize Form](フォームのカスタマイズ)の[お礼ページ]タブで、お礼ページの[標準]のスタイルを[Custom](個別指定)に変更します。

  4. お礼ページのテーマをフォームのカスタマイズに合わせて表示する場合は、[フォームのデザインを使用する]を選択します。選択すると、[ボックス]および[壁紙]のカスタマイズ設定がお礼ページに反映されます。

  5. お礼ページでは、壁紙、ボックス、ボタン、アイコンをカスタマイズできます。

壁紙:背景としてパターンや画像を設定できます。[色]を選択し、必要に応じて[透明度]を調整します。

ボックス:ボックスでは、背景、枠線、角、配置、余白、色、透明度、背景のパターンなど、ボックスに関するさまざまな機能を設定できます。また、ボックスの枠線や角について、幅、スタイル、透明度、色を変更することもできます。
ボタンとアイコン:お礼ページでは、ボタンの背景、枠線、角、フォント、余白、影、アイコンの枠線をカスタマイズできます。

お礼ページのカスタマイズ

フォームのカスタマイズに関するヒント

フォントの設定変更                                  

フォームの各セクションにあるテキストの要素のフォントの種類、サイズ、色を変更できます。
フォントの設定を変更するには:
  1. [Form](フォーム)、[サブフォーム][Page](ページ)タブで、フォントの設定を変更するフォームの要素を選択します。
  2. [Font](フォント)をクリックします。
  3. テキストの要素をカスタマイズするには、色、フォントの種類、スタイル/太さ、文字サイズを選択します。

影の追加   

フォームに影の効果を追加することで、フォームをより魅力的にカスタマイズできます。
影を追加するには:
  1. [Form](フォーム)、[サブフォーム][Page](ページ)タブで、フォントの設定を変更するフォームの要素を選択します。
  2. [影]をクリックし、[影]の範囲と色を指定します。 

枠線の挿入    

フォーム全体やフォーム内の特定のセクション、送信ボタン、フォームのフッター/ヘッダー、セクション区切りなどに枠線を追加できます。
枠線を追加するには:
  1. [Form](フォーム)、[サブフォーム][Page](ページ)タブで、枠線を追加するフォームの要素を選択します。
  2. [枠線]をクリックし、枠線の幅、スタイル、色を変更し、透明度を調整します。 

配置の変更   

フォーム、フォームヘッダー、送信ボタンなどの配置を変更することができます。
配置を変更するには:
  1. [Form](フォーム)、[サブフォーム][Page](ページ)タブで、配置を変更するフォームの要素を選択します。
  2. [配置]をクリックし、必要な配置を設定します。

フォームの幅の変更    

フォームの幅は、必要に応じて調整できます。
フォームの幅を変更するには、[Form](フォーム)タブの[Form](フォーム)セクションにある[ボックス]を選択し、[フォームの幅]を選択します。
  1. フォームの幅を固定するには、[標準]を選択し、フォームの幅をピクセル単位で指定します。幅は320~1,200pxの間で入力します。
  2. フォームの幅を画面サイズに合わせて自動で調整するには、[画面に合わせる]を選択します。
「お礼ページ」のカスタマイズについては、こちらをご参照ください。




              Zoho Campaigns Resources

                Zoho WorkDrive Resources




                  • Desk Community Learning Series


                  • Digest


                  • Functions


                  • Meetups


                  • Kbase


                  • Resources


                  • Glossary


                  • Desk Marketplace


                  • MVP Corner


                  • Word of the Day


                  • Ask the Experts









                                  • Related Articles

                                  • Authorize.Net

                                    概要 決済サービスとしてAuthorize.Netを選択した場合、以下の手順を実行します。 アカウント情報 [アカウント情報]に[APIのログインID]と[トランザクションキー]を入力します。 [署名キー]を入力します。取得方法については、以下の説明をご参照ください。 支払いを受け取る[通貨]を選択します。 [決済額]を入力します。決済額は、[固定額]に設定するか、フォームの項目から値を取得して[決済額]欄に自動で入力することが可能です。 ...
                                  • テーマのギャラリー

                                    目次 テーマのギャラリーからのテーマの適用 新しいテーマの作成 組織のユーザーへのテーマの公開 組織のテーマの使用方法 テーマのギャラリーからのテーマの適用 テーマのギャラリーには、フォームに適用可能な、あらかじめデザインされたテーマが用意されています。また、独自のテーマを作成してフォームに適用したり、他のフォームで再利用できるよう保存したりすることもできます。 既存のテーマを使用するには: フォームを作成後、[テーマ]タブに移動します。 ...
                                  • ブラウザの自動保存機能

                                    お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 概要 フォーム回答者がフォーム入力中に、タブを閉じてしまったり、インターネット接続が切れたり、デバイスの電源が落ちたりすると、入力内容が失われて最初からやり直さなければならない場合があります。Zoho Forms ...
                                  • テーマのカスタマイズ(新しいテーマビルダー)

                                    テーマの編集画面を使用すると、企業や組織の雰囲気を反映した魅力的で操作しやすいフォームを作成できます。企業や組織の印象に合わせてレイアウトを調整したり、目的に合ったフォントを選んだりすることが可能です。また、ヘッダー、バナー、ボックス、ボタンなど、それぞれの要素を自由に設定して、ほかのフォームとの差別化を図れます。テーマの編集画面を活用することで、印象的で業務の目的に合ったフォームを作成できます。 フォームのテーマをカスタマイズするには: フォームを作成後、[テーマ]タブに移動します。 ...
                                  • 区切り線

                                    お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 Zoho Forms の区切り線フィールドを使用すると、フォーム内に水平線を挿入して、フォームの各部分を分けることができます。フォームのレイアウトを整理するための視覚的な区切りとして機能し、フォームのデザインに合わせてスタイルを設定できます。 セクション ...

                                  Resources

                                  Videos

                                  Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                  eBooks

                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                  Webinars

                                  Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                  CRM Tips

                                  Make the most of Zoho CRM with these useful tips.