お問い合わせフォームをカスタマイズする方法7簡単な方法でスタイルを設定
公開: 2022-04-10お問い合わせフォームは、すべてのWebサイトの非常に重要な要素です。 私たちはそれらを使用してさまざまな種類の情報を収集および共有するため、それらが当社のWebサイトの他の部分と同じように見えるように注意する必要があります。 わかりすぎて、ページに属していないようなスタイルの連絡フォームでは、ユーザーの信頼感を植え付けることができず、視聴者が欲しいときに失ってしまうのは残念です。さらに一歩進んで、連絡フォームにデータの一部を残します。
お問い合わせフォームを作成する非常に人気のある方法は、お問い合わせフォーム7プラグインを使用することです。これは、あらゆる種類のお問い合わせフォームを簡単に作成できる多くのWordPressテーマに無料で含まれていることが多い実用的で使いやすいツールです。 このプラグインは、連絡フォームの作成に関するすべての技術的側面をカバーしています。スタイルを設定するには、追加のスキルまたは別のプラグインが必要です。
この記事では、無料のツールを使用して、Webサイトのデザインに合わせて連絡先フォームを簡単にスタイル設定できることを示します。
詳細については、しばらくお待ちください。
- お問い合わせフォームのスタイルを設定するためのElementorにQiアドオンを使用する
- お問い合わせフォームスタイルの設定
Qi Addons for Elementorは、 60個のウィジェットが付属する無料の機能豊富なプラグインであり、フォームのスタイル設定に役立つように特別に作成されたContactForm7ウィジェットが含まれています。 プラグインはコーディングの知識を必要とせず、文字通り、誰でも快適に使用できます。 お問い合わせフォームを作成するオプションはありませんが、お問い合わせフォーム7プラグインを使用している場合は、Qiを使用して、ウェブサイトのスタイルに完全に一致するようにフォームをカスタマイズおよび再設計できます。
Elementor用のQiアドオンは、インストールと構成が簡単で、手順は他のプラグインの場合とほとんど同じです。
インストール後、スタイルを設定するお問い合わせフォームがあるページに移動し、Elementorで編集することを選択します。
次に、左側のメニューの検索フィールドに「Contact Form 7 」と入力して、ContactForm7ウィジェットを見つけます。
さて、それを手に入れたら、それをクリックして、お問い合わせフォームを置きたい場所にカーソルを合わせます。
この方法で追加するフォームは、Contact Form 7プラグインで作成したフォームです。このウィジェットは、フォームのスタイル設定を支援するためだけに作成されており、フォームを作成することはできません。 これで、お問い合わせフォームが希望の場所に配置され、左側のメニューに[お問い合わせフォーム7]ウィジェットの設定が表示されます。
メニューの最初のタブには、ページに表示するお問い合わせフォームの種類を選択するオプションがあります。 お問い合わせフォーム1、ニュースレター、お問い合わせの3つのオプションから選択できます。もちろん、以前にサイト用に作成したフォームのいずれかを選択できます。 それでは、当サイトの「お問い合わせ」フォームをどのようにカスタマイズしたかをお見せしましょう。
フォームのスタイルを設定するためのオプションを開くには、[スタイル]タブをクリックします。
最初のオプションはラベルタイポグラフィを参照します。ここでは、フォント、フォントのサイズ、ラベルの単語間の間隔、フォントスタイル、単語内の文字間の間隔を設定できます。すばらしいのは、すべての変更を確認できることです。すぐに生きるので、盲目的に何もしていません。
下の写真では、私たちの選択がラベルのタイポグラフィにどのように反映されているかを正確に見ることができます。
次のオプションは、ラベルの色を参照します。
必要に応じて、独自のシェードを作成できます。 ページの背景色にぴったり合うため、ラベルにはダークブルーを選択します。
これで、ラベルスタイルがすべて設定されたら、次の設定は入力スタイルを参照します。
ここにも同様のオプションがあります。入力するタイポグラフィのフォントスタイル、サイズ、色を選択できます。 デフォルトのように白にしたくない場合は、入力フィールドの背景色を設定することもできます。 ここには、入力フィールドの境界線スタイルを調整するための設定もあり、実線、破線、溝、点線、二重、またはなしから選択でき、オプションごとに追加の調整を行うことができます。
入力フィールドがアクティブなときに、さまざまなスタイルを設定することもできます。 すべて同じオプションを自由に使用できますが、入力フィールドがアクティブな場合にのみ適用されます。
次の設定はチェックボックスのスタイルを参照します。 この小さな要素はお問い合わせフォームで非常に重要であり、これはYouTubeのウェブサイトユーザーに何らかの選択肢を提供するステップであるため、見栄えがよく、簡単にアクセスできる必要があります。
Qiを使用すると、この要素を簡単に完璧に見せることができます。 チェックボックスの入力サイズを設定できます。2つのチェックボックスの間、およびチェックボックスと他の入力フィールドの間には、多少のスペースを残すことができます。 この場合、私たちの選択がお問い合わせフォームにどのように影響するかを下の写真ではっきりと見ることができます。
知っておくべき次の設定は、ボタンスタイルの設定です。
ボタンの背景の色を変更したり、ボタンの周囲の境界線をさまざまな色やスタイル（実線、破線、点線）に設定したりできます。 [ボタンの色]オプションで目的の色を選択して、ボタンのテキストの色を変更することもできます。 すべての変更がすぐに表示されるため、どの設定がお問い合わせフォームのどの要素を参照しているかを簡単に理解できます。
ホバー時にボタンのスタイルを変更する場合は、[アクティブ]タブをクリックして設定を調整します。ボタンのホバーの色、ボタンのホバーの背景色、ボタンのホバーの境界線の色などを調整できます。
お問い合わせフォームの外観に満足したら、 [間隔スタイル]タブの設定を開いて間隔を調整できます。 ここで、連絡先フォームのすべての要素の間隔を調整できます。
グローバルスタイル設定は、お問い合わせフォームの配置スタイルを参照します。 左、中央、右の配置から選択できます。
エラースタイル設定を使用すると、誰かがフォームに正しいデータを入力しなかった場合に表示されるエラーメッセージのスタイルを制御できます。 エラーメッセージの位置、タイポグラフィ、色を簡単に設定できます。
応答スタイル設定を使用すると、連絡先フォームに挿入される応答の詳細を微調整できます。 フォント、フォントの色、応答パディング、応答マージン、および境界線の種類を制御できます。
誰かがメッセージを送信した後のフォームは次のようになります。
そして、ちょうどそのように、あなたはあなたのために働く準備ができているあなたのページにエレガントな連絡フォームを持っています。
すべてをまとめる
ElementorのQiAddonsの優れている点は、ライブで行ったすべての変更を確認できるため、さまざまなオプションをすばやく移動して、直感的に使用する方法を学ぶことができることです。 お問い合わせフォームの追加は特にクリエイティブな作業ではありませんが、このプラグインを使用すると、その場合でもクリエイティブになります。 お問い合わせフォームの外観は、ユーザーの認識に大きな影響を与える可能性があります。この部門でも同じ基準を提供できれば、Webサイト、ブランド、およびビジネスにとって大きなプラスになります。
この記事がお役に立てば幸いです。 あなたがそれを好きなら、これらの記事のいくつかもチェックしてください！
- 持つ価値のあるボタンプラグインのような最高のWordPress
- WordPressボタンを作成する4つの簡単な方法
- ボタンのデザインのヒント：訪問者からクリックを獲得する方法