AI要約
カスタムCSSを記述せずに、フォーム全体のデザインを改善する準備はできましたか？ WPFormsのフォームテーマ機能には、フォームに簡単に適用できる既製のデザインが用意されています。
このチュートリアルでは、WPFormsのフォームテーマ機能の使用方法について説明します。
開始する前に、WPFormsがWordPressサイトにインストールされ、有効化されていることを確認してください。
フォームテーマへのアクセス
WPFormsでフォームテーマ機能にアクセスするには、まず新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスする必要があります。
また、フォームテンプレートのいずれかを使用して簡単に開始することもできます。テンプレートを選択した後、選択したテンプレートで新しいフィールドを追加したり、既存のフィールドを編集したりできるようになります。
フォームのフィールドオプションと設定のカスタマイズが完了したら、変更を保存し、サイトのページまたは投稿にフォームを埋め込むことを忘れないでください。
フォームテーマのカスタマイズ
ブロックエディターでは、WordPressフォームのスタイルを設定およびカスタマイズするためのオプションが表示されます。テーマセクションには、WPFormsが提供するすべての利用可能なテーマスタイルが含まれています。
次のセクションでは、WPFormsが標準で提供するフォームテーマの一部を紹介します。これにより、サイトに適用されたときの見た目の概要を把握できます。
モダン（デフォルト）
これは、デフォルトですべてのフォームに適用されるテーマです。送信ボタンやプログレスバーなどの要素に青いアクセントカラーを使用しています。
テーマを選択した後、ブロックエディターでフォームのスタイルを設定するときと同様の方法でテーマスタイルを更新できます。
いずれかのテーマを更新すると、追加した新しいスタイルを持つ元のテーマのコピーが作成されます。この新しいテーマの名前には（コピー）が追加されます。例では、名前はデフォルト（コピー）です。
テーマ名フィールドのテキストを更新することで、カスタムテーマの名前を変更できます。
テーマ名フィールドの下には、テーマの削除リンクがあります。このリンクは、サイト上のカスタムフォームテーマを削除したい場合に役立ちます。
クリックすると、削除アクションを続行するかどうかを確認するオーバーレイが表示されます。続行するには、はい、削除ボタンをクリックするだけです。
クラシック
クラシックテーマスタイルは、非常に最小限のCSSを使用し、送信ボタンに灰色のアクセントカラーを使用します。
オーシャン
オーシャンフォームテーマは、モダンなスタイルに似ており、ボタンや数値スライダーなどのフォーム要素にダークティールのアクセントカラーを使用しています。
タンジェリン
タンジェリンスタイルは、フィールドに同様のスタイリングオプションを使用します。ただし、ボタン、プログレスバー、数値スライダーなどのフォーム要素にオレンジ色のアクセントカラーを適用します。
エアロ
Aeroデザインは、フォームのコンテナに明るい灰色の背景色を適用し、青いアクセントカラーを使用します。また、コンテナにボックスシャドウが適用されています。これにより、フォームはモダンで洗練された外観になります。
コンクリート
コンクリートスタイルは、ボタン、ページネーション、数値スライダーなどのフォーム要素にピンク色のアクセントカラーを使用します。また、フォームのコンテナにダークコンクリートの背景画像を追加します。
背景画像を必要とするテーマを初めて選択すると、スタイルが適用される前に画像をダウンロードする必要があります。画像をダウンロードするように促すオーバーレイが表示されます。続行をクリックしてダウンロードしてインポートしてください。
注意:テーマの背景画像をダウンロードすると、他のテーマが必要とするすべてのストック画像もダウンロードされます。したがって、異なる背景画像を持つテーマを選択しても、このプロセスを実行する必要はありません。
必要に応じて、背景スタイルセクションから背景画像を更新できます。
画像ソースとして、サイトのメディアライブラリまたはストック写真を選択できます。ストック写真オプションを選択した場合は、既存の画像をクリックすることで、利用可能なストック写真から選択できます。
背景スタイルセクションには、画像のサイズ、位置、繰り返しをカスタマイズするオプションも含まれています。
背景画像を削除したい場合は、画像削除ボタンをクリックしてください。
エレガンス
Eleganceテーマスタイルは、フォームのコンテナの周りに境界線の半径を適用します。また、フォームコンテナウィジェットに背景画像を使用します。これにより、魅力的でモダンな外観になります。
フレッシュ
Freshテーマスタイルは、新鮮な緑の葉の背景画像を追加します。また、ボタンなどのフォーム要素のアクセントカラーとして緑色を使用します。
グルーム
このフォームテーマスタイルは、フォームのコンテナの周りに暗い背景を持つダークモードテーマとして機能します。ボタンや数値スライダーフィールドなどのフォーム要素に緑色のアクセントカラーを使用します。
ホールウェイ
Hallwayテーマは、ボタン、数値スライダーなどのフォーム要素にダークなアクセントカラーを使用します。また、フォームのコンテナに背景画像を適用します。
ラッシュ
このフォームテーマは、フォームのコンテナにボックスシャドウと丸みを帯びた角を適用します。また、コンテナウィジェットの背景としてストック画像を使用します。
モンステラ
Monsteraテーマは、緑色のアクセントカラーとフォームのコンテナの丸みを帯びた角を持つモダンなデザインを使用します。また、フォームコンテナの背景として見栄えの良いストック画像を適用します。
レンジ
このフォームテーマは、夕日の画像を背景としたモダンなデザインを使用します。また、フォームのコンテナに境界線、境界線の半径、ボックスシャドウなどのスタイルを適用します。
スプリング
スプリングフォームテーマは、フォームのコンテナにボックスシャドウを追加し、背景としてグラデーションのストック画像を使用します。また、送信ボタンなどのフォーム要素には青いアクセントカラーを使用します。
ヴィンテージ
このフォームテーマは、ビンテージなルックアンドフィールを備えています。フォームのコンテナにはカスタム背景色を使用し、フォーム要素には黄色のアクセントカラーを使用します。
フォームのテーマを選択したら、変更を保存するためにページを発行するか、下書きとして保存する必要があります。
完了したら、サイトの任意の場所にフォームを埋め込むことができ、テーマセクションで設定したスタイルが保持されます。
よくある質問
これらは、WPFormsでのフォームテーマの使用に関するよくある質問への回答です。
フォームテンプレートにフォームテーマのスタイルを適用できますか？
もちろんです。使用したいフォームテンプレートを選択したら、ブロックエディターが有効になっているページに埋め込みます。ブロックエディターでは、利用可能なテーマスタイルから選択してフォームテンプレートをデザインできます。詳細については、フォームテーマのカスタマイズセクションを参照してください。
これで完了です！WPFormsでフォームテーマにアクセスして使用する方法を学びました。
次に、WordPressフォームで支払いを受け付ける方法について学びたいですか？支払いフォームの作成に関するチュートリアルでは、すべての手順を詳しく説明しています。