6. デザイン調整と CSS

フォームスタイルの設定

フォーム編集画面の ［フォームスタイル］ （設定ボックス） に、SPWForm標準スタイルを使用する というチェック項目があります。

チェックを入れた場合

SPWFormに同梱されている標準スタイルが適用されます。入力欄、テキストエリア、選択項目、ボタン、ファイル選択欄などを、基本的なフォームとして使える見た目に整えます。

チェックを外した場合

入力欄やボタンなどの追加標準スタイルは適用されません。サイトのテーマや子テーマ、WordPressの追加CSSなどから、フォームの見た目を自由に設定できます。

SPWFormの動作や入力・確認・完了画面に必要な基本レイアウト用CSSは、どちらの設定でも読み込まれます。低詳細度のセレクタで構成されているため、テーマ側のCSSから上書きしやすくなっています。

テーマ側で調整できる主な項目

• 入力欄の幅や余白
• ラベルの見せ方
• 送信ボタンの見た目
• エラーメッセージの色や配置
• 確認画面や完了画面の見え方

テーマ側でCSSを書くときの基本

まず「どの要素を変えたいか」を整理し、入力欄の幅、項目間の余白、ボタン、エラー表示など、対象を絞って少しずつ調整します。

エディタ内のフォーム内容を div.my-form で囲み、テーマ側では .spw-form .my-form を起点に指定すると、ほかのフォームやテーマ要素へ影響しにくくなります。

<div class="my-form">
  ここにフォームをいれます。
</div>

上記の内容を [SPWForm_scode key="xxx"] で出力すると、フォーム全体は次のような要素の中に表示されます。

<div id="spwfxxx" class="spw-form spw-form-input">
  <form>
    <div class="my-form">
      ここにフォームをいれます。
    </div>
  </form>
</div>

入力画面では spw-form-input、確認画面では spw-form-confirm、完了画面では spw-form-thanks が外側の要素に付きます。画面ごとに見た目を変える場合は、これらのクラスを起点に指定できます。

SPWForm標準スタイルを使用する が有効なフォームには、外側の要素へ spwf-default-style クラスも追加されます。

CSS が反映されないときの確認ポイント

• SPWForm標準スタイルを使用する の設定が意図した状態になっているか。
• テーマや子テーマのCSSが、フォームを表示するページで実際に読み込まれているか。
• テーマ側CSSとSPWForm標準スタイルのどちらが優先されているか。
• 対象セレクタが正しいか。
• ブラウザやキャッシュプラグインの古いCSSが残っていないか。