フォームをスタイリングする

更新された：

WordPress フォームのルック＆フィールを簡単にカスタマイズしたいですか？弊社のフォームスタイリング機能を使えば、CSS を記述することなくフォームをスタイリングできます。

このチュートリアルでは、ブロックエディタでWPFormsビジュアルビルダーを使ってフォームをスタイルする方法を紹介します。

必要条件ブロックエディターでフォームのスタイルを設定するには、以下の環境が必要です：

  • ワードプレスバージョン6.0以上
  • ブロックエディタまたは完全なサイト編集が可能なテーマ

始める前に、WPFormsがWordPressサイトにインストールされ、有効化されていることを確認し、ライセンスを確認してください。

モダンなマークアップを可能にする

WPFormsのモダンなマークアップはアクセシビリティの向上を含み、ブロックエディタでフォームを視覚的にカスタマイズできます。

注意:WPFormsのバージョン1.8.1以降では、新規ユーザーはデフォルトでモダンマークアップが有効になっており、WordPressのダッシュボードに無効化オプションは表示されません。ブロックエディタでフォームのカスタマイズを開始するには、次へ進んでください。

フォームのスタイリングを有効にするには、WPForms の設定ページからモダンマークアップを有効にする必要があります。そのためには、WPForms " Settingsに行き、Generalタブを選択します。

WPForms設定ページ

次にGeneralセクションまでスクロールし、Include Form StylingオプションがBase and form theme styling に設定されていることを確認します。

フォーム・スタイリング・オプションを含める

その後、Use Modern Markupチェックボックスをチェックして有効にします。

最新のマークアップを使用する

このオプションを有効にしたら、必ず変更を保存してください。

注意:非推奨のクレジットカードフィールドを持つフォームはモダンなマークアップと互換性がありません。このフィールドを使用している場合、WPForms でモダンマークアップを使用することはできません。この制限を回避する方法についてはFAQ をご覧ください。

フォームのカスタマイズ

注: Elementor を使用していて、Elementor ビルダーからフォームのスタイルを設定したい場合は、Elementor によるフォームのカスタマイズガイドを参照してください。

モダンマークアップオプションを有効にした後、新しいフォームを作成し、そのフォームをページまたは投稿に追加します。

ブロックエディタで、WPFormsブロックの追加オプションを開くためにフォームをクリックします。