AI要約
スペーシングはフォームデザインの重要な部分です。WPFormsでは、フィールド、タイトル、その他の要素間のスペーシングは、サイト訪問者に最適なエクスペリエンスを提供するためにデフォルトで設定されています。
とはいえ、ウェブサイトはそれぞれユニークです。そのため、特定のスタイルに合わせてフィールド間のカスタムスペーシングを設定したい場合は、まさにここにたどり着きました。
この記事では、WPFormsでフィールド間のスペースを強制的に設定する方法をステップバイステップでご紹介します。ここでは少しコードを扱う必要がありますが、私の方法に従うために事前のコーディング知識は必要ありません。
この記事の内容
フォームフィールド間のスペースの強制
さまざまな種類のフォームコンポーネント間のスペースを強制するための正確なコードを共有する前に、このタスクを可能な限り簡単に実行するために適切なプラグインが必要になります。
初期設定：コードによるフォームのスペーシング
まず、サイトに必要なプラグインをインストールしましょう。
ステップ1：WPFormsとWPCodeのインストール
この方法はWPFormsのLite版とPro版の両方で機能しますが、WPForms Proの購入をお勧めします。これにより、ブロックエディターで豊富な追加スタイリングオプションにアクセスでき、高度なカスタマイズのためにコードを必要としなくなります。
WPForms Proを購入したら、サイトにプラグインをインストールしてください。WPFormsのインストールに関する詳細ガイドはこちらです。
次に、WPCodeプラグインも必要になります。これは、コードスニペットをサイトに簡単に追加できる無料プラグインです。
インストール手順はWPFormsのインストール方法と同様ですが、WPCodeの無料版はWordPressリポジトリから直接追加できます。以下に簡単な手順を示します。
WordPress管理メニューから、プラグイン » 新規追加に移動します。
これによりプラグイン画面が表示されます。右側の検索ボックスを使用してWPCodeを検索します。プラグインのリストが画面に表示されたら、その横にある今すぐインストールボタンをクリックします。
インストールには数秒しかかからず、インストールボタンが有効に変わります。有効化ボタンを押して、サイトへのプラグインのインストールを完了します。
素晴らしい！必要なプラグインがインストールされたので、さまざまなフォーム要素間のスペースの調整に進むことができます。
ステップ2：フォームの作成と埋め込み
WPFormsでフィールド間のスペーシングを調整しようとしている場合、すでにサイトで1つ以上のフォームを作成して公開している可能性が高いです。
念のため、まだ作成していない場合は、この簡単なガイドに従って簡単なコンタクトフォームを作成してください。
説明のために、この既製のアンケートフォームテンプレートを使用しています。
フォームを埋め込み、公開する（または少なくともWordPressエディターで下書きバージョンを保存する）ことを確認してください。サイトに埋め込まれているフォームでのみスペーシングをカスタマイズできます。
カスタマイズしたいフォームのフォームIDも知る必要があります。WPForms » すべてのフォームに移動すると、フォームIDを簡単に見つけることができます。
フォームIDは数字のみで構成されており、ショートコード列の二重引用符内に記載されています。私の場合は、フォームIDは2294です。
素晴らしい！しかし、WPFormsのスペーシングを修正するコードを挿入する方法について、まだ疑問に思っているかもしれません。次に説明します。
ステップ3：フォームスペーシングのためのコード挿入
コードを使用する前に、WordPressサイトに新しいコードスニペットを挿入する方法を知っておくことが重要です。WPFormsのフィールド間のスペーシングを制御するすべてのコードに対して、このプロセスを繰り返す必要があります。
新しいスニペットを追加するには、コードスニペット » + スニペットを追加に移動するだけです。
次に、「カスタムコードを追加（新規スニペット）」オプションの下にあるスニペットを使用ボタンをクリックします。
これで新しい画面が表示され、スニペットにタイトルを付け、カスタムコードを記述できます（または、次のセクションで共有するコードをコピー＆ペーストするだけです）。
フォームのスペーシングを制御するすべてのコードはCSSであるため、コードタイプのドロップダウンでCSSスニペットを選択してください。
その後、コードスニペットを追加し、挿入方法を選択するだけです。挿入設定は、コードプレビューの下のセクションで変更できます。ただし、この記事で説明するコードのデフォルト設定を変更する必要はないはずです。
さらに重要なのは、スニペットを追加した後、スニペットを保存してアクティブ化することを忘れないでください。右上のトグルボタンを使用してアクティブ化しないと、コードが有効になっていることがわかりません。
素晴らしい！これで、カスタムコードを使用してフォームのスペーシングのカスタマイズを開始する準備ができました。
フォームスペーシング調整のためのCSSコード
これで、さまざまなフォーム要素のスペーシングを制御するCSSコードスニペットの作成を開始する準備ができました。
フォームタイトルと最初のフィールド間のスペースの変更
フォームのタイトルについて話しましょう！デフォルトでは、WPFormsはページのH1見出しをフォームのタイトルとして使用します。この見出しは、フォーム自体のの上に表示されます。
タイトルをフォームコンテナ内に表示したい場合は、WordPressブロックエディターから簡単にそのオプションを有効にできます。
エディター内の埋め込みフォームをクリックして、右側のパネルで追加のオプションを開きます。次に、タイトルを表示トグルボタンをクリックします。
WPFormsのタイトルを使用している場合は、H1を非表示にしたい場合があります。これは、H1をクリックしてから表示される目のアイコンを押すだけで簡単に行えます。
これで、タイトルと最初のフォームフィールド間のスペーシングを変更する準備ができました。この時点で、フォームを公開または更新できます。
まず、WPFormsのフォームタイトルと最初のフィールド間のデフォルトのスペーシングを見てみましょう。通常は次のようになります。
このスペーシングを変更するには、ステップ3に示すように、WPCodeで新しいスニペットを作成します。WordPressサイドバーのコードスニペット » + スニペットを追加に移動すると、すぐにアクセスできます。
これは、サイト上のすべてのWPFormsフォームのタイトルスペーシングを変更するためのコードです。
.wpforms-container-full .wpforms-head-container {
padding-bottom: 0 !important;
}
.wpforms-container-full .wpforms-title {
margin-bottom: 15px !important;
}
覚えておいてください、パディングとマージンの値は可変です。つまり、必要な値を自由に入力できます。このコードではmargin-bottomの値のみを変更し、padding-bottomは0のままにすることをお勧めします。
たとえば、タイトルが各フィールド間のギャップと同じ距離で表示されるようにしたい場合は、margin-bottomの値として15pxを使用できます。これよりも大きいまたは小さい距離を作成したい場合は、必要に応じてmargin-bottomのpx値を増減するだけです。
これが、上記のコードスニペットをアンケートフォームに追加した後のタイトルの表示方法です。
グローバルな変更を適用するのではなく、特定のフォームの間隔を調整したい場合は、関心のあるフォームのフォームIDを指定して上記のコードを変更できます。
たとえば、ID# 2294のフォームの場合、コードは次のように変更されます。
wpforms-2294 .wpforms-head-container {
padding-bottom: 0 !important;
}
#wpforms-2294 .wpforms-title {
margin-bottom: 15px !important;
}
これで、フォームタイトルの間隔は完了です。しかし、各フィールド間の間隔はどうでしょうか？
次に説明します。
すべてのフィールドのスペーシングの変更
各連続するフィールド行間のギャップは、コードで簡単に制御できる別の可変数値です。
参考までに、まずフィールド間のデフォルトの間隔を見てみましょう。
次に、このギャップを増やしたり減らしたりしたい場合は、ここで示されたのと同じ手順に従って新しいCSSスニペットを作成できます。
今回は、必要なコードは次のようになります。
.wpforms-container-full .wpforms-head-container {
padding-bottom: 0 !important;
}
.wpforms-container .wpforms-field {
padding-top: 100px !important;
}
結果として、各連続フィールド間のギャップが大きくなり、より引き伸ばされたフォームになります。
padding-topプロパティのpx値を変更することで、ギャップを自由に調整できます。
ここでも、個々のフォームのフィールド間隔のみを変更したい場合は、フォームIDを指定してコードを編集する必要があります。
wpforms-2294 .wpforms-head-container {
padding-bottom: 0 !important;
}
#wpforms-2294 .wpforms-field {
padding-top: 100px !important;
}
送信ボタンのパディングの変更
最後のフィールドと送信ボタンの間のギャップを変更することは、上記で使用したコードと同じくらい簡単です。
デフォルトでは、WPFormsの送信ボタンの間隔は次のように表示されます。
送信ボタンのパディングを調整するために必要なコードは次のとおりです。
.wpforms-container .wpforms-submit-container {
padding-top: 30px !important;
}
このコードをアクティブにすると、フォーム送信ボタンにパディングが増加した効果が見られます。
かなり簡単でしたね？
必要に応じて、WPFormsにスペースを強制するためにCSSコードを自由に利用してください！
次に、高度なフォームスタイルを適用する
フォームのマージンとパディングの調整は、コードが必要な数少ないことの1つです。しかし、WPFormsでは、ほとんどの場合、コードなしで詳細にフォームスタイルをカスタマイズできます。
直感的なポイントアンドクリックコントロールを使用して、フィールド、ラベル、ボタンなどの外観を変更できます。ブロックエディターを使用したフォームスタイリングのガイドを参照して、包括的な概要を確認してください。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
もしこの記事がお役に立ったなら、WordPressの無料チュートリアルやガイドをもっと知るために、FacebookとTwitterでフォローしてください。
