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

WordPressのフォームをどのようにスタイリングしたらよいか悩んでいませんか？

サイトのデザインに合わせてフォームをカスタマイズできます。これにより、サイトがより魅力的でプロフェッショナルな外観になり、ユーザーエクスペリエンスが向上します。

この投稿では、WordPressのフォームを簡単にカスタマイズする方法を順を追って説明します。

なぜ WordPress フォームをカスタマイズするのか?

プラグインを使ってWordPressサイトにフォームを追加すると、そのレイアウトがシンプルで地味なことに気づくでしょう。

例えば、ユーザー登録フォームのプラグインを使ってサイトに登録フォームを追加した場合、そのレイアウトは少し退屈なものになるでしょう。これでは、訪問者の注意を引くことができず、フォームに入力する意欲さえなくしてしまいます。

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

WordPressのフォームをスタイリングすることでナビゲーションが簡単になり、より多くのユーザーがフォームに入力するようになるため、より多くのコンバージョンにつながる可能性があります。

スタイリングされたフォームは、ユーザーのブランド認知度を高めることもできます。例えば、サイトのロゴや特徴的な企業カラーを使用して、フォームをより印象的で効果的なものにすることができます。

それでは、WordPressのフォームを簡単にカスタマイズする方法を順を追って見ていきましょう。この投稿では2つの方法を取り上げますので、以下のクイックリンクから使いたいほうにジャンプしてください：

方法1: WPFormsでWordPressフォームをカスタマイズする方法（コード不要の方法）

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

WPFormsはドラッグ＆ドロップでフォームを作成することができます。加えて、それもプリメイドテーマと任意のコーディングを必要としないあなたのフォームのためのビルトインカスタマイズオプションのライブラリを持っています。

さらに詳しく知りたい方は、WPFormsのレビューをご覧ください。

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

有効化した後、WordPress管理サイドバーからWPForms ” 設定ページにアクセスし、ライセンスキーを入力してください。

この情報はWPFormsサイトのアカウントで確認できます。

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

テンプレートの選択」ページが表示されますので、フォームの名前を入力します。その後、好きなフォームテンプレートを選び、その下にある「テンプレートを使用」ボタンをクリックします。

このチュートリアルでは、シンプルなお問い合わせフォームを作成し、サイトに追加します。

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

ここから、お好みのフォームフィールドをフォームにドラッグ＆ドロップすることができます。また、フィールドの並べ替えや削除も可能です。

詳しいお問い合わせフォームは、WordPressでお問い合わせフォームを作成する方法のチュートリアルをご覧ください。

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

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

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

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

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

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

フォームを追加したら、次はカスタマイズとスタイル設定です。

これを行うには、画面右側のブロックパネルを開き、「テーマ」セクションまでスクロールダウンする必要があります。ここから、40以上のデザイン済みテーマのライブラリから選ぶことができ、フォームを即座に美しく見せることができます。

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

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

次に、カラーピッカーツールを使って、フォームフィールドの背景色、テキスト色、枠線の色を変更することができます。

ここでは、あなたのブランドの特徴的な色やWordPressブログの他の部分で使用されている他の色を使用して、視覚的に魅力的なフォームを作成することができます。

ラベルのフォントサイズをドロップダウンメニューから選択できます。

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

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

また、枠線の半径を設定したり、フォームの送信ボタンの背景色や文字色を変更することもできます。

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

これで、あなたのサイトにアクセスして、スタイル付き WordPress フォームが実際に表示されるようになります。

方法2: WordPressのフォームをCSSでスタイルする方法 (高度なカスタマイザー)

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

そのためには、まずWPFormsを使ってフォームを作成します。WPFormsは市場でNo.1のフォームビルダーです。

お問い合わせフォーム、ファイルアップロードフォーム、登録フォーム、RSVPフォームなど、様々なテンプレートをドラッグ＆ドロップで作成できます。

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

フォームを作成したら、次はWPCodeを使ってカスタマイズしましょう。WPCodeは市場で最高のWordPressコードスニペットプラグインです。

WordPressのフォームをスタイリングするためのCSSコードを追加する最も簡単で安全な方法です。

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

有効化したら、WordPressダッシュボードから Code Snippets ” + Add Snippetページにアクセスします。

カスタムコードを追加する（新規スニペット）」設定の下にある「スニペットを使用する」ボタンをクリックします。

カスタムスニペットの作成」ページが表示されますので、まずはコードタイプ名を入力してください。

その後、画面の右隅にあるドロップダウンメニューから「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 ” All Formsページにアクセスし、スタイルを設定したいフォームの WPForms ID 番号をコピーします。

その後、コードのWPForms-行の横にフォームのID番号を貼り付ける。これで、すべてのコードがこの特定のフォームでのみ実行されるようになります。

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

挿入」セクションまでスクロールダウンし、「自動挿入」モードを選択する。

有効化したコードは、あなたのサイトで自動的に実行されます。

最後に、ページの一番上までスクロールして戻り、スイッチを「有効化」に切り替える。

その後、「Save Snippet」ボタンをクリックして設定を保存します。

これでWordPressフォームがCSSスニペットに従って自動的にカスタマイズされ、表示できるようになります。

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

左上の’+’ボタンをクリックしてブロックメニューを開き、WPFormsブロックを追加します。

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

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

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

ボーナス：カスタマイザーページの作り方

WordPressのフォームをスタイリングすることは、サイトをより魅力的で視覚的に面白いものにする一つの方法に過ぎません。また、SeedProdを使用して、完全にカスタマイズされたサイトページをデザインすることもできます。

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

SeedProdは、ドラッグアンドドロップビルダー、既製のテンプレートとサイトキット、簡単なカスタマイズオプション、カラーパレット、および高度なページブロックが付属しています。さらに、SeedProdエディター内にWPFormsフォームを簡単に埋め込むことができます。

SeedProdを使って、バイラルウェイトリストページ、セールスページ、メンテナンスページ、カミングスーンページなどを作成することもできます。

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

この投稿が WordPress フォームのカスタマイズとスタイルの作り方を学ぶ助けになれば幸いです。WordPress フォームにクーポンコードフィールドを 追加するチュートリアルやWPForms vs Gravity Forms vs Formidable Forms の比較もご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.