フォームラベルをフィールドの横に表示するようにスタイル設定する

ラベルをフィールドの上ではなく横に表示することで、よりコンパクトなフォームレイアウトを作成しますか？ WPFormsはデフォルトでラベルをフィールドの上に表示しますが、CSSを使用してラベルとフィールドを横並びに表示するように簡単に変更できます。

このチュートリアルでは、このプロフェッショナルな水平レイアウトを実現する方法を説明します。

フォームの設定

まず、フォームを作成し、目的のフィールドを追加する必要があります。ヘルプが必要な場合は、最初のフォームの作成に関するこのガイドを参照してください。

フォームを作成したら、設定 » 一般をクリックし、詳細設定の矢印をクリックしてこれらのオプションを開きます。そこに表示されたら、フォームCSSクラス内にwpforms-inline-labelsクラスを追加します。

このCSSクラスにより、サイト上のすべてのフォームに影響を与えるのではなく、特定のフォームをターゲットにすることができます。

ラベルのスタイリングを追加する

次に、サイトにCSSコードを追加します。サイトにCSSを追加する方法がわからない場合は、カスタムCSSスタイルの追加に関するこのガイドを確認してください。

.wpforms-container.wpforms-inline-labels .wpforms-form .wpforms-field {
    display: grid;
    grid-template-columns: 225px auto;
    align-items: center;
}

このCSSを追加すると、フォームラベルがフォームフィールドと同じ行に表示されるようになります。

これで完了です！フォームフィールド内に表示されるようにフォームラベルをスタイル設定しますか？ フローティングラベル付きフォームの作成方法に関するチュートリアルをご覧ください。

よくある質問

Q: すべてのフォームにこれを適用したい場合はどうなりますか？

A: すべてのフォームに適用したい場合は、代わりにこのCSSを使用し、フォームCSSクラスを追加する際に上記のステップをスキップしてください。すべてのフォームに適用したい場合は、これは必要ありません。

.wpforms-container .wpforms-form .wpforms-field {
    display: grid;
    grid-template-columns: 225px auto;
    align-items: center;
}

これで完了です！次に、さらに多くのフォームスタイリングオプションを検討しますか？ CSSで送信ボタンをスタイリングするに関するガイドをご覧ください。