WordPressフォームのカスタマイズとスタイル設定の方法（簡単な2つの方法）

シンプルで野暮ったいWordPressフォームは、どんなにデザイン性の高いウェブサイトでも、未完成に見せたり、完全に場違いに見せたりすることがあります。

最悪なのは？ サイトの他の部分と一致しない場合、訪問者は入力することに不安を感じるかもしれません。

WordPress ブログを運営する中で、デザイン性の高いブランドフォームが大きな違いを生むことを学びました。

実際、フォームをサイトの色とレイアウトに合わせたところ、フォームの送信数が大幅に増加しました。

このガイドでは、WordPressフォームをカスタマイズしてスタイル設定するための、シンプルでありながら強力な2つの方法を紹介します。これにより、見た目が良くなるだけでなく、パフォーマンスも向上します。🚀

WordPressフォームをカスタマイズしてスタイル設定する理由

WordPressフォームをカスタマイズすると、ブランドに合わせることができ、信頼を築き、フォームのコンバージョン率を大幅に向上させることができます。フォームをスタイル設定することで、見た目がより魅力的になり、訪問者がナビゲートしやすくなります。

たとえば、ユーザー登録フォームプラグインを使用してウェブサイトに登録フォームを追加した場合、そのレイアウトが少し退屈であることがわかります。これは、訪問者の注意を引くことができず、フォームの入力を思いとどまらせる可能性があります。

フォームをカスタマイズすると、WordPressのテーマやブランディングに合わせて、より魅力的にすることができます。

スタイル設定されたWordPressフォームはナビゲートしやすく、より多くのユーザーに入力を促すことができるため、コンバージョンが増加する可能性があります。

スタイル設定されたフォームは、ユーザー間のブランド認知度を高めることもできます。たとえば、ウェブサイトのロゴや会社のシグネチャーカラーを使用して、フォームをより記憶に残る効果的なものにすることができます。

それでは、WordPressフォームを簡単にカスタマイズおよびスタイル設定する方法を、ステップバイステップでご紹介します。

この投稿では2つの方法をカバーします。使用したい方法にジャンプするには、以下のクイックリンクを使用できます。

さあ、始めましょう！

方法1：WPFormsでWordPressフォームをカスタマイズ・スタイル設定する方法（コード不要）

WPFormsは、ドラッグアンドドロップビルダーを備えた最高のWordPressコンタクトフォームプラグインです。2,000以上の既製のテーマと組み込みのカスタマイズオプションを提供し、コードなしでフォームをスタイル設定でき、さらにフォーム作成のためのAIツールも備えています。

WPBeginnerでは、コンタクトフォーム、ウェブサイトの移行、および年次アンケートにWPFormsを使用しています。私たちの経験についてさらに読むには、完全なWPFormsレビューをご覧ください。

ステップ1. WPFormsプラグインのインストールと有効化

まず、WPFormsアカウントにサインアップしましょう。

ウェブサイトで、「今すぐWPFormsを入手」ボタンをクリックし、プランを選択して、画面の指示に従って登録を完了してください。

次に、WPFormsプラグインをインストールして有効化する必要があります。

WordPress管理画面で、プラグイン » プラグインを追加に移動します。

次の画面で、検索バーを使用してWPFormsプラグインをすばやく見つけることができます。

「今すぐインストール」をクリックし、次に「有効化」をクリックして、WordPressサイトで有効にします。

詳細な手順については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

Proバージョンを使用している場合は、WordPress管理画面のサイドバーにあるWPForms » 設定ページにアクセスして、有効化時にライセンスキーを入力してください。

この情報は、WPFormsウェブサイトのアカウントで見つけることができます。

次に、管理ダッシュボードのWPForms » 設定に移動し、「モダンマークアップを使用する」チェックボックスが選択されていることを確認してください。

WordPressブロックエディター内の高度なデザイン設定とカスタマイズオプションを有効にするには、モダンマークアップを有効にする必要があります。

設定を保存するには、「変更を保存」ボタンをクリックすることを忘れないでください。

ステップ2. WordPressフォームの作成

ここから、WordPress管理ダッシュボードのWPForms »新規追加画面に移動して、フォームを作成しましょう。

ここでフォームの名前を入力することから始められる「設定」ページに移動します。

その後、好きなフォームテンプレートを選び、その上にカーソルを合わせ、「テンプレートを使用」ボタンをクリックします。このチュートリアルでは、シンプルな問い合わせフォームを作成し、ウェブサイトに追加します。

これにより、テンプレートがWPFormsのフォームビルダーで起動され、右側にフォームのプレビュー、左側の列にフォームフィールドが表示されます。

ここから、好きなフォームフィールドをドラッグ＆ドロップして、好みに合わせてフォームに追加できます。フィールドの並べ替えや削除も可能です。

詳細な手順については、WordPressでコンタクトフォームを作成する方法に関するチュートリアルをご覧ください。

