Jetpackフォームのスタイルを設定する

ブロックコントロールを使ってJetpack Formsをカスタマイズし、サイト独自のデザインに合わせます。

ページまたは投稿にJetpackフォームブロックを追加すると、その外観をサイトのデザインに合わせて細かく調整できます。このガイドでは、フィールド幅を調整し、色を変更し、特定のフィールドにカスタムスタイルを適用し、サイト全体のすべてのフォームで統一感のある外観を設定する方法を説明します。

動画チュートリアルMD

Jetpackで作成したフォームを管理およびスタイル設定する方法を説明する動画です。フォームの外観の調整、各フィールドの表示幅の制御、送信後に訪問者に表示する内容の設定について解説します。

フォームをカスタマイズするMD

フォームの色を調整するMD

フォーム全体の色は1か所で変更できるため、各フィールドを個別に編集する必要はありません。

フォーム全体の色を変更するには：

1. フォーム内部のフィールドではなくフォーム全体を選択するため、エディターでフォームブロックの外側の端をクリックします。
2. 右側のサイドバーでブロック設定パネルを開き、スタイルタブをクリックします。これは、黒と白に分かれた円のようなアイコンです。
3. 表示されるテキスト色、背景色、その他の色のプロパティを調整します。
4. エディター上部の保存または更新をクリックして、変更を適用します。

フォームに背景画像を追加するMD

フォームまたは個々のステップブロックに背景画像を設定できます：

1. フォーム内部のフィールドではなくフォーム全体を選択するため、エディターでフォームブロックの外側の端をクリックします。
2. 右側のサイドバーでブロック設定パネルを開き、スタイルタブをクリックします。これは、黒と白に分かれた円のようなアイコンです。
3. 背景画像を追加します
4. エディター上部の保存または更新をクリックして、変更を適用します。

サイト全体のすべてのフォームに統一したスタイルを設定するMD

WordPressサイトでブロックテーマを使用している場合は、公開するすべてのフォームに適用される1つのビジュアルスタイルを定義できるため、各フォームを個別にスタイル設定する必要がありません。これはサイトエディターのスタイルパネルで管理します。

1. WordPressのダッシュボードで外観 → エディターに移動します。
2. 左側のパネルのデザインセクションで、スタイルをクリックします。
3. スタイルパネルの下部にあるブロックをクリックします。
4. ブロックタイプの一覧からフォームを見つけてクリックします。
5. 好みに合わせて、色、タイポグラフィ、余白の設定を調整します。
6. 保存をクリックして、これらの設定をサイト全体に適用します。サイト上のすべてのフォームにこのスタイルが反映されます。

📝 注：サイトエディターは、ブロックテーマ（フルサイト編集テーマとも呼ばれます）を使用しているWordPressサイトでのみ利用できます。ダッシュボードの「外観」に「エディター」が表示されない場合は、現在のテーマがこの機能に対応していません。ブロックテーマに切り替えると、この機能を利用できるようになります。

フィールドの幅を調整するMD

Jetpackフォームブロック内の各フィールドは、幅を自由に設定して表示できます。これにより、フィールドをコンパクトな横並びのレイアウトに配置したり、コンテナ全体に広げたりできます。

フォームフィールドの幅を変更するには：

1. WordPressのブロックエディターで投稿または固定ページを開きます。
2. 幅を調整したいフィールドをクリックします。
3. 右側のサイドバーでブロック設定パネルを開きます。
4. スクロールして幅の設定まで移動し、25%、50%、75%、または100%。

💡 ヒント：2つのフィールドを同じ行に配置するには、両方を50%に設定します。

個々のフィールドに異なるスタイルを適用するMD

デフォルトでは、フォーム内のすべてのフィールドで同じスタイル設定が共有されます。特定のフィールドだけを他と異なる見た目にしたい場合は、そのフィールドをグループから分離して個別にスタイル設定できます。

1. エディターツールバーから利用できるリスト表示パネルを使って、カスタマイズする特定のフィールドを見つけて選択します。エディターでフィールドを直接クリックすることもできます。
2. 右側のブロック設定サイドバーで、フィールドのスタイルを同期トグルを見つけ、オフに切り替えます。このフィールドのスタイル設定がフォームの他の部分から分離されます。
3. フィールドのラベルまたはその入力エリアをクリックし、サイドバーのコントロールを使って、その要素のカスタムカラー、フォント、その他の文字組みプロパティを設定します。
4. 変更を適用するには、保存または更新をクリックします。

関連ガイドMD

• Jetpackフォームブロック —Jetpackフォームのすべての機能、フィールド、ブロック設定の概要
• Jetpackフォームエディター—専用のフォーム作成インターフェースを使ってフォームを作成、管理します
• フォームの回答と連携—フォームからの送信内容を表示、エクスポート、管理します

まだサポートが必要ですか？MD

サポートにお問い合わせください。喜んでご案内します。

プライバシー情報MD

フォームブロックはデフォルトで有効化されています。Jetpackの機能を1ページで管理するガイドに従うことで、いつでも無効化または再有効化できます。

使用データ
サイト所有者／ユーザー アクティビティ追跡（以下に詳述）のため、IPアドレス、WordPress.comユーザーID、WordPress.comユーザー名、WordPress.com接続サイトIDとURL、Jetpackバージョン、ユーザーエージェント、訪問先URL、参照元URL、イベントのタイムスタンプ、ブラウザー言語、国コード。	サイト訪問者 サイトでAkismetが有効化されている場合、問い合わせフォームの送信データ（IPアドレス、ユーザーエージェント、メールアドレス、サイトのURL、コメント）はAkismetサービス（Automatticも所有）にスパムチェックのため送信されます。実際の送信データは、送信先となったサイトのデータベースに保存され、フォームの所有者（つまり、問い合わせフォームが設置されたページを公開したサイト作成者）に直接メールで送信されます。このメールには、送信者のIPアドレス、タイムスタンプ、名前、メールアドレス、ウェブサイト、メッセージが含まれます。 IPアドレスは不正利用防止のために含まれます。また、Akismetを使用するサイトでは、適切なスパム対策を提供することが必須です。
追跡対象のアクティビティ
サイト所有者／ユーザー いつ、どのユーザーによって機能が有効化・無効化されたか、およびフィードバックフォームページからCSVまたはGoogleスプレッドシートがエクスポートされた時点を追跡します。	サイト訪問者 ありません。
同期されるデータ（続きを読む）
サイト所有者／ユーザー 機能が有効化されているかどうかを示す単一のオプションを同期します。	サイト訪問者 ユーザーの問い合わせフォーム送信に関連付けられた投稿および投稿メタデータを同期します。サイトでAkismetが有効化されている場合、コメントとともに最初に送信されたIPアドレスとユーザーエージェントも、投稿メタデータに保存されているため同期されます。