独立したウェブサイトを構築するとき、例えばお問い合わせやいくつかのtobサイトなどでは、これに似た効果を持つお問い合わせフォームを追加することがよくあります。さて、私たちは以前に別のフォームプラグインを皆さんと共有しました。 お問い合わせフォーム7 は、現在表示されているフォームプラグインですが、このフォームプラグインには問題があります。開くと、フォームを設定するときにショートコードを使用していることがわかります。たとえば、テキストフォームを挿入したいとします。、このようなテキストショートコードを直接挿入しますが、ショートコードによって表示される効果は特に良くありません。たとえば、名前は長くする必要がないことがよくあります。名前とメールアドレスが一緒に配置されることを願っています。まあ、フロントエンドを知らないと、変更することはできません。

お問い合わせフォーム 7 フォーム編集インターフェース

wpforms プラグインの紹介:

実際、独立したウェブサイトを構築するときには、WPforms という非常に有名な別のフォーム プラグインも使用します。このプラグインは視覚的で、フォーム モジュールを直接ドラッグ アンド ドロップして内部に組み込むことができます。では、これを実際にお見せしましょう。WPforms がインストールされている場合は、この Contact Form 7 もインストールしてください。削除してください。どちらも同じ機能を持っています。

wpformsプラグインの紹介

wpformsフォームプラグインをインストール:

次に、同様にプラグインをインストールし、[アップロード] をクリックして、デスクトップに用意したプラグインを選択します。最新バージョンは 1.84 です。後でバージョンが更新された場合は、Web サイトの構築方法の学習に関する記事から直接ダウンロードできます。これで完了です。

もちろん、中国語のパッケージも提供されています。独立したウェブサイトを使用する場合、通常は英語を使用し、クリックしてインストールを開くため、今は必要ありません。インストールが完了したら、このプラグインをアクティブ化できます。アクティブ化が成功すると、このようなインターフェイスに入ります。左側に機能が追加されます。

wpformsフォームプラグインをインストールする

wpforms プラグインは設定インターフェースを設定します。

まず、設定に入り、設定をクリックします。すると、このフォーム プラグインに簡単な設定がいくつか表示されます。まず、現在のプラグインが表示されます。プラグインがアクティブ化され、いくつかのデフォルト設定が表示されます。設定を変更する必要はありません。

wpformsプラグイン設定

もう 1 つは、送信メールです。このメールの形式を変更して、通常の状況ではデフォルトに設定し、正常に表示できるようにすることもできます。また、ガベージを模倣するプロセスもあります。たとえば、一部の人がフォームにランダムに入力した場合、この時点で、その人がロボットであるかどうかを識別できます。これは主に機能です。

wpforms プラグイン検証

他にも設定がいくつかあります。簡単に見てみましょう。これは、メールを送信した後、どの項目が必須であるかなどの説明が表示されます。次に、たとえば、どの項目も入力しないと、メールは必須フィールドに設定されます。メールに入力しないと、メールが必須であることを通知します。その他の指示もあります。たとえば、正常に送信した場合と送信に失敗した場合、いくつかの説明が表示されます。もちろんあります。テキストが正常であれば、デフォルトで使用できます。

wpforms フォーム情報通知

通常、このフォームは支払いには使用されません。その他の設定はデフォルトで使用できるため、設定する必要はありません。

wpforms を使用してフォームを作成します。

ここで主に使用するフォーム機能は、すべてのフォームを開き、最初にフォームを作成し、[新規追加] をクリックすると、フォーム設定インターフェイスに入ります。 このインターフェイスは非常に簡単です。 たとえば、最初にフォーム名を設定します。 たとえば、フォーム名を自由に設定できますが、この名前はフロントには表示されません。 フロントに表示するときには、この名前を呼び出す必要があるのは当然です。 英語またはピンインを使用できます。

wpforms フォーム作成

2 つのオプションがあります。最初のオプションは、空白のフォームを作成することです。2 番目のオプションは、テンプレートを使用することです。現在、ここにはシンプルなテンプレートがあります。直接プレビューできます。この形式を表示するには、この 2 つのコンテンツが表示されます。これら 2 つのコンテンツは、1 行に表示されます。これがデフォルトです。自分で作成するのと違いはありませんので、直接新しいフォームを作成します。

このフォームと Contact Form 7 の最大の違いは視覚化です。たとえば、左側のすべてのモジュールをドラッグ アンド ドロップできます。ここでは、これを実演します。たとえば、フォームに顧客の情報を入力する必要があります。たとえば、名前を選択してここにドラッグすると、名前の入力ボックスとして表示されます。

wpforms フォーム項目の追加

入力ボックスをドラッグした後、他のものをドラッグすることもできます。たとえば、別の電子メール、EMAIL、または電話番号を追加できます。もちろん、これらを説明するテキストを追加することもできます。すべて追加できます。

追加したら、プレビューします。保存してから更新する必要があります。

wpforms フォーム フロントエンド デモ

wpforms フォーム モジュールのレイアウト設定。

さて、このフォームはこの形式で表示されます。ここにコンテンツをドラッグアンドドロップできます。これは、Contact Form 7よりも便利です。次に、各オプションを変更して設定できます。たとえば、[編集]をクリックすると編集インターフェイスに入ります。編集インターフェイスにはいくつかのオプションがあります。最初のオプションはヘッダーです。選択できます。ここで、名前とユーザー名を入力します。たとえば、ユーザー名はここにあり、その表示形式は以下のとおりです。外国人の名前は一般に2つの部分で構成されているためです。もちろん、必要に応じて1つに設定することもできます。ここでは、単に設定します。以下に説明もあります。たとえば、ここに何を入力するかは以下で説明します。

wpforms フォームモジュールレイアウト設定

最後は必須項目です。この項目は必須ですか?必須フィールドを選択しても空の場合は送信されません。詳細オプションもいくつかあります。詳細オプションでは、サイズやコンテンツの設定、CSS スタイルの追加などを行います。下に別のロジックがあります。このロジックはどういう意味ですか?開いたら、このフォームモジュールを表示する必要がありますか?たとえば、通常どおり表示する場合は、表示するための条件を指定します。たとえば、番号を入力した後でのみ、フォームモジュールにリンクされます。入力した後で、空の場合のみ、表示されます。

したがって、保存すると、数字を入力した後でのみユーザー名が表示されるため、最終結果としてユーザー名は表示されません。保存して更新すると、ユーザー名がそこにないことがわかります。名前を入力する場所に、数字をいくつか入力するだけで表示されるため、これは論理的なオプションを意味します。

もちろん、これはあなた自身のニーズに依存します。必要ない場合は、オフにしてください。そうすると、他のオプションは同様です。たとえば、2番目では、EMAILを入力する場合と同じです。ここでヘッダーを設定し、必須項目であるかどうか、このメールを確認する必要があるかどうかを記述できます。つまり、メールアドレスを入力すると、ここに確認ボックスが表示されます。フォームを送信する前に、確認コードを送信し、正しいコードを入力する必要があります。通常、通常の状況では、このように設定することはありません。特別なコンテンツでない限り、事前に必要です。そのスタイルにもロジックがあり、すべてのモジュールの設定ロジックはまったく同じです。

wpforms フォーム項目設定

下の名前も同じであることがわかります。これは必須フィールドですか? 必須フィールドの場合は、プロンプト シンボルを追加し、詳細オプションにロジックを追加します。他のモジュールも同様です。必要に応じて追加してください。

時々、これらの設定で状況が必要になります。たとえば、名前が短いため、電子メールアドレスとユーザー名を 2 行ではなく 1 行に配置する必要があります。このときは、これを使用できます。レイアウト モジュールにレイアウトが表示されます。まずこのレイアウトをプルします。プルした後、最初に 2 つの列に分割されます。左側に名前を配置し、右側に電子メールを配置できます。次に、この領域の幅を編集することもできます。たとえば、左側を広くして右側を狭くしたり、左側を狭くして右側を広くしたりできます。このように設定します。設定したら、保存して更新します。行として表示されますが、その下には携帯電話番号があるので、もちろん幅を調整できます。スタイルに設定するだけです。

例えば、これを編集して行として表示してみましょう。この場合、フロントエンドの知識は必要ありませんし、非常に美しいフォームをデザインできます。

設定もあり、設定はそのルールです。まず、フォームの名前とフォームの説明は、表示されている場合にのみここにあります。下には送信ボタンがあります。送信ボタンは送信と呼ばれ、他のコンテンツに設定できることがわかります。さて、送信後、待機プロセスがあります。下には、CSSスタイルの追加など、いくつかの高度なオプションがあります。次に、下にもう1つあります。Ajax送信とは、このフォームを送信してもページが更新されないことを意味します。すべてのAjaxはこれを意味します。リンクアドレスを変更せずにこのページで送信します。

下には、先ほどお話しした設定の一部である、アンチボット操作を追加します。通常は、無料の Cloudflare を使用します。設定後、もちろん、ここにあるいくつかの要件に従う必要があります。次に、アカウントを申請します。申請が完了したら、アカウント番号を入力すると、次のようになります。

34

人々が記入すると、ロボットかどうかを自動的に判断します。ロボットの場合、送信は失敗します。 良いです。設定にはいくつかのリマインダーもあります。正常に送信された後、電子メールの送信方法や電子メールの送信に使用するものなど、いくつかの指示が表示されます。もちろん、このフォームは単なるスタイルです。送信するには、この機能を正規化する必要があります。また、WordPress PHPの電子メール送信システムは失敗したりゴミ箱に入れられたりすることが多いため、SMTPを使用する必要があります。そのため、通常は独自の送信メールアドレスを入力する必要があります。SMTP構成用のプラグインなどを確認する必要があります。

最後は送信ボタンです。送信が完了したら、彼に説明することができます。ご提出とご連絡をありがとうございます。できるだけ早くご連絡いたします。これはそのような説明です。

35

wp forms で作成したフォームをスタンドアロン ページに挿入する方法。

その他のコンテンツは、フォームの外部では通常の拡張機能であり、必要ありません。このフォームを設定すると、フォームにショート コードが表示されます。ショート コードをクリックすると、このショート コードによって自動的にページが作成され、ページ内に配置できます。これが 1 つの方法です。

もちろん、別の方法は、これをオフにすることです。これをオフにすると、ここにショートコードが表示されます。次に、このショートコードを好きな場所に配置できます。たとえば、ショートコードをコピーして、新しいページを作成します。このページにランダムな名前を入力し、下にショートコードを追加できます。Gutenberg のショートコードを使用できますが、もちろん他のショートコードも使用できます。次に、このショートコードをここに配置して貼り付け、正常に公開すると、新しく作成されたページが開き、このフォームが表示されます。

36

もちろん、このフォームが表示された後、先ほど行った設定に戻って変更することもできます。これも可能です。これは、非常に有名なフォームプラグインである wpforms の使用に関するものです。