AI要約
小規模事業主が独自のWordPressフォームを作成しようとすると、結果は平凡で魅力に欠けるものになりがちです。これは長年にわたり一貫して観察してきたパターンです。
開発者やデザイナーの専門知識なしでは、これらのフォームは十分に機能するかもしれませんが、ユーザーを引き付け、コンバージョンを促進する視覚的な魅力に欠けます。
良い点は、美しいフォームを作成するためにコーディング知識やデザインの専門知識はもう必要ないということです。必要なのは適切なプラグインだけです。
この記事では、訪問者に強い第一印象を与えるための、コーディング不要な連絡フォームのスタイリング方法を紹介します。
WordPressで問い合わせフォームをスタイル設定する方法
当社のスタイリングツールがWPFormsにとって最も簡単で最高のスタイラーであることがわかったので、ステップバイステップで詳しく見ていきましょう。
1. WPFormsのインストールと有効化
まず、WPFormsプラグインがまだインストールされていない場合は、インストールしてください。
フォームのスタイリングは、WPForms Lite（最高の無料フォームビルダー）を含むすべてのWPFormsバージョンで利用できます。
このステップで何かお手伝いが必要ですか？WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。
さて、必要なバージョンがすべて揃っていることを確認しましょう：
- WordPressバージョン：6.0以上。
- WPForms 1.9.7。
Elementorユーザーですか？WPFormsはElementor向けのノーコードフォームスタイルをサポートしています。これにより、フォームのスタイルカスタマイズがさらに強力になります。
2. ビルダーでフォームを開く
それでは、フォームを作成しましょう！開始するには、WordPress管理メニューのサイドバーにあるWPFormsにカーソルを合わせ、新規追加をクリックします。
その後、フォーム名とテンプレートの選択から始めて、フォームの設定を開始します。マーケティングやその他のさまざまな機能用のフォームテンプレートは何百もあります。必要であれば、完全にゼロからフォームを作成することもできます。
シンプルな連絡フォームは、最も人気のあるテンプレートの1つです。このチュートリアルにも適しているので、テンプレートを使用ボタンをクリックして選択します。
選択したら、使いやすいWPFormsのドラッグアンドドロップビルダーを使用して、フォームの作成またはカスタマイズができます。
少しガイダンスが必要ですか？心配いりません。最初のフォームの作成方法を教えるドキュメントがあります。
3. テーマを選択する
これで、フォームビルダー内で直接フォームのテーマをスタイル設定する準備ができました。
スタイリングコントロールにアクセスするには、設定 >> テーマに移動します。
左側のパネルには、すべてのスタイルオプションが表示されます。右側のパネルには、サンプルフィールドを使用したライブプレビューが表示されます。
ここでテーマを選択します。
テーマは、見た目の良いフォームを作成するためのショートカットです。フィールド、ラベル、ボタン、コンテナ、背景の色とスタイルを、すべてワンクリックで coordinated します。
そして、すべてのユーザーが利用できます！WPForms Liteをお使いの場合、「Classic」と「Modern (Default)」のテーマが利用可能です。
WPFormsライセンスをお持ちのユーザーは、15種類のテーマを含む、すべてのテーマライブラリにアクセスできます。
Lushがお気に入りです！
すべてのテーマを自分で確認し、それぞれのテーマの説明概要を作成しました。
| Tテーマ名 | L見た目と雰囲気 | アクセントカラー | 背景色 | 注記 |
| モダン (デフォルト) | クリーンで現代的 | 青 | なし | すべての新しいフォームのデフォルト |
| クラシック | ミニマリスト | グレー | なし | CSSはほとんど使用せず、ベアボーンの外観に最適 |
| オーシャン | モダンに似ています | ダークティール | なし | クールトーンのブランドに最適 |
| タンジェリン | 暖かく、エネルギッシュ | オレンジ | なし | ニュートラルなサイトで目立ちます |
| エアロ | 軽くて風通しの良い | 青 | ボックスシャドウ付きのライトグレー | わずかな「カード」効果 |
| コンクリート | インダストリアル | ピンク | コンクリートのテクスチャ | 背景画像のダウンロードが必要です |
| エレガンス | 洗練された | 画像に合わせる | 装飾画像 | コンテナの角を丸くする |
| フレッシュ | 自然をイメージした | 緑 | 葉の画像 | エコ/オーガニックブランドに最適 |
| グルーム | ダークモード | 緑 | 暗い背景 | ハイコントラストなフォーム要素 |
| ホールウェイ | ドラマチック | ダーク | 画像 | 大胆で没入感のあるコンテナ |
| ラッシュ | テクスチャ加工 | 黒 | レンガの壁の画像 | 角丸とボックスシャドウ |
| モンステラ | 遊び心のある | 緑 | 水彩画の画像 | 角丸 |
| レンジ | 鮮やかな | 緑 | 夕日の画像 | 境界線とボックスシャドウ |
| スプリング | ソフトグラデーション | 青 | グラデーション画像 | 奥行きを出すためのボックスシャドウ |
| ヴィンテージ | レトロ | 黄色 | 単色 | 暖かくノスタルジックな雰囲気 |
これらのテーマの多くを詳細にカバーする完全なドキュメントをご覧ください こちら。
4. フィールドスタイルのカスタマイズ
テーマが決まったら、フィールドスタイルに移動して調整します。
- サイズ: 小、中、大
- 境界線: 実線、破線、点線
- 境界線のサイズと半径: 太さと角の丸みを調整します
- 色: 背景、境界線、テキストを設定します。テーマのパレット、HEXコード、またはカラーピッカーを使用します
これらの追加のタッチは、各フォームで目指している効果と雰囲気に本当に役立ちます。たとえば、角が丸いと親しみやすい感じになり、角が四角いとフォーマルな感じになります。
ここでは、フォームフィールドの背景、境界線、テキストの色を更新するオプションも見つかります。
ラベルをクリックしてカラーピッカーを開き、変更を加えます。視覚的に色を選択するか、特定の制御のために特定の16進コードを入力できます。
5. ラベルスタイルのカスタマイズ
ラベルは、フォームフィールドの上にある短いテキストで、ユーザーに何を入力するかを伝えます。たとえば、名前、メールアドレス、メッセージなどです。うまく機能すると、フォームがわかりやすくなり、ユーザーの混乱や間違いを回避するのに役立ちます。
ラベルスタイルでは、以下を変更できます。
サイズ: 小、中、大のテキスト。たとえば、ミニマリストなニュースレターフォームには小さいラベルを使用し、明確さが最も重要な求人応募フォームには大きく太いラベルを使用したい場合があります。
色:
- ラベルテキスト: 各フィールドの上にあるメインタイトル。
- サブラベルとヒント: 「名のみ」や「メールアドレスは共有しません」などの役立つ指示。
- エラーメッセージ: ユーザーが間違いを犯した場合に表示されるテキスト。「このフィールドは必須です」など。この色で、必須フィールドのアスタリスクも制御されます。
たとえば、サイトの背景が暗い場合、ラベルテキストを白、サブラベルをソフトグレー、エラーメッセージを明るい赤に設定して、問題が発生したときにすぐに目立つようにすることができます。
6. ボタンスタイルのカスタマイズ
送信ボタンは、フォームの最後の「行動喚起」です。訪問者が見つけにくいほど目立たないようにする必要があります。
ボタンのスタイルでは、以下を調整できます。
- サイズ: 小、中、大。大きいボタンはモバイルでうまく機能しますが、中くらいはデスクトップレイアウトに適している場合があります。
- 境界線のスタイル: 実線、破線、点線。ただし、ほとんどのモダンなデザインでは、クリーンな外観のために実線またはなしを使用します。
- 境界線のサイズと半径: 太い境界線とシャープな角はよりフォーマルに感じられ、細い境界線と丸い角はより親しみやすくカジュアルに感じられます。
- 背景とテキストの色: これらは、ボタンの主な外観を設定します。
💡 ヒント: ここでの背景色は、フォームの残りの部分のアクセントカラーにもなります。これには、フィールドのフォーカス状態、プログレスバー、チェックボックスも含まれます。したがって、ボタンをティール色にすると、そのティール色がフォーム全体に微妙に表示され、統一感のある外観になります。
7. コンテナスタイルのカスタマイズ
コンテナは、フォームの周りの「フレーム」のようなものです。フォームをページ上の他の部分から視覚的に分離し、より意図的なものに感じさせるのに役立ちます。
コンテナスタイルでは、以下を変更できます。
- パディング：コンテナ内のフォームフィールドの周りのスペースの量。パディングが多いほど、クリーンで広々とした印象になり、パディングが少ないほど、コンパクトで省スペースな見た目になります。
- 境界線のスタイル、サイズ、半径：サイトのビジュアルトーンに合わせてください。角が四角く、境界線がしっかりしていると、企業らしい見た目になり、角が丸く、境界線が控えめだと、より柔らかい印象になります。
- 影：小さめまたは中くらいのドロップシャドウを追加すると、フォームがページから「浮き上がって」見えます。フラットな背景で目立たせるのに最適です。
- 境界線の色：見落としがちですが、色のついた境界線は、フォームをブランドカラーに合わせることができます。
たとえば、写真ポートフォリオサイトでは、十分なパディング、細い白い境界線、柔らかいドロップシャドウを持つコンテナを使用して、エレガントな「カード」効果を作成できます。
8. 背景スタイルのカスタマイズ
背景はクリエイティブになれる場所ですが、やりすぎるのも簡単な場所です。良い背景は、読みにくくすることなくフォームを引き立てます。だから、その衝動に打ち勝ってください！
ここでのオプションは次のとおりです。
- 画像ソース：メディアライブラリからアップロードするか、WPFormsの組み込みのストックフォトを閲覧します（ストックフォトを初めて使用するときは、ライブラリ全体をダウンロードします）。
- 位置：画像の配置を制御します — 上中央、中央中央、右下など。
- 繰り返し：単一の画像の場合は繰り返しなし、背景全体に繰り返す場合はタイル、またはパターンで水平/垂直に繰り返すかを選択します。
- サイズ：カバーは、画像がコンテナ領域全体を埋めるようにします。寸法では、正確な幅と高さを設定できます。
- 単色背景色：シンプルにしたい場合や、画像が読み込まれない場合に最適なオプションです。
💡テキストが読みにくくなるような、ごちゃごちゃした背景は避けてください。ごちゃごちゃした画像が好きなら、アップロードする前にカラーオーバーレイでトーンダウンしてください。
10. 保存、プレビュー、テスト
変更が完了したら、残りはフォームを保存することだけです。フォームビルダーの保存をクリックします。
または、プレビュー（右上）を使用して、サンプルフォームレイアウトにスタイルが適用されていることを確認します。次に、WordPressエディターでページに移動し、実際のフィールドで実際のフォームをプレビューします。
忘れないでください、テストすることもできます：
- 各フィールドに入力して、スペーシングと配置を確認します。
- エラーメッセージをトリガーして、色がはっきりしているか確認します。
- モバイル、タブレット、デスクトップでフォームを表示して、レスポンシブであることを確認します。
これで完了です！WordPressにある連絡フォーム（またはその他のフォーム）を、フォームビルダー内で直接スタイリングできるようになりました。
スタイリングを楽しんでください！
連絡フォームのスタイリング – よくある質問
ここでは、コードなしでWordPressの連絡フォームをスタイリングすることに関する一般的な質問をいくつか紹介します。
スタイルはどこにでも適用されますか？
はい。WPFormsビルダーでフォームをスタイリングすると、その設定は、作業中のページだけでなく、フォーム自体に保存されます。
これは、同じフォームを複数のページや投稿に埋め込んでも、デフォルトではどこでも一貫した外観になることを意味します。唯一の例外は、埋め込み中にブロックエディターまたはElementorで意図的にスタイルを上書きした場合です。これらの変更は、その特定のページにのみ適用されます。
フォームテンプレートのスタイルを設定できますか？
もちろんです。WPFormsのテンプレート（「シンプルな問い合わせフォーム」や「ニュースレターサインアップ」など）は、単に事前に構築されたフィールドのセットです。テンプレートベースのフォームを埋め込むとすぐに、カスタム構築フォームと同じ方法でテーマを選択し、スタイリングを調整できます。
カスタムテーマを削除できますか？
はい、ただし注意して行ってください。ビルダーのテーマパネルからカスタムテーマを削除すると、元に戻すことはできません。
次に、WordPressフォームをChatGPTに接続します
フォームに関するワークフローを自動化する方法に興味がありますか？ChatGPTをWordPressフォームに接続する方法を見つけて、AIで返信を効率化しましょう。
フォームをより魅力的にする方法をお探しですか？ユーザーの注意を引くインタラクティブなフォームを作成するためのヒントをご覧ください。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
もしこの記事がお役に立ったなら、WordPressの無料チュートリアルやガイドをもっと知るために、FacebookとTwitterでフォローしてください。
Diviモジュールを使用してフォームをスタイルする方法を調べていますが、それが不可能であれば、どのような回避策が必要かを知りたいです。
こんにちは、アシュリー様 – 現在、フォームスタイルはWordPressブロックエディターまたはフルサイト編集機能を持つテーマで使用できます。他のビルダーのサポートがあれば素晴らしいと思いますし、フォームからのスタイリングを適用するオプションがあればさらに良いでしょう。開発者の注意を引くために、これを機能リクエストトラッカーに登録します。
Diviのフォームスタイル機能はまだありません。
こんにちは、Stale様 – 申し訳ありませんが、現在Diviでフォームスタイルを編集する機能はありません。これも役立つだろうと同意します。開発者の注意を引くようにします。
これはプレミアム機能ですか？WordPressリポジトリからインストールしたものには、そのようなオプションが表示されません。フォーム入力の色を指定するのがこんなに難しいはずがありません。基本的な変更オプションを取って「プレミアム」機能にするのは正しくありません。
こんにちは、Boreas様 – この機能は、無料版（ブロックエディターおよびすべてのフルサイトエディター（FSE）テーマ用）を含む、すべての有料バージョンで利用可能です。
モダンマークアップを有効にするオプションが表示されない場合は、WPForms liteプラグインをバージョン1.8.1.1に更新する前にウェブサイトに少なくとも1つのフォームがあったユーザーは、モダンマークアップオプションが表示されることに注意してください。また、バージョン1.8.1.1以降でWPForms liteの使用を開始した場合、このオプションは表示されません。
参考までに、このオプションの詳細については、次のチュートリアルをご覧ください：https://wpforms.com/docs/styling-your-forms/
それでも問題が解決しない場合は、WPForms Lite WordPress.orgサポートフォーラムまでご連絡ください。ありがとうございます。
こんにちは！最近プラグインをバージョン1.8.2にアップグレードしました。そして気に入っていた機能が利用できなくなりました。以前は、チェックボックスの選択肢などでカスタムHTMLコードを記述できました。例：トマト 続きを読む→ のように。今はそれができません。
こんにちは、ミラさん。喜んでお手伝いさせていただきます！お時間のある時に、サポートまでご連絡いただければ、対応させていただきます。
WPFormsのライセンスをお持ちの場合は、メールサポートをご利用いただけますので、サポートチケットを送信してください。
それ以外の場合は、WPForms Lite WordPress.orgサポートフォーラムで限定的な無料サポートを提供しています。
ありがとうございます 🙂
ウェブサイトでWP Forms Proを使用しています。フォームは2つの異なるページにあります。一方のページではテキストがセリフ体で、もう一方のページではサンセリフ体になっています。なぜかは全く分かりません。フォームを作成して配置しただけです。何か原因の手がかりはありますか？
Diviビルダーで構築しています。
こんにちは、ローレンスさん。フォントがDiviによって変更されていないか確認してください。参考までに、こちらはDiviFlashがフォントをどのように制御するかについてのガイドです。
さらに詳しく確認したい場合や、この件でさらにサポートが必要な場合は、こちらのサポートチケットを送信して、弊社チームにご連絡ください。
ありがとうございます。
WPForms Liteではこのオプションが見つかりません。1.8.2.2を使用していますが、このためのオプションはありません。フォーム全体のフォントの色を変更する必要があります。フォームでこれをどのように行えばよいですか？
こんにちは、ラリーさん。この機能は、無料版（ブロックエディターおよびすべてのフルサイトエディターテーマ用）を含む、すべての有料バージョンで利用可能です。
モダンマークアップを有効にするオプションが表示されない場合は、WPForms liteプラグインをバージョン1.8.1.1に更新する前にウェブサイトに少なくとも1つのフォームがあったユーザーは、モダンマークアップオプションが表示されることに注意してください。また、バージョン1.8.1.1以降でWPForms liteの使用を開始した場合、このオプションは表示されません。
参考までに、このオプションについては、こちらのチュートリアルで詳しく学ぶことができます。
それでも問題が解決しない場合は、WPForms Lite WordPress.orgサポートフォーラムまでお問い合わせください。
ありがとうございます。
こんにちは。WPFormsで最初のフォームを作成しました。問題は、同じフォーム内でフォントが異なっていることです。一部のラベルはサンセリフ体のようなフォントで、一部はTimes New Romanのようなフォントですが、すべての選択肢はサンセリフ体のようなフォントです。それらを同じタイプに設定するにはどうすればよいですか？通常のWPエディターを使用しており、フォームがあるエディターでページを開くと、すべてのフォントが同じスタイル（Times New Roman）で見えます。しかし、公開されたバージョンでは異なります。何が問題なのでしょうか？
こんにちは、クリスティナさん。喜んでお手伝いさせていただきます！お時間のある時に、サポートまでご連絡いただければ、対応させていただきます。
WPFormsのライセンスをお持ちの場合は、メールサポートをご利用いただけますので、サポートチケットを送信してください。
それ以外の場合は、WPForms Lite WordPress.orgサポートフォーラムで限定的な無料サポートを提供しています。
ありがとうございます 🙂
フォームをブロックとして追加しない限り、上記のラベルやヒントなどのスタイリングオプションが表示されないことに注意すべきだと思います。当初はショートコードを使用していました。それでも、このチュートリアルは別のことを試すきっかけになりました。ありがとうございます。
こんにちは、ジェシーさん。「フォームのスタイル」および「フィールドスタイル」の下に、フォームのスタイルがWordPressブロックエディターで機能することを記載しています。ショートコードではスタイリング機能は利用できませんが、フォームのスタイルを拡張する作業を進めており、ご要望を機能リクエストトラッカーに追加します。
Elementorでフォームのスタイル（フォント、色、サイズ）を編集することは可能ですか？
Rodrigo様 – 申し訳ありませんが、現在Elementorでフォームのスタイルを編集する機能はありません。お役に立つ機能であることは私も同意しますので、開発者の皆様に検討事項としてお伝えします。
Rodrigo様。この件について更新情報をお伝えします。これでWPFormsもElementorでスタイル設定できるようになりました：https://wpforms.com/announcing-elementor-form-styles-and-entry-view-settings/
私の問題は、同じフォームでフォントが異なっていたことです。一部のラベルはサンセリフ体ですが、Times New Romanのような書体のラベルもあり、すべての選択肢はサンセリフ体です。
こんにちは。喜んでお手伝いさせていただきます！お時間のある時に、サポートまでご連絡いただければお手伝いできます。
WPFormsのライセンスをお持ちの場合は、メールサポートをご利用いただけますので、サポートチケットを送信してください。
それ以外の場合は、WPForms Lite WordPress.orgサポートフォーラムで限定的な無料サポートを提供しています。
ありがとうございます 🙂
フッターに埋め込まれたものを編集しようとしています。それはできないと推測していますが、どうでしょうか？フッターの色は暗いので、テキストをデフォルトの黒にすることはできません。それを編集する方法はありますか？
Nisha様。喜んでお手伝いさせていただきます！お時間のある時に、サポートまでご連絡いただければお手伝いできます。
WPFormsのライセンスをお持ちの場合は、メールサポートをご利用いただけますので、サポートチケットを送信してください。
それ以外の場合は、WPForms Lite WordPress.orgサポートフォーラムで限定的な無料サポートを提供しています。
ありがとうございます 🙂
WPFormsの入力テキストボックス、テキストエリアのフォーカス時の境界線を削除するにはどうすればよいか教えていただけますか？
本当にお答えが必要です。
Shivam様。ご迷惑をおかけしております。お時間のある時に、スクリーンショットを添えてサポートまでご連絡いただければお手伝いできます。
WPFormsのライセンスをお持ちの場合は、メールサポートをご利用いただけますので、サポートチケットを送信してください。
それ以外の場合は、WPForms Lite WordPress.orgサポートフォーラムで限定的な無料サポートを提供しています。
ありがとうございます 🙂