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

単純で使いにくいWordPressフォームは、どんなにデザイン性の高いウェブサイトでも、未完成に見えたり、完全に場違いに見えたりすることがあります。最悪なのは？訪問者は、サイトの他の部分と一致しない場合、記入することに不安を感じるかもしれません。

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

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

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

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

プラグインを使用してWordPressウェブサイトにフォームを追加すると、そのレイアウトは通常シンプルで地味な見た目であることがわかります。

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

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

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

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

それを踏まえた上で、WordPressフォームを簡単にカスタマイズしてスタイルを設定する方法を、ステップバイステップでご紹介します。この記事では2つの方法を取り上げ、使用したい方法にジャンプするには以下のクイックリンクを使用できます。

• 方法1：WPFormsを使用してWordPressフォームをカスタマイズしてスタイルを設定する方法（コード不要の方法）
• 方法2：CSSでWordPressフォームをスタイル設定する方法（高度なカスタマイズ）
• ボーナスのヒント 🧑‍💻: カスタムウェブサイトページを簡単に作成する方法

さあ、始めましょう！

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

WPFormsを使用すると、WordPressフォームを簡単にカスタマイズしてスタイルを設定できます。これは市場で最高のWordPressコンタクトフォームプラグインであり、600万以上のウェブサイトで使用されています。

私たちはWPFormsを多くのフォームタイプに使用しており、プラグインの詳細については、詳細なWPFormsレビューで確認できます。

WPFormsには、あらゆる種類のフォームを非常に簡単に作成できるドラッグ＆ドロップビルダーが付属しています。コーディング不要で、2,000以上の既製のテーマと組み込みのカスタマイズオプションの広範なライブラリさえあります。

また、簡単なプロンプトを使用してカスタムフォームをゼロから作成するのに役立つAIツールも備わっており、ドロップダウン、ラジオボタン、チェックボックスなどのフィールドの複数の選択肢を生成できます。

まず、WPForms プラグインをインストールして有効化する必要があります。詳細な手順については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。

アクティベーション後、WordPress管理サイドバーのWPForms » 設定 ページにアクセスしてライセンスキーを入力してください。

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

それが完了したら、WordPressダッシュボードからWPForms »新規追加画面に移動します。

ここから「テンプレートの選択」ページに移動し、フォームの名前を入力することから始めることができます。その後、好きなフォームテンプレートを選択し、その下の「テンプレートを使用」ボタンをクリックします。

このチュートリアルの目的で、簡単な問い合わせフォームを作成してウェブサイトに追加します。

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

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

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

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

その後、WordPressダッシュボードからWPForms設定ページにアクセスし、「モダンマークアップを使用」チェックボックスをクリックする必要があります。これを怠ると、ブロックエディターでWPFormsのカスタマイズ設定が利用できなくなります。

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

次に、作成したフォームを追加したいページまたは投稿を開きます。フォームを追加します。

ここから、左上隅にある追加ブロック「+」ボタンをクリックしてブロックメニューを開き、WPFormsブロックを追加する必要があります。

それが完了したら、ブロック自体のドロップダウンメニューからサイトに追加したいフォームを選択するだけです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

これを行うには、まず、市場でNo.1のフォームビルダーであるWPFormsを使用してフォームを作成する必要があります。

ドラッグ＆ドロップビルダーを使用し、2,000以上のテンプレートが付属しているため、お問い合わせフォーム、ファイルアップロードフォーム、登録フォーム、RSVPフォームなど、さまざまなフォームをすばやく作成できます。

詳細な手順については、WordPressで問い合わせフォームを作成する方法のチュートリアルを参照するか、方法1をご覧ください。

フォームを作成したら、WPCodeを使用してカスタマイズします。これは市場で最高のWordPressコードスニペットプラグインであり、WordPressフォームのスタイリングのためにCSSコードを追加する最も簡単で安全な方法を提供します。

当社のビジネスウェブサイトの一部では、WPCodeを使用してカスタムコードスニペットを追加および管理しており、非常にうまく機能しています。ツールの詳細については、WPCodeの完全なレビューをご覧ください。

まず、WPCodeプラグインをインストールして有効化する必要があります。詳細な手順については、WordPressプラグインのインストール方法に関する初心者向けガイドを参照してください。

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

そこに着いたら、「カスタムコードを追加する（新規スニペット）」オプションの下にある「スニペットを使用する」ボタンをクリックするだけです。

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

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

次に、次のコードを「コードプレビュー」ボックスにコピーして貼り付けます。

#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;
}

それが完了したら、カスタマイズしたいフォームのショートコードで上部にあるデフォルトのショートコードを置き換える必要があります。

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

その後、コードのwpforms-の行の隣にフォームのID番号を貼り付けます。これで、すべてのコードはこの特定のフォームでのみ実行されます。

次に、コードスニペットを変更することで、背景色を簡単に変更したり、好みのフォントファミリーを追加したり、フォームのパディングとボーダーラディウスを設定したりできます。

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

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

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

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

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

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

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

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

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

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

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

WordPressフォームのスタイリングは、サイトをより魅力的で視覚的に面白くするための1つの方法にすぎません。SeedProdを使用して、独自のカスタムウェブサイトページをデザインすることもできます。

これは市場で最高のWordPressページビルダープラグインです。コードを使わずに魅力的なページを作成できます。

当社のパートナーブランドの中には、SeedProd を使用してウェブサイト全体を構築した企業もあります。これは、ランディングページにとどまらない、強力なドラッグ＆ドロップビルダーです！ 当社の SeedProd レビューで、このツールについて詳しくご覧ください。

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

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

この記事が、WordPressフォームのカスタマイズとスタイリングの方法を学ぶのに役立ったことを願っています。また、WordPressフォームにクーポンコードフィールドを追加する方法に関するチュートリアルや、WPForms対Gravity Forms対Formidable Formsの比較もご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。