WordPressでお問い合わせフォームをスタイリングする方法（CSSなし!）

中小企業のオーナーがWordPressでフォームを作ろうとすると、地味で味気ないものになりがちです。これは、私が長年にわたって一貫して観察してきたパターンです。

開発者やデザイナーの専門知識がなければ、これらのフォームは十分に機能するかもしれないが、ユーザーを惹きつけ、コンバージョンを促進する視覚的な魅力に欠ける。

美しいフォームを作るのに、コーディングの知識やデザインの専門知識はもう必要ありません。必要なのは適切なプラグインだけです。

この記事では、訪問者に強い第一印象を与えるために、コードを使わずにコンタクトフォームをスタイリングする方法をご紹介します。

カスタムスタイルのWordPressフォームを今すぐ作成しましょう。

WordPressのお問い合わせフォームのスタイル

スタイリングツールがWPFormsのための最高で最も簡単なスタイリングツールであることはお分かりいただけたと思います。

1.WPFormsのインストールと有効化

まず、WPFormsプラグインをインストールしてください。

フォームのスタイリングは WPForms Lite (最高の無料フォームビルダー) を含む WPForms のすべてのバージョンで利用可能です。

このステップにヘルプが必要ですか？初心者向けのWordPressプラグインのインストール方法をご覧ください。

次のステップはWPFormsのバージョンによって異なります。

• WPForms 1.8.1以降を新規にインストールする場合は、ステップ3に進んでください。
• 1.8.1リリース以前にWPFormsをインストールした場合は、モダンマークアップを有効にする必要があります。その方法については以下をご覧ください。

2.モダンなマークアップを有効にする

WPForms 1.8.1にアップデートする前に少なくとも1つのフォームをWebサイトに設置していた場合は、モダンマークアップを有効にする必要があります。

これを行うには、WPForms設定メニューのGeneralタブに移動します。

そのページで、Use Modern Markupにチェックを入れる。

この手順が完了したら、設定を保存することをお忘れなく。

3.フォームを作成する

いよいよフォームの作成です！WordPressの管理メニューのサイドバーにあるWPFormsにカーソルを合わせ、新規追加をクリックしてください。

その後、フォーム名とテンプレートの選択からフォームの設定を始めます。マーケティング用やその他様々な機能用のフォームテンプレートが何百とあります。また、フォームを一から作成することもできます。

Simple Contact Form は最も人気のあるテンプレートのひとつです。このチュートリアルにもぴったりなので、テンプレートを使うボタンをクリックして選択します。

一度選択すると、ユーザーフレンドリーなWPFormsドラッグアンドドロップビルダーを使用してフォームを作成またはカスタマイズすることができます。

少し指導が必要ですか？大丈夫です。最初のフォームの作り方を説明した資料があります。

4.フォームを埋め込む

フォームの作成が完了したら、次はそれをサイトに埋め込む番です。フォームのスタイル設定オプションにアクセスするには、このステップを完了する必要があります。

フォームを埋め込む最も簡単な方法は、フォームビルダーの上部にある埋め込みボタンをクリックすることです。

モーダルポップアップウィンドウが開き、フォームを埋め込むページを選択するよう求められます。既存のページを選択することも、新しいページを作成することもできます。

既存のページを選択ボタンをクリックすると、ドロップダウンが表示され、既存のページから選択することができます。

新しいページを作成」を選択すると、新しいページに名前を付けることができます。

ウィジェットやショートコードを使ってフォームを埋め込むこともできます。

Let'sGo！ボタンをクリックすると、フォームを埋め込んだドラフトページが開きます。

5.フォームのスタイル

さあ、いよいよ楽しい部分、フォームのスタイリングだ！

ブロックエディターでフォームをクリックすると、そのブロックの設定が右側のサイドバーに表示されます。ここでフォームのすべてのスタイリングオプションにアクセスできます。

WPForms Proユーザーであれば、何十ものテーマが利用可能であることに気づくでしょう。これらのプロフェッショナルにデザインされたテーマは、事前に定義された配色、ボタンスタイル、コンテナ、および背景画像でフォームを簡単にスタイルすることができます。

ですから、フォームに即座に力を加えたい場合は、サイドパネルから好きなテーマを選んでください。下の例では、私のお気に入りの一つであるFrostテーマを使っています。

WPForms Pro 🎨ですべてのフォームテーマを手に入れる

どのテーマも各フォーム要素に独自のスタイルを使用していますが、CSSを使用せずに自分で個々の要素を編集することもできます。

シンプルなポイント・アンド・クリック・コントロールでスタイル設定できる5つの主なフォーム要素があります：

