WordPress お問い合わせフォームのスタイルを変更する方法

公開: 2023-02-16

WordPress コンタクトフォームのスタイルを変更したいですか? それなら、このガイドはあなたのためです！ WordPress フォームのスタイリングが非常に簡単になる方法を学びます。詳細をご覧ください。

読了時間の目安：6分

第一印象を決めるチャンスは一度しかありません。

美しいフォルムで訪問者の注目を集めることは、優れた印象を与える方法です。

また、フォームに記入してもらうのにも最適な方法です。結局のところ、彼らがそれを見ないなら、どうやってそれを埋めることができるでしょうか?

Formidable Forms は、最高の WordPress Form Builder プラグインです。無料で手に入れよう！

したがって、基本的なフォームから美しいフォームに移行する準備ができている場合は、このガイドが最適です。

WordPress のお問い合わせフォームのスタイルを簡単に変更する 2 つの方法を紹介します。

それに入りましょう。

WordPressのお問い合わせフォームのスタイルを変更する方法

前述したように、フォームのスタイルをカスタマイズするには 2 つの方法があります

WordPress でフォームのコードを編集する
ビジュアルスタイラーでフォームビルダーを使用する

どちらを選択するかは、コーディングの快適さのレベルによって異なります。ただし、両方の方法を紹介するので、利用可能なすべてのオプションを理解できます。

方法 1: WordPress でフォームのコードを編集する

それで、あなたは真っ先にコーディングの海に飛び込みたいのですか？

すでにフォームが作成されており、それをカスタマイズしたいと想定しています。フォームをお持ちでない場合は、フォームの作成に関するガイドを参照して、開始してください。

ステップ 1: フォームの ID またはクラスを取得する

まず、フォームのIDまたはクラスを取得する必要があります。

これを行う簡単な方法は、Web サイトに移動し、フォームを右クリックして[検査]をクリックすることです。ここでは、子テーマ内にフォーム HTML テンプレートが表示されます。

Google の Developer Tools サイドバーがスライドして表示され、フォームのさまざまなコードセクションを表示できます。

最も重要なことは、カスタマイズしたい領域を見つけて、 IDまたはクラス名を追跡することです。これを使用して変更を加えます。

たとえば、お問い合わせフォームテンプレートの背景色を変更したい場合、コードの最も外側の部分を見つけます。この場合、それはdivですクラスapi-form-box 。

このコンソールからどのように見えるかをテストすることもできます.

div を右クリックしてAdd Attributeをクリックすると、背景色のスタイルを追加できます。

Enter キーを押すと、変更がすぐにウィンドウに表示されます。

しかし、心配しないでください。ページを更新すると、フォームは通常の状態に戻ります。

次に、WordPress 管理画面に移動して、必要な CSS コードの変更を行います。

ステップ 2: WordPress 管理パネルで CSS を変更する

フォームで変更したい点をいくつか書き留めたら、WordPress 管理者に連絡して開始してください。

次に、WordPress サイドバーで、 [外観] → [カスタマイズ] → [追加の CSS]を選択して、フォームのスタイルを設定します。

ここで、フォームの CSS クラスを入力できます。

たとえば、フォームのいくつかを変更することにしたので、入力したコードは次のとおりです。

Classにタグを付けるには、. クラス名の前。 IDの場合は#を付けます。

ただし、この方法を使用している場合は、CSS ルールについてさらに学習して、変更をよりよく理解することをお勧めします。

この例では、次のように分類されます。

.api-form-box は背景色を水色に変更しています
.frm-button-submit は、送信ボタンの背景を黄色に、テキストを黒に変更しています
.frm-submit はフォームのボタンを中央に配置しています

これらの変更により、フォームは次のようになります。

ここから、あなたの力は無限です。 CSSの使い方を学べば、フォームを自由にカスタマイズできます。

ただし、この方法にはいくつかの欠点があります。

更新すると、フォームのデザインが壊れて、もう一度やり直さなければならなくなる可能性があります。手間がかかるのは言うまでもありません。複数の連絡先フォームがある場合は、HTML コードを編集し、それぞれにカスタム CSS を追加する必要があります。

ただし、より簡単で壊れにくいものが必要な場合は、次の方法を確認することをお勧めします。

方法 2: ビジュアルスタイラーでフォームビルダーを使用する

コーディングは習得に時間がかかるスキルです。

そして多くの人は学ぶ時間がありません。それがあなたなら、フォームビルダーが最適なオプションです。

そして、私たちがお勧めするのは手ごわいフォームです。

これは、WordPress の最も高度なフォームビルダー WordPress プラグインです。つまり、フォームの作成はシンプルで時間を節約できるため、Web サイトの他の領域に時間を割くことができます。

Web サイトのフォームの種類に関係なく、Formidable はすべてをすばやく処理できます。

コーディングも手間もかかりません — 簡単なフォーム作成だけです。

選択できる他のフォームビルダー (WPForms、Gravity Forms など) がありますが、それらは Formidable に付属するスタイリング機能を提供していません。つまり、フォームがどのように見えるかについて、より多くの力を得ることができます。

Formidableのプレミアムプランもチェックすることをお勧めします.

フォームのスタイルを設定する必要はありませんが、多くの優れた機能を利用できます。

フォームデザインテンプレートへのアクセス
背景画像をカスタマイズする機能
フォームをすばやく開始するためのその他のフォームテンプレート
そして、はるかに

そのため、Formidable をインストールしてアクティブ化したら、すぐに開始できます。

手ごわいフォームを今すぐ入手！

フォームのスタイルを設定し、サイトで使用できるようにするための 3 つの簡単な手順は次のとおりです。

フォームを作成する
フォームのスタイルを設定する
フォームを表示する

ステップ 1: フォームを作成する

フォームのスタイルを設定するには、スタイルを設定するフォームが必要ですよね?

したがって、WordPress管理者に向かい、 Formidable → Forms → Add Newに移動します。

事前に作成された多数のテンプレート (プレミアム機能) のいずれか、または空白のフォームを選択して開始できます。

次に、フォームに名前を付けて[作成]をクリックします。

プラグインは、フォームを簡単に編集できるドラッグアンドドロップビルダーに移動します。

サイドバーメニューから、必要なフォームフィールドの追加、フィールドラベルのカスタマイズ、入力タイプの変更などを行います。

お問い合わせフォームを作成している場合は、次を追加することをお勧めします。

訪問者の名前のテキストフィールド
彼らに連絡する方法を電子メールで送信する
追加したいメッセージの段落

お問い合わせフォームを設定したら、 [更新]をクリックして変更を保存します。

次に、 [スタイル]タブに移動します。

ステップ 2: フォームのスタイルを設定する

[スタイル]タブの下に、いくつかのオプションが表示されます。

事前に作成されたデザインテンプレートの 1 つを選択して時間を節約するか (プレミアム)、独自のデザインを開始することができます。

独自のデザインを作成するには、 [手ごわいスタイル]の横にある 3 つのドットをクリックし、 [編集]をクリックします。 Formidable Style は Formidable のデフォルトのスタイルです。

これにより、フォームをカスタマイズできるフォーミダブルスタイルデザイナーが表示されます。

ラベル、入力フィールド、フォントサイズ、背景色のサイズと色を変更し、背景画像をアップロードすることもできます。

たとえば、 Cheap n' Cheesyというテスト Web サイトでは、ビジネスを反映するフォームを設計しました。

あなたとあなたのお問い合わせフォームの可能性は無限大です!

そのため、フォームをカスタマイズしたら、 [更新]をクリックして変更を保存します。

あとは表示させるだけです！

ステップ 3: フォームを表示する

フォームを表示するのは、作成するよりも簡単です。

まず、フォームを表示したい投稿またはページに移動し、新しい WordPress ブロックを追加します。

次に、 Formidable Formsブロックを検索して追加し、ドロップダウンメニューからフォームを選択します。

最後に、投稿またはページを更新すると、フォームがページに表示されます。

Formidableのすべてと同様に、簡単だと言いました。

手ごわいフォームを今すぐ入手！

サイトで WordPress コンタクトフォームのスタイルを設定する準備はできましたか?

お問い合わせフォームのスタイルを設定できる機能は、必要なものであり、望まないものです。

カスタマイズを伴う Contact Form 7 プラグインの検索が表示される場合があります。 Contact Form 7 CSS、WPCF7 の入力タイプのテキスト、または WPCF7 の入力タイプのメールのようなもの。

これらの 2 つの方法では、その必要はありません。この投稿では、WordPress でお問い合わせフォームをカスタマイズする方法を説明しました。これにより、フォームが希望どおりに見えます。カスタム HTML、CSS などを入力するか、Formidable Forms を使用するか。がっかりすることはありません。

だから、もう待たないでください。手ごわいフォームを手に入れて、フォームのデザインを始めましょう!

Facebook、Twitter、YouTube で私たちをフォローして、フォームのヒントやコツをもっと知りましょう!

手ごわいブログから詳細を読む

Formidable Forms は、現在入手可能な最速の WordPress フォームビルダープラグインの 1 つであることをご存知ですか? まだ使用していない場合は、無料のプラグインまたはフル機能のプロ版から始めましょう!