フォームの作成が完了したら、上部にある「保存」ボタンをクリックしてフォームビルダーを終了します。

ステップ3. WPFormsテーマでフォームデザインをカスタマイズ

これで、フォームをブロックエディターに追加してカスタマイズする準備ができました。フォームビルダー内の「埋め込み」ボタンをクリックしましょう。

埋め込みウィザードが開きます。ここで、次のいずれかのオプションを選択できます。

• 既存のページを選択 – WordPressサイト上のページを選択し、WPFormsブロックを使用してフォームを追加します。
• 新しいページを作成 – これにより、フォームが新しいページに自動的に追加されます。

このガイドでは、「新しいページを作成」を選択します。

次に、新しいページの名称を追加します。たとえば、「お問い合わせ」などです。

ここで完了したら、「開始する！」をクリックしてください。

フォームがすでに埋め込まれた状態で、ページエディターが開きます。

詳細については、WordPressにフォームを埋め込む方法に関するガイドをご覧ください。

フォームを追加したら、次はカスタマイズとスタイリングを行います。

これを行うには、画面の右側にあるブロックパネルを開き、「テーマ」セクションまでスクロールダウンする必要があります。

ここから、40以上のデザイン済みテンプレートのライブラリから選択して、フォームにすぐに美しい外観を与えることができます。

次に、「フィールドスタイル」セクションまでスクロールして、フォームをさらにカスタマイズできます。

ドロップダウンメニューからフォームフィールドのサイズを選択でき、境界線のサイズや半径を設定することもできます。

次に、カラーピッカーツールを使用して、フォームフィールドの背景、テキスト、境界線の色を変更できます。

ここでは、ブランドのシグネチャーカラーや、他のWordPressブログで使用されている色を使用して、視覚的に魅力的なフォームを作成できます。

これが完了したら、「ラベルのスタイル」セクションまでスクロールし、ドロップダウンメニューからラベルのフォントサイズを選択できます。

その後、フォームに表示されるフィールドラベル、サブラベル、およびエラーメッセージのフォント色を変更することもできます。

フォーム内のボタンをカスタマイズするには、「ボタンのスタイル」セクションまでスクロールダウンし、ドロップダウンメニューからサイズを選択します。

フォームの送信ボタンの境界線の半径を設定したり、背景色やテキスト色を変更したりすることもできます。

フォームのカスタマイズが完了したら、上部にある「更新」または「公開」ボタンをクリックするだけで設定が保存されます。

これで、WordPressサイトにアクセスして、スタイル設定されたフォームが機能していることを確認できます。

方法2：CSSでWordPressフォームをスタイル設定する方法（高度なカスタマイズ）

WPFormsが提供するカスタマイズオプションを使用したくない場合や、CSSを使用して異なるカスタマイズを適用したい場合は、カスタムCSSスニペットを使用することもできます。

ステップ1. WPFormsを使用してフォームを作成する

まず、WPFormsを使用してフォームを作成する必要があります。これは、ドラッグアンドドロップビルダーを備えた最高のWordPressコンタクトフォームプラグインであり、2,000以上のテンプレートを提供して、コンタクトフォーム、ファイルアップロードフォーム、登録フォーム、RSVPフォームをすばやく作成するのに役立ちます。

詳細な手順については、WordPressでコンタクトフォームを作成する方法に関するチュートリアルを参照するか、方法1を参照してください。

それが完了したら、フォームIDを取得しましょう。カスタムコードスニペットに必要になります。

これを行うには、WordPressダッシュボードのWPForms » すべてのフォームページにアクセスし、スタイルを設定したいフォームのWPForms ID番号をコピーします。

ステップ2. WPCodeのインストールと有効化

WPCodeは、カスタムCSSを追加してフォームをスタイル設定するための、最も安全で簡単なWordPressコードスニペットプラグインです。エラーを防ぐためのスマートコード検証機能を備え、WordPressのカスタマイズのための既製のスニペットライブラリを提供します。

WPBeginnerでは、WPCodeを使用して、ビジネスウェブサイト全体にカスタムコードスニペットを追加および管理しています。私たちの経験について詳しくは、完全なWPCodeレビューをご覧ください。

まず、WPCodeアカウントを作成できます。WPCodeのウェブサイトで、「今すぐWPCodeを入手」ボタンをクリックし、プランを選択して、画面の指示に従ってサインアップしてください。

次に、WPCode プラグインをインストールして有効化しましょう。

WordPressの管理画面で、プラグイン » プラグインを追加に移動します。

次に、検索ボックスを使用して WPCode プラグインをすばやく見つけることができます。

表示されたら、「今すぐインストール」ボタンをクリックし、「有効化」をクリックします。

詳細な手順については、WordPressプラグインのインストール方法に関する初心者向けガイドを参照してください。

ステップ3. WordPressフォームをカスタマイズするためのカスタムコードスニペットの追加

有効化したら、WordPressダッシュボードからCode Snippets » + スニペットを追加ページにアクセスします。

次に、「カスタムコードを追加 (新規スニペット)」オプションにカーソルを合わせ、「スニペットを使用」ボタンをクリックします。

次に、コードの種類を選択するように求めるポップアップが表示されます。

「CSS スニペット」を選択しましょう。

これにより、「カスタムスニペットの作成」ページに移動し、コードスニペットの名前を入力することから始めることができます。

その後、画面右上のドロップダウンメニューから「CSSスニペット」オプションを選択します。

次に、次のコードを「コードプレビュー」ボックスにコピー＆ペーストします。!important タグは、これらのスタイルをテーマのデフォルト設定よりも優先するようにブラウザに指示します。

#wpforms-0000 .wpforms-form {
    background-color: #ADD8E6 !important;
	font-family: 'Arial', sans-serif !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
    border-radius: 20px !important;
}

画面上ではこのようになります:

次に、ブランド固有の色に合わせるために、#ADD8E6 のような 16 進数コードを変更できます。これらのコードは、無料のオンライン カラーピッカーツールを使用して見つけることができます。

また、お好みのフォントファミリーを追加したり、コードスニペットを変更してフォームのパディング（ボックス内の間隔）と境界線の半径（角の丸み）を設定したりすることもできます。

これが完了したら、「挿入」セクションまでスクロールし、「自動挿入」モードを選択します。

コードは有効化するとサイトで自動的に実行されます。

最後に、ページの上部に戻り、スイッチを「アクティブ」に切り替えます。

その後、「スニペットを保存」ボタンをクリックして設定を保存します。

これで、WordPress フォームは CSS スニペットに従って自動的にカスタマイズされ、表示を確認できます。

ただし、まだフォームをウェブサイトに追加していない場合は、ブロックエディターでページまたは投稿を開くだけです。

そこに着いたら、左上の「+」ボタンをクリックしてブロックメニューを開き、WPFormsブロックを追加します。

その後、ブロック自体のドロップダウンメニューで、CSSスニペットを使用してスタイル設定したフォームを選択します。

最後に、「更新」または「公開」ボタンをクリックして設定を保存します。

次に、ブラウザのキャッシュが最近の変更を非表示にすることがあるため、IncognitoまたはプライベートウィンドウでWordPressサイトにアクセスして、カスタマイズされたフォームが機能していることを確認できます。

ボーナスのヒント 🧑‍💻: カスタムウェブサイトページを簡単に作成する方法

WordPressフォームをスタイル設定して、サイトをより魅力的で視覚的に面白くすることができます。また、SeedProdを使用して、独自の完全にカスタマイズされたウェブサイトページをデザインすることも可能です。これは、コードなしでウェブサイトページやテーマを作成するための最高のドラッグアンドドロップWordPressページビルダープラグインです。

他のソリューションと比較するために、SeedProdを徹底的にテストしました。私たちの経験について詳しくは、完全なSeedProdレビューをご覧ください。

SeedProdには、既製のテンプレートとサイトキット、簡単なカスタマイズオプション、カラーパレット、高度なページブロックもあります。さらに、SeedProdエディター内にWPFormsフォームを簡単に埋め込むことができます。

詳細については、WordPressでランディングページを作成する方法に関するチュートリアルを参照してください。

WordPressフォームのカスタマイズとスタイル設定に関するFAQ

まだ質問がありますか？読者からよく寄せられる質問とその回答を以下に示します。

WordPressフォームでカスタマイズできることは何ですか？

サイトのデザインに合わせて、フィールド、レイアウト、色、フォント、ラベル、エラーメッセージ、送信ボタンをカスタマイズできます。

WordPressフォームをスタイル設定するためにコーディングスキルは必要ですか？

いいえ。WPFormsのような優れたプラグインを使用すると、コードなしで組み込み設定を使用してフォームをカスタマイズおよびスタイル設定できます。

フォームをウェブサイトのブランディングに合わせることはできますか？

はい。フォームがWordPressテーマと自然に調和するように、ブランドカラー、フォント、スペーシングを使用できます。

フォームのカスタマイズとスタイル設定は、その機能に影響しますか？

ビジュアルの変更は機能に影響しません。必須フィールドやルールを変更した場合は、フォームをテストしてください。

後でフォームのスタイルを変更できますか？

もちろんです。フォームを最初から再構築することなく、いつでもデザインを更新できます。

WordPressでのフォーム使用に関するその他のガイド

この記事が、WordPressフォームのカスタマイズとスタイル設定の方法を学ぶのに役立ったことを願っています。

また、以下のチュートリアルも参照してください。

• WordPressフォームからGoogleドライブにファイルをアップロードする方法
• WordPressフォームでユーザーがライブ写真や動画を撮影できるようにする方法
• WordPressフォームをよりインタラクティブにするためのヒント
• n8nでWordPressフォームを自動化して手作業を数時間節約する方法
• おすすめのGoogleフォーム代替（より優れた機能＋無料）

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。