• フィールドスタイル
• ラベルスタイル
• ボタンスタイル
• コンテナスタイル
• 背景のスタイル。

それぞれの機能と、フォームスタイルの調整方法を見てみよう。

フィールドスタイル

フィールドスタイルは入力フィールドのサイズ、ボーダー半径、色を調整する場所です。もし、あなたのフォームをサイト内の他のフォームと同じにしたいのであれば、ここで見た目を形にしていきましょう。

これがデフォルトのスタイル設定です。

CSSの編集は必要なく、変更は簡単です。これらの異なるオプションの意味は以下の通りです：

• サイズフィールド全体のサイズを調整します。
• ボーダーボーダーのスタイルを制御します。オプションには、実線、破線、点線のボーダーがあります。
• ボーダーサイズ：フィールドのボーダーの太さを設定します。
• ボーダー半径：スマートでモダンな外観のために角を丸くすることができます。

これらのオプションの下には、「色」の設定もあります。これらの設定により、カラーピッカーを使用してフィールドのさまざまな側面に色を追加することができます。

フォームをWordPressテーマの色とシームレスに調和させたい場合は、これらのオプションから選択できます。そこに表示される色は使用しているテーマによって異なります。

デフォルトの色も選択できる。

上部のカスタムカラーでは、フォームフィールドの色をカスタマイズできます。カラーピッカーを使ったり、16進コードを入力したり、CSSを編集せずに不透明度を調整することができます。

例えば、入力フィールドのテキストにカスタムカラーを追加したい場合、カラーピッカーを使用することができます。追加したい色の16進コードをお持ちの場合は、その16進コードを直接貼り付けて正確な色を得ることもできます。

更新が完了したら、ブロックエディタでフォームに変更が反映されるのを確認できます。次にラベルスタイルの編集に移りましょう。

ラベルスタイル

ラベルはフォームフィールドの上に表示されるテキストです。例えば、名前やメールアドレスなどです。ラベルスタイルを調整することで、フォーム上のラベルのサイズと色をコントロールし、サイト全体で一貫した外観を作成することができます。

サイズドロップダウンでラベルのテキストサイズを変更することができます。サブラベルとヒントセクションでは、サブラベルの色を選択したり、フィールドの下に表示されるヒントを選択して、特定の情報を表示することができます。

エラーメッセージの色は、フィールドが予期しない入力を受けた場合に表示されるフィールド検証メッセージ用です。必須フィールドを示すアスタリスクにも同じ色が使われます。

フォームフィールドのセクションで行ったように、デフォルトカラー、テーマカラーを使用するか、カラーセレクターを使用してラベルスタイルにカスタムカラーを選択することができます。

ボタンスタイル

ボタンスタイルでは、フィールドスタイルと同様に、サイズ、ボーダー、ボーダー半径、色を変更することができます。これにより、ボタンを常に目立たせ、サイトの他のボタンとマッチさせることができます。

私が使っているテーマ（Frost）のデフォルトのスタイル設定はこんな感じです。

ボタンの色の選択は、複数選択肢、チェックボックス、評価、NPS アンケートなど、他のフォームフィールドでも使用されることに注意してください。

私が使っているテーマは、8pxの少し丸いボーダー半径を適用しています。ボーダーは「なし 」が選択されているので、ボタンにはボーダーの輪郭がありません。

フォームボタンのカスタマイズに関する詳しいアイデアについては、送信ボタンのベストプラクティスに関する詳細ガイドを読むことをお勧めします。

コンテナ・スタイル

WPFormsではカスタムスタイルのコンテナをフォームに追加することもできます。上記のセクションと同じ設定がほとんどですが、コンテナ独自のオプションが2つあります：

• パディング：フォームコンテナ内の間隔を調整します。
• シャドウ：特定の大きさのシャドウ効果を追加するか、または全く追加しないかを選択します。

私が使っているテーマは、これらのデフォルト・コンテナ設定を自動的に追加してくれる。

しかし、このデザインにあなた自身の創造的なタッチを加えたい場合は、自由に実験し、容器を調整してください。

背景スタイル

背景スタイルの設定では、背景画像や無地を追加して、フォームの注目度をさらに高めることができます。

便利なことに、WordPress のフォームに最適なストックフォトのライブラリが用意されています。ストックフォトから選択すれば、すぐにフォームに背景画像を追加できます。

また、カスタム画像をアップロードすることもできます。新しい画像をアップロードするか、WordPressのメディアライブラリから背景スタイルのオプションで簡単に選択できます。

そのためには、画像ドロップダウンからメディア・ライブラリを選択し、 画像の選択を押すだけです。

その後、WordPressのメディアライブラリーモデルが開き、新しい画像をアップロードするか、既存の画像を選択することができます。

さて、ここで終わりです。この時点でフォームのスタイルは完璧です。しかし、フォームスタイルにはもう一つ紹介したい機能があります。

WPFormsの高度なスタイリング機能にアクセスする 🎨.

上級

フィールド、ラベル、ボタンのスタイルの下に、Advancedのセクションがあります。この名前に惑わされないでください！

それを開くと、たくさんのカスタムCSSコードが表示されます。

WPForms 組み込みのスタイラスを使用すると、このカスタム CSS コードが自動的に生成され、ここに保存されます。この全く同じフォームスタイルをサイトの複数のフォームで使いたい場合は、この CSS コードをコピーして、それぞれのフォームスタイルの詳細設定に貼り付けてください。わずか数秒で、フォームが一致するようになります！

フォームのスタイルをデフォルトに戻したい場合は、スタイル設定のリセット ボタンをクリックします。

また、シンプルなフォームのスタイリングを行った後でも、スタイルシートに追加のカスタマイズを行いたい場合は、Additional CSS Class(es)のフィールドがあります。

それで本当に終わりです！フォームのスタイリングは超簡単だったでしょう？自分でCSSを書く必要はありません！

公開する前に保存してテストすることをお忘れなく！

コンタクトフォームのスタイリング - FAQ

WordPressのお問い合わせフォームをコードなしでスタイリングする方法について、よくある質問をいくつかご紹介します：

コンタクトフォームのプラグインでは、通常どのようなスタイリングオプションが利用できますか？

どのコンタクトフォームプラグインもカスタマイズのレベルは様々です。多くのプラグインではフォームのスタイルを編集する唯一の方法はカスタム CSS を使うことです。WPForms や Formidable Forms のような高度なオプションでは、フィールドのラベル、フィールドの境界線、エラーメッセージ、バリデーションメッセージ、送信ボタンのスタイルをコードなしでカスタマイズできます。

さらにWPFormsでは、カスタムヘッダー、カラースキーム、ライトテーマとダークテーマ、いくつかの設定済み通知テンプレートを使ってフォーム通知メールをカスタマイズすることができます。

コンタクトフォームの変更を公開する前にプレビューできますか?

WPFormsでは、フォームを公開する前にプレビューする方法がいくつかあります。最も簡単な方法は、フォームビルダーの上部にあるプレビューボタンを使用することで、埋め込み後にあなたのサイトの典型的なページでフォームがどのように表示されるかを確認することができます。

WordPress エディターページからフォームをプレビューすることもできます。フィールドと送信ボタンに加えたスタイル変更も表示されるフォームのプレビューを見たい場合は、WordPress エディターからプレビューオプションを使用することで、これらすべてのスタイル変更を確認することができます。

最後に、Elementorを使用してWPFormsで作成したフォームを埋め込む場合、Elementorのネイティブプレビューオプションを使用すると、ページに追加した他の要素と一緒にフォームのライブプレビューを見ることができます。

スタイル設定したコンタクトフォームがレスポンシブでモバイルフレンドリーであることを確認するにはどうすればよいですか？

WPFormsはデフォルトでレスポンシブ、モバイルフレンドリーに設計されています。つまり、WPFormsを使用して作成したフォームがすべてのデバイスでレスポンシブであることを保証するために特別な調整をする必要はありません。

ElementorでWPFormsをスタイルできますか？

はい、WPFormsはElementorと併用することで幅広いフォームスタイルオプションをサポートします。また、WPFormsはElementorとフォームを同期するための手動手順を実行することなく、自動的にElementorと統合されます。したがって、デフォルトのWordPressエディタを使用するのではなく、Elementorを使用してページを構築することを好む場合は、自由に以前にWPFormsで作成したあなたの連絡先フォームをスタイリングするためにElementorを活用することができます。

次に、WordPress のフォームを ChatGPT に接続します。

フォームのワークフローを自動化する方法を知りたいですか？ChatGPT を WordPress のフォームに接続し、AI で返信を効率化する方法をご覧ください。

フォームをより魅力的にする方法をお探しですか？ユーザーの注目を集めるインタラクティブなフォームを作成するヒントをご覧ください。

WordPressフォームを今すぐ作成

フォームを作る準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今すぐ始めましょう。WPForms Proにはたくさんの無料テンプレートが含まれており、14日間の返金保証がついています。

この記事がお役に立ちましたら、Facebookや TwitterでWordPressの無料チュートリアルやガイドをフォローしてください。