WordPressエージェンシーのクライアントフォームを作成する–ElementorとContactFormPluginを使用する

WordPress開発ビジネスを所有していて、現在インターネットからの問い合わせを受けている場合は、効果的なクライアントフォームを使用して、販売プロセスを合理化し、サービスを強化できます。 では、なぜ心理的な観点から優れたクライアントフォームが必要なのですか？ そして、これをあなたのビジネスにどのように実装して、収益額を3倍にするのですか？ Elementorとお問い合わせフォームプラグインを使用してWordPressエージェンシーのクライアントフォームを作成する方法の技術的知識をあなたと共有します。

私が指摘しようとしている要素はたくさんあります。 しかし、最初に、なぜ専用のクライアントフォームを作成するのか、そしてなぜこの種の連絡フォームが必要なのかを説明したいと思いました。

一般的なお問い合わせフォームと専門のお問い合わせフォーム

人々がウェブサイトに来て下にスクロールすると、（WordPressサイトだけでなく）多くのウェブサイトでおそらく何百万回も見られたかなり標準的な連絡フォームが表示されます。

誰かがあなたのウェブサイトで質問をするとき、あなたはあなたの次のステップが何であるかについて非常に注意深く考えなければなりません。 あなたがどのように反応するかに応じて、あなたは「ただのウェブ男」として見られるか、インターネットの力を使ってクライアントの目標を実現することができる誰かとして見られるでしょう。 ご想像のとおり、専用のクライアントフォームを使用すると、より多くの収益を得ることができます。

そして、これはこの投稿で作成する特殊なクライアントフォームです。

クライアントフォームの完全な画像については、こちらをご覧ください。

クライアントがこのクライアントフォームを使用してメールを送信する場合は、次のように返信します

• クライアントは、Calendlyアプリを使用してあなたとの約束を予約する必要がありました
• クライアントは上記のクライアントフォームに記入する必要がありました

このフォームを非常に効果的にするのに役立つ要素についても説明しながら、このフォームを作成する方法を見てみましょう。

ステップ1：プラグインをインストールする

私がお勧めする素晴らしい（そして無料の）お問い合わせフォームプラグインはWPFormsです。 [ダッシュボード] > [プラグイン] > [新規追加]に移動して、プラグインをインストールしてアクティブ化できます。

次に、同じ方法で無料のElementorページビルダーをインストールしてアクティブ化します。

必要なツールをすべて揃えたら、すぐに始めます。

ステップ2：Elementorでクライアントフォームのページを作成する

クライアントの連絡フォームを含むページテンプレートを作成する必要があります。 このページは上から下にこの構造を持っています：ページヘッダー–連絡フォームヘッダー–連絡フォーム–ページフッター。

注：お問い合わせフォームは、ステップ3の後半で作成されます。

キャンバスページを作成する

データ収集クライアントフォームについて最初に気付くのは、ヘッダーやフッターさえないことです。 私がクライアントにリンクを送信するときのページの全体的な目的は、クライアントから情報を取得し、それを最初の相談に使用することです。

したがって、最初に行う必要があるのは、Elementorでページを作成し、ページタイプがCanvasであることを確認することです。

ページのヘッダーを作成する

従来のヘッダーとフッターはありませんが、彼らがいるWebサイトを知らせる小さなヘッダーを含めたかったのです。 また、上部のヘッダーにあるリンクが実際には私のクライアントレビューセクションに移動していることにも注意してください。

このようにして、クライアントは自分がどこにいるかを知ることができます。 クライアントは躊躇する必要があります。リンクをクリックすると、続行する自信が得られますか？

これは、ブランドカラーの背景とそれに続くテキストフィールドを含む単純なセクションを介して行われます。 かなり簡単なもの！

クライアントお問い合わせフォームのヘッダーを作成する

次のステップは、クライアントフォームヘッダーです。 ここでは、編集時に60pxのLatoフォントを使用しました。

小見出しは24pxでのみ同じフォントでした。 また、サブヘッダーの重みは300です。手動でサブヘッダーの重みを平均よりも低くして、上部のヘッダーをより目立たせることができます。

ページのフッターを作成する

次に、ヘッダーと同じ背景を持つ単なるセクションであるフッターを追加します。 この場合、2つの列があります。 信頼を得るためにもう一度レビューにリンクするだけでなく、自分自身についてもっと話す「About」ページにもリンクします。

ステップ3：WPFormsプラグインを使用してお問い合わせフォームを作成する

次のステップは、お問い合わせフォームを作成することです。 お問い合わせフォームビルダーはかなり簡単なので、これについてはあまり詳しく説明しません。 このお問い合わせフォームプラグインの使用方法の詳細については、すでにチュートリアルがあります。

お問い合わせフォームのフィールドをドラッグアンドドロップするだけです。

幸い、お問い合わせフォームを自分で作成する必要はありません。下のリンクにアップロードしたJSONファイルをインポートし、[ WPForms] > [ツール] > [インポートしてフォームに入力]に移動してインポートできます。

JSONファイルへのリンクは次のとおりです。

インポートするには、ここにアップロードするだけです。

注意すべき点の1つは、お問い合わせフォームをインポートしたら、ショートコードを取得する必要があるということです。 お問い合わせフォームの編集が終了したら、[埋め込み]をクリックしてから、[ショートコードを使用する]オプションをクリックします。

次に、そのショートコードをコピーしてページに貼り付けます。

ステップ4：正しい列の見積もりを作成し、その上に画像を配置します

クライアントフォームでやりたいことの1つは、ポジショニングを維持し、クライアントフォームにキャラクターと生命を追加することです。

ブロッククォートを作成する

最初の部分はブロッククォートです。 これは標準のElementor要素です。 ただし、これにはいくつかのポイントがあります。

あなたは私が引用自体を赤くて大きくしたことに気付くでしょう。 [ブロック見積もりの編集]セクションを[見積もり]セクションに設定し、色を赤に、サイズを1に設定できます。

テキストボックス自体に関しては、クライアントフォームに入力する理由と、これがどのように役立つかをクライアントに思い出させたいと思います。 また、メール内のリンクからページをクリックしてくださったユーザーに感謝します。

写真と署名を作成する

次の要素は、単にあなたの写真とクライアントフォームの署名です。 署名はクラスのタッチを追加し、セクションをより公式に聞こえるようにします。 ばかげているように見えるかもしれませんが、単にブランド名を書くよりも見栄えがよく、この段階で名前のブランドをできるだけ強くしたいと思います。

DocSketchオンライン署名ジェネレーターを使用してこの署名を作成しました。

これが、クライアントフォームを作成する最後のステップです。 クライアントフォームを保存して公開することを忘れないでください。

結論

このクライアントフォームが完成したら、それを機能させる準備が整います。 今、あなたがしなければならないのはあなたの次のオンライン問い合わせを待つことです。 この場合、クライアントにメールを送信して、クライアントフォームへの記入を依頼する必要があります。

このクライアントフォームがあなたのために働き、あなたがあなたの会議の前に誰もが認める専門家としてあなた自身を位置づけるのを助けることを願っています！ 幸運を！

著者略歴

KostaはシドニーのWordPress開発のスペシャリストであり、高速、安定、信頼性の高いWordPressカスタムWebサイトを提供する専門家ですが、最も重要なことは、実際にクライアントに必要なことを実行させることです。