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

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

基本的なコンタクトフォームから複雑なアプリケーションまで、WPFormsはフォームのデザインと機能を完全にコントロールできます。

このガイドでは、考慮すべき主なカスタマイズオプションについて説明します。最後には、オーディエンスとゴールに完璧に合ったフォームを作成するためのツールを手に入れることができます。

さっそく始めよう!

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

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

フォームテンプレートから始めるときは、すべての要素があなたの目的を反映しているかチェックしたいものです。

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

フォームの名前

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

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

しかし、フォームユーザーのために巧みなブランディングやカスタマイズを考える心配はありません。このフォーム名はあなたのためのものです。

WPFormsダッシュボード内に作成したフォームがすべて名前順に表示されるので、フォームを埋め込むページやウィジェット、その他のエリアを決定することができます。

そのため、複数のフォームを持っていて、同じ名前を2回使う危険性がある場合、WPFormsは上の画像のように、すでにその名前のフォームがあることを通知します。

一度フォームを作成したら、後でフォームビルダーの設定タブでいつでもフォームの名前を更新することができます。

フォーム名の変更

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

フィールド・ラベル

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

任意のフィールドをクリックすると、そのフィールドの設定がフォームビルダーの左側に表示されます。カスタマイズできる内容はフィールドによって異なりますが、フォームのどのフィールドでも変更できる共通の要素はラベルです。

フィールドラベルは フォームユーザーが入力する各フィールドに表示されます。

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

これらのフィールド・ラベルはかなり分かりやすいものだが、少し変えてみることを検討してもいいかもしれない。

例えば、フィールドラベルを使って質問を投げかけたり、何らかの指示を与えたりすることができます。名前フィールドのラベルをそのままにするのではなく、"フルネームは何ですか?"と尋ねるように編集することができます。また、段落テキストフィールドをフォームに追加する場合は、ラベルを "コメントまたはメッセージ "のように編集します。

幸いなことに、弊社の既成フォームテンプレートをご利用いただくと、このようなフィールドに適切なラベルが表示されるようにカスタマイズ済みです!

各フィールドのラベルは簡単に変更できるので、必ずそのフィールドID#を覚えておくこと。

フィールドIDのチェック

こうすることで、このID番号を他の場所で見たり使ったりするときに、それがどのフィールドを指しているのかがわかるようになる。

WordPressフォームを今すぐ作成

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

弊社のフォームテンプレートは、必要な基本的なフィールドがすべてあらかじめ用意されていますが、いくつかのフィールドを削除、追加、移動する必要があるでしょう。

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

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

その左にあるもう一つのシンボルは何をするのでしょうか?ダブルページのアイコンをクリックすると、フィールドが複製されます。

フォームテンプレートにフィールドを追加する場合、フォームビルダーが威力を発揮します。画面の左側にあるフィールドをクリックし、フォームの好きな場所にドラッグしてドロップするだけです!

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

この方法で、フォームテンプレートの上下にフィールドを移動させることもできます。フィールドをフォームの別のエリアにドラッグ&ドロップするだけです。

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

レイアウト・フィールド

フォームにフィールドを追加したり移動したりするときは、そのレイアウトを考慮する必要があります。

物事を整理して簡潔に保つために、私はレイアウトフィールドオプションを利用して、他のフィールドをその列にドラッグするのが好きだ。

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

これらのフィールドは、単一の列または複数の列にレイアウトすることができます。

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

リピーター・フィールド

また、フォームテンプレートをすっきりと簡潔に保つためのリピーター・フィールドもあります。

応募フォームのテンプレートで職務経験など、フォームユーザーが同じ種類の情報を何度も入力する必要があると予想される場合は、リピーターフィールドを使用して、フォームユーザーがボタンをクリックするだけでこのフィールドを繰り返し入力できるようにすることができます。

リピーター・フィールドを使った職務経験の記載

空のフィールドでフォームを埋め尽くしたり、それらを非表示にするための条件ロジックの設定の跡を作ったりするのではなく、必要なフィールドをリピーターフィールドゾーンにドラッグするだけです。そして、これらの繰り返しフィールドをどのタイプのレイアウトに従わせるかを選択できます。

AIの選択

フォームユーザーに様々な選択肢を提供するフィールドについては、これらの選択肢もカスタマイズする必要があります。

これらのタイプのフィールドは、ドロップダウン、複数選択肢、チェックボックスのフィールドです。

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

しかし、フォーム・ユーザーにどの選択肢を提供すべきかわからなくても心配する必要はない。

当社のフィールド・テンプレートは綿密に調査されていますので、これらのフィールドに含まれる選択オプションは、おそらくあなたが生成するものと同様でしょう。しかし、いつものように、あなたのフォームの各要素をカスタマイズすることをお勧めします。

先ほど紹介したフィールドタイプのいずれかをクリックするか追加すると、AIに選択肢を生成させるボタンが表示される。

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

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

AIを使うとき、私は特定のフォームに必要なことを正確に尋ねるプロンプトを作成したい。そこで、AIに問い合わせフォームの希望する連絡方法の選択肢を生成してもらうことにする。

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

そして、これらの選択肢を直接フォームに追加することができる!

これにより、どのオプションを使うかを決めたり、手作業でフォームに追加したりする手間が省けます。

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

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

通知と確認

この記事の最初に移動した「設定」タブを覚えていますか?ここには追加のカスタマイズオプションがあり、フォームの通知オプションや確認メッセージもここで編集できると書きました。

通知タブの設定では、フォーム送信の詳細を送信する相手と送信先を入力することができます。

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

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

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

しかし、先ほど言ったように、どのユーザーのメールに返信するかは、通知設定で変更できる。

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

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

フォームを作成するために使用できるすべてのWPFormsテンプレートには、関連する確認メッセージがすでに書かれており、その設定に含まれています。

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

統合の追加

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

例えば、メールマーケティングプラットフォームにConstant Contactを利用し、ニュースレターに登録したフォームユーザーをConstant Contactのメーリングリストに追加したいとします。

Constant ContactとWPFormsを統合することで可能になります!

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

新しいConstant Contact接続を追加する

あとは、Constant Contactの認証情報を入力するだけです!

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

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

コンテンツ・フィールド

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

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

コンテンツ・フィールドでメディアを追加する

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

電子メール通知ヘッダー

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

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

電子メール設定 wpforms

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

あるいは、ユーザーとの交流を促進するために、季節のメッセージや挨拶をここに入れるのもいい。

後でヘッダー画像を更新するのを忘れないように!

フォームのテーマ

最後に、フォームテンプレートのカスタマイズをすべて終えたら、WordPress ブロックエディター内でフォームのスタイルをさらに変更することができます。

選択したウェブサイトのページにフォームを埋め込むと、WPFormsブロックのスタイルを設定するオプションが表示されます。ここでは、テーマセクションにWPFormsが提供するすべての利用可能なテーマスタイルが含まれています。

ブロックエディターでフォームテーマを利用する

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

これだけです!これでフォームテンプレートをカスタマイズするための様々なオプションがあなたの手元に揃いました。

WPFormsは単なるフォーム作成ツールではありません。あなたのビジネスをクリエイティブで予想外の方法で成長させるパワフルなツールです。

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

WordPressフォームを今すぐ作成

よくあるご質問

特定のものをお探しですか?よくあるご質問をご覧ください:

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

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

フォームを公開する前にプレビューできますか?

はい。WPFormsではビルダ内でいつでもフォームをプレビューすることができます。この方法では、ユーザーが対話するためにあなたのウェブサイトに埋め込む前に調整することができます。

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

間違いなく!WPFormsは多くの一般的なメールマーケティングサービスとシームレスに統合できます。これを設定するには、WPFormsに関連するメールマーケティングアドオンをインストールし、アカウントを接続し、フォームフィールドをメールリストにマッピングするだけです。

この統合により、購読者の自動追加、確認メールの送信、リストの管理をWordPressサイトから直接簡単に行うことができます。

テンプレートを使ってフォームをカスタマイズする方法はお分かりいただけたと思います。

フォームを作成する際のベストプラクティスについては、こちらの記事をご覧ください。

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

この記事がお役に立ちましたら、Facebookや TwitterでWordPressの無料チュートリアルやガイドをフォローしてください。

情報開示私たちのコンテンツは読者支援型です。つまり、あなたが私たちのリンクをクリックした場合、私たちはコミッションを得る可能性があります。WPFormsがどのように資金を調達しているのか、なぜそれが重要なのか、そしてどのように私たちをサポートできるのかをご覧ください。

ケイシー・クーパー

ケイシーはWPFormsのライター兼テンプレート作成者です。彼女は2016年からWordPressでブログを書き、それについて書いている。もっと知る

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

簡単、速い、安全。WPFormsを信頼する600万人以上のWebサイトオーナーの仲間入りをしてください。

このフォームを入力するには、ブラウザのJavaScriptを有効にしてください。

コメントを追加する

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従って管理され、すべてのリンクはnofollowであることにご留意ください。名前欄にはキーワードを使用しないでください。個人的で有意義な会話をしましょう。

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