WPFormsでフォームテンプレートをカスタマイズする方法

WPFormsのフォームテンプレートをカスタマイズすることは、フォームを特定のニーズに合わせて調整するための、シンプルでありながら強力な方法です。

基本的なお問い合わせフォームを作成する場合でも、複雑なアプリケーションを作成する場合でも、WPForms はフォームのデザインと機能に対する完全な制御を提供します。

このガイドでは、検討すべき主要なカスタマイズ オプションを順を追って説明します。最終的には、対象ユーザーと目標に完全に適合するフォームを作成するためのツールが手に入ります。

さあ、始めましょう!

WPFormsでフォームテンプレートをカスタマイズする方法

タイトル、ラベル、テキスト

フォームテンプレートから開始する場合、すべての要素が目的に合致しているか確認したいはずです。

タイトル、フィールドラベル、プレースホルダーテキストをカスタマイズすると、フォームがより直感的で使いやすくなります。幸いなことに、これらの要素は WPForms ビルダーで直接変更できます。

フォームの名前付け

新しいフォームを作成する際に最初に行うステップは、フォームに名前を付けることです。テンプレートを選択する前に、フォームに名前を付けます。

フォームビルダーでフォームに名前を付ける

しかし、フォームのユーザー向けの巧妙なブランディングやカスタマイズについて心配する必要はありません。このフォーム名はあなたのためです。

WPForms ダッシュボード内で作成したすべてのフォームが名前で一覧表示されるため、フォームを埋め込む予定のウェブサイトのどのページ、ウィジェット、またはその他の領域を特定できます。

そのため、複数のフォームがあり、同じ名前を 2 回使用するリスクがある場合、WPForms は、上記の画像に示すように、その名前のフォームが既に存在することを通知します。

フォームが作成されたら、フォームビルダーの 設定タブ でいつでもフォームの名前を更新できます。

フォーム名の変更

この設定タブの部分では、フォームの送信ボタンが表示するテキストや、送信時にユーザーに表示される内容など、複数の要素をカスタマイズできることを忘れないでください。

フィールドラベル

次に、フォームテンプレートのフィールドに対するカスタマイズ オプションについて検討しましょう。

任意のフィールドをクリックすると、その設定がフォームビルダーの左側に開きます。カスタマイズできる詳細はフィールドごとに異なりますが、フォームのどのフィールドでも変更できる共通の要素は、そのラベルです。

フィールド ラベル は、フォームのユーザーが入力する各フィールドに対して表示されるものです。

フィールドラベルのカスタマイズ

これらのフィールド ラベルは非常にわかりやすいですが、少し変更することを検討してもよいでしょう。

たとえば、フィールド ラベルを使用して質問を投げかけたり、指示を提供したりできます。名前フィールドのラベルをそのままにする代わりに、「お名前は?」と尋ねるように編集できます。または、段落テキスト フィールドをフォームに追加する場合は、ラベルを「コメントまたはメッセージ」など、関連性の高いものに変更することになるでしょう。

幸いなことに、既製のフォーム テンプレートのいずれかを使用する場合、これらの種類のフィールドは既に適切なラベルが表示されるようにカスタマイズされています!

各フィールド ラベルは簡単に変更できるため、フィールド ID # を念頭に置いておくようにしてください。

フィールドIDの確認

これにより、この ID 番号を elsewhere で見たり使用したりした場合、それがどのフィールドを参照しているかがわかります。

WordPressフォームを今すぐ作成

フォームフィールドの整理

フォームテンプレートには基本的な項目がすべて用意されていますが、必要に応じて項目を削除、追加、移動することになるでしょう。

フォームテンプレートから項目を削除するのは簡単です。項目の右隅にあるゴミ箱アイコンをクリックするだけで削除できます。

フォームからフィールドを削除する

では、その左側にあるもう一方の記号は何をするのでしょうか? 二重ページアイコンをクリックすると、項目が複製されます。

フォームテンプレートに項目を追加するには、フォームビルダーが真価を発揮します。画面左側の項目をクリックし、フォーム内の目的の場所にドラッグしてドロップするだけです!

フォームビルダー内のフォームフィールド

この方法で、フォームテンプレート内の項目を上下に移動することもできます。項目をフォームの別の場所にドラッグアンドドロップするだけです。

関連記事WordPressでフォームフィールドをランダム化する方法

レイアウトフィールド

フォームに項目を追加したり移動したりする際は、その配置を考慮する必要があります。

整理整頓され、簡潔にするために、私はレイアウト項目オプションを利用して、他の項目をその列にドラッグするのが好きです。

レイアウトフィールドプリセット

これらの項目は、1列または複数列で配置できます。複数列オプションには、さまざまな形状とサイズの選択肢が含まれています。

さらにレイアウト項目のインスピレーションが必要ですか? ユーザーフレンドリーなデザインのためのフォームレイアウトのベストプラクティスに関するクリエイティブな記事をご覧ください。

リピーターフィールド

フォームテンプレートをクリーンで簡潔に保つために、リピーター項目もあります。

フォームユーザーが同じ種類の情報を複数回入力する必要がある場合(たとえば、応募フォームテンプレートの職務経験など)は、リピーター項目を使用して、ボタンをクリックするだけでこの項目を繰り返すことができます。

リピーターフィールドを使用して職務経験をリストする

空の項目でフォームを乱雑にし、それらを非表示にするための条件付きロジック設定の連鎖を作成する代わりに、必要な項目をリピーター項目のゾーンにドラッグするだけです。その後、これらの繰り返し可能な項目に適用したいレイアウトの種類を選択できます。

AI選択肢の使用

フォームユーザーが選択できるさまざまな選択肢を提供する項目については、これらの選択肢もカスタマイズする必要があります。

これらの種類の項目は、ドロップダウン、複数選択、チェックボックスの項目です。

フォームビルダー内のフォームフィールド

しかし、フォームユーザーにどのような選択肢を提供すればよいかわからない場合でも、心配しないでください。AIを利用して、それらをすぐに作成できます。

当社の項目テンプレートは綿密に調査されているため、これらの項目に含まれる選択肢は、お客様が生成するものと同様になる可能性が高いです。しかし、いつものように、フォームの各要素は必要に応じてカスタマイズすることをお勧めします。

私が言及した項目のいずれかをクリックまたは追加すると、AIに選択肢を生成させるボタンが表示されます。

フォームで使用するAI選択肢を生成する

上記の例のフォームでは、組み込みのAI機能を使用して、フォームユーザーの希望する連絡方法の選択肢を生成します。

AIを使用する際は、特定のフォームに必要なものを正確に尋ねるプロンプトを作成するのが好きです。そのため、AIに連絡フォームの希望する連絡方法の選択肢を生成するように依頼します。

フォームで使用するAI選択肢を生成する

その後、これらの選択肢を直接フォームに追加できます!

これにより、どのオプションを使用するかを決定し、それらをフォームに手動で追加するのにかかるすべての時間を節約できます。

フォームにAIの選択肢を挿入する

さらにAIのガイダンスをお探しですか?ウェブサイトでの簡単なAI活用方法を網羅した記事をご覧ください。

通知と確認

この投稿の冒頭でアクセスした設定タブを覚えていますか?ここには追加のカスタマイズオプションがあると言いましたが、フォームの通知オプションや確認メッセージもここで編集できます。

通知タブの設定により、フォーム送信の詳細をどこに誰に送信するかを入力できます。

フォーム通知のカスタマイズ

通常、これらの設定は、WPFormsサインイン認証情報に設定された管理者メールのような、ウェブサイトの管理者詳細に適用されます。

通知設定を使用すると、返信を送信するフォームユーザーが入力したメールアドレスを指定することもできます。作成するほとんどのフォームには、フォームユーザーが提供するメールアドレスが1つだけ含まれているため、あなたからの返信はその指定されたメールアドレスに自動的に送信されます。

しかし、前述したように、通知設定のここで返信するユーザーメールを変更できます。

フォームユーザーがフォームを送信した後に表示される内容については、通知の下にある確認タブでこのメッセージをカスタマイズできます。

フォーム確認メッセージのカスタマイズ

フォームの作成に使用できるWPFormsのすべてのテンプレートには、関連する確認メッセージが既に記述され、設定に含まれています。

しかし、この確認メッセージを独自のサイトのブランディングとメッセージングでパーソナライズすることをお勧めします。確認メッセージは、提供しているセールや割引の情報やクーポンコードを含めるのに最適な場所でもあります!

連携の追加

提供している多くのフォームテンプレートは、サイトに設定した統合機能と連携するように設計されています。

たとえば、メールマーケティングプラットフォームとしてConstant Contactを利用しており、ニュースレターにサインアップしたフォームユーザーをConstant Contactのメーリングリストに追加したい場合があります。

Constant ContactとWPFormsを統合することで可能です!

統合機能をフォームテンプレートに追加するには、フォームビルダーのマーケティングタブに移動します。次に、新しい接続を追加ボタンをクリックします。

新しいConstant Contact接続の追加

これで、Constant Contactの認証情報を入力するだけで、すべて完了です!

フォームのブランディング

カスタマイズプロセス全体を通して、フォームテンプレートをブランド化できる多くの領域と方法があります。フォームビルダー内に直接ブランドの要素を追加できるだけでなく、フォームがサイトに埋め込まれた後にもブランディングの機会が見つかります。

コンテンツフィールド

フォームテンプレートを独自のブランディングでカスタマイズする1つの方法は、コンテンツフィールドを使用することです。

コンテンツフィールドを使用すると、通常のフィールド設定を超えて、フォント、色、その他のフィールド要素をスタイル設定できます。しかし、最も重要なのは、コンテンツフィールドを使用すると、フォームに直接画像をアップロードできることです。

コンテンツフィールドを使用したメディアの追加

したがって、フォームテンプレートの上部にコンテンツフィールドを配置することは、独自のヘッダー画像やロゴを追加するのに最適な方法です。

メール通知ヘッダー

ヘッダー画像を追加できるもう1つの領域は、先ほど説明したユーザー通知メールです。

WPFormsダッシュボードのメールタブに移動するだけで、メールヘッダー画像を追加およびカスタマイズできます。

メール設定 wpforms

ここでは、利用可能なすべてのメールテンプレートの上部にヘッダー画像を追加できます。これは、独自のロゴやブランディングを表示するのに効果的な場所です。

または、ユーザーインタラクションを促進するために、季節のメッセージや挨拶をここに含めることをお勧めします。

後でヘッダー画像を更新することを忘れないでください!

フォームテーマ

最後に、フォームテンプレートのすべてのカスタマイズが完了したら、WordPressブロックエディター内でフォームをさらにスタイル設定できます。

したがって、フォームを埋め込んだら、WPFormsブロックをスタイル設定するオプションが表示されます。ここでは、テーマセクションにWPFormsが提供するすべての利用可能なテーマスタイルが含まれています。

ブロックエディターでのフォームテーマの活用

これらのブランディングツールの機能を最大限に活用するために、フォームテーマの使用に関する完全なドキュメントをご覧ください。

これで完了です!フォームテンプレートのカスタマイズに関するさまざまなオプションがすべて、すぐに利用できるようになりました。

WPFormsは単なるシンプルなフォームビルダーではありません。ビジネスを創造的で予期しない方法で成長させるのに役立つ強力なツールです。

これらの革新的な使い方を探求することで、成長のための新しい機会を生み出すことができます。今日からこれらのアイデアを試して、WPFormsがウェブサイトを次のレベルに引き上げる方法を発見してください!

WordPressフォームを今すぐ作成

よくある質問

特定のものを探していますか?よくある質問をご覧ください。

既製のテンプレートを使用してもカスタマイズできますか?

もちろんです!WPFormsは、さまざまな目的に合わせた幅広いテンプレートを提供しています。フィールドラベルの編集、フィールドの追加または削除、設定の調整、AI生成の選択肢などの高度な機能の組み込みによって、任意のテンプレートをカスタマイズできます。

公開前にフォームをプレビューすることは可能ですか?

はい。WPFormsでは、ビルダーでいつでもフォームをプレビューできます。これにより、ウェブサイトに埋め込んでユーザーが操作できるようにする前に調整を行うことができます。

WPFormsをメールマーケティングサービスと統合できますか?

もちろんです!WPFormsは、多くの人気のあるメールマーケティングサービスとシームレスに統合されます。これを設定するには、WPFormsの関連メールマーケティングアドオンをインストールし、アカウントを接続して、フォームフィールドをメールリストにマッピングするだけです。

この統合により、サブスクライバーの追加、確認メールの送信、WordPressサイトから直接リストの管理が簡単になります。

これで、テンプレートを使用してフォームをカスタマイズする方法がわかりました。サイトに役立つように、行った変更が統一されていることを確認してください。

フォーム構築のベストプラクティスに従うには、トピックに関する完全な記事をご覧ください。

フォームの作成準備はできましたか?最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。

この記事がお役に立った場合は、FacebookTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。

開示:当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPFormsがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかをご覧ください

ケイシー・クーパー

ケイシーはWPFormsのブログを担当し、週刊ニュースレターを監督しています。また、楽しいフォームテンプレートを作成することにも情熱を注いでいます。2016年からWordPressでブログを書き、それについて執筆しています。 詳細はこちら

最高のWordPressドラッグアンドドロップフォームビルダープラグイン

簡単、高速、安全。WPFormsを信頼する600万人以上のウェブサイト所有者に加わりましょう。

コメントを追加

コメントを残していただきありがとうございます。コメントはすべて、当社のプライバシーポリシーに従ってモデレーションされます。また、すべてのリンクはnofollowとなります。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。

このフォームはCloudflare Turnstileによって保護されており、Cloudflareのプライバシーポリシーおよび利用規約が適用されます。