How to Center a form with Custom CSS with WPForms

Markdownを表示

WordPressのページでフォームを中央揃えにしたいですか？ WPFormsのフォームはデフォルトでコンテナの幅100%になりますが、カスタムCSSを使えば簡単に中央揃えにできます。

このガイドでは、フォームとその要素を完全に中央揃えにする方法を説明します。

フォームの設定

まず、フォームを作成する必要があります。これについて何かお手伝いが必要な場合は、いつでもこのドキュメントを参照してください。

フォームを作成してフィールドを追加したら、各フィールドサイズを大に設定する必要があります。

これを行うには、詳細設定タブをクリックし、フィールドサイズドロップダウンから大を選択します。

CSSクラスの追加

フィールドサイズを大に設定した後、次に特別なCSSクラスを追加する必要があります。これを行うには、フォームビルダーを開き、設定 » 一般に移動します。次に、詳細設定セクションまでスクロールし、フォームCSSクラスフィールドを見つけます。このフィールドにwpf-centerと入力します。

注意: CSSクラスの手順は非常に重要です。これがないと、中央揃えのCSSは機能しません。クラス名は表示されているとおりに正確に入力してください。

CSSコードの追加

フォームを中央揃えにするための基本的なCSSコードは次のとおりです。

注意: サイトにCSSを追加する方法については、このチュートリアルをご覧ください。

このコード:

margin: 0 autoを使用してフォームを中央揃えにします
最大幅を500pxに設定します。ニーズに合った値が見つかるまで、この数値を調整できます。
小さい画面の幅を調整することで、モバイルの応答性を確保します

すべてのフォーム要素を中央揃えにする

フォーム内のすべての要素（ラベル、説明、ボタン）を中央揃えにしたい場合は、この拡張バージョンを使用してください。

幅のカスタマイズ

フォームの幅を調整するには、CSSの次の2行を変更します。

max-width: 500px !important;
width: 500px !important;

500pxを希望の幅に置き換えます。たとえば、より広いフォームの場合は次のようになります。

max-width: 800px !important;
width: 800px !important;

よくある質問

Q: なぜCSSが機能しないのですか？

A: まず、フォームの設定 » 一般ページにwpf-centerクラス名を追加したことを確認してください。これがCSSが機能しない最も一般的な理由です。それでも機能しない場合は、ブラウザのキャッシュをクリアしてページを更新してください。

Q: 送信ボタンだけを中央揃えにするにはどうすればよいですか？

A: この簡略化されたCSSを使用し、フォームのCSSクラスフィールドにwpf-center（ではなくwpf-center-button）クラスを追加してください。

次に、このCSSをサイトに追加します。

.wpforms-container.wpf-center-button .wpforms-submit-container {
    text-align: center;
}

これで、フォームを中央揃えにするために必要なすべてが完了しました。次に、フォームの送信ボタンの色を変更できるようにしたいですか？送信ボタンの色を変更するの記事をご覧ください。

フォームを中央揃えする方法

AI要約