フォームラベルをフィールドの横に表示するようにする

ラベルをフィールドの上に表示するのではなく、フィールドの横に表示することで、よりコンパクトなフォームレイアウトを作成したいと思いませんか？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 クラスを追加する上記の手順を省略してください。すべてのフォームにこの CSS を適用したい場合は、この必要はありません。

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

以上です！次に、フォームのスタイリングオプションをもっと調べたいですか?CSS による送信ボタンのスタイリングガイドをご覧ください。