WordPressでページを更新せずにフォームを送信する方法

ページを更新せずにフォームを送信する


訪問者がフォームを送信したときにページが更新されないようにしますか?デフォルトでは、フォーム送信ボタンをクリックすると、ページ全体が再ロードされます。そして、それはフォームに入力されたデータが転送されてサーバーに保存されるときです.

この記事では、WordPressフォームでAjax送信を有効にし、ページが再読み込みされないようにする方法を説明します.

WordPressでAjaxフォーム送信を有効にする理由

Ajaxフォームの送信は、モーダルポップアップにフォームを埋め込む場合に特に役立ちます。 AJAXフォーム送信を有効にしないと、ページ全体を更新する必要があり、ポップアップウィンドウが閉じます。このようにして、ユーザーは重要な確認メッセージを見落とす可能性があり、ユーザーを引き付けます。.

AJAXフォーム送信が有効になっていると、フォームの送信時に、ユーザーはリロードなしで同じページに確認メッセージを表示できます.

ajaxフォームの送信

WordPressサイトでajaxフォームの送信を有効にするには、 WPForms, WordPressに最適なフォームプラグイン.

ステップ1:新しいフォームを作成する

フォームの作成を開始するには、まずインストールする必要があります WPFormsプラグイン WordPressウェブサイト.

わからない?問題ない。 WordPressプラグインをインストールしてすべてを整理する方法に関するガイドにアクセスしてください.

プラグインをインストールしてアクティブ化したら、WordPressダッシュボードに移動して、 WPForms»新規追加. フォームのテンプレートを選択できるページにリダイレクトされます.

WPFormsは7つの異なるフォームテンプレートから選択できます。選択してみましょう 簡単なお問い合わせフォーム このチュートリアルのオプションを選択し、ファイルアップロードフィールドをフォームに追加します.

WPFormsフォームの設定

画面にフォームビルダーが表示されます。画面の左側には、 フィールドを追加 そしてその フィールドオプション タブ。これらのタブを使用して、お問い合わせフォームを設定できます.

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

WPFormsを使用すると、ドラッグアンドドロップでフィールドをフォームに簡単に追加できます。ドラッグアンドドロップでフィールドの位置を変更することもできます。フィールドを削除したい場合も簡単です。カーソルを不要なフィールドの上に置いて、 削除する フィールドの右上隅に表示されるアイコン.

フィールドオプション タブでは、フィールドのラベルを変更したり、名前フィールドの形式を変更したり、フォントサイズを変更したり、ラベルとサブラベルを有効または無効にしたりできます。また、 条件付きロジック オプション.

フォームビルダーでフォームを作成し終えたら、 セーブ ボタン、変更はそのまま残ります.

簡単な連絡先フォームを作成したので、ファイルアップロード機能を追加します.

ファイルのアップロード機能を追加するには、左側のパネルにある[ファイルのアップロード]フィールドをクリックするだけです。または、[ファイルのアップロード]フォームフィールドをドラッグして、フォームビルダーの適切な位置にドロップすることもできます.

ファイルアップロードフォーム

ステップ3:Ajaxフォーム送信を有効にする

変更が保存されたら、 設定 ページビルダーの左側にあるタブ。ここにいくつかのオプションが表示されます。に行く 一般的な オプション。この下に、いくつかのフィールドが表示されます。ここでは、フォームの名前の変更、フォームの説明の追加、ボタンのテキストの変更などを行うことができます.

画面をさらに下にスクロールすると、いくつかのチェックボックスが表示されます。あなたは言うチェックボックスを選択することができます Ajaxフォーム送信を有効にする. をクリックしてプロセスを完了します セーブ 画面右上のボタン.

ajaxフォーム送信を有効にする

今に行きます 通知 下のタブ 一般的な タブ。このオプションは、誰かがフォームを送信するたびに通知します。したがって、最初のフィールドに、管理者または電子メールの受信を担当する人の電子メールアドレスを入力します。メールの件名、送信者の名前、受信者のアドレス、独自のメッセージを入力することもできます.

完了したら、必ず変更を保存してください。訪問者が送信ボタンをクリックした後に受け取る確認メッセージを設定することもできます.

ファイルアップロードフォーム確認設定

ステップ4:Ajax送信でフォームを公開する

最後のステップは、Ajaxサブミッション対応フォームをWebサイトに公開することです。そのためには、フォームを表示するページに移動します.

あなたはに行くことから始めることができます ページ»新規追加 WordPressダッシュボード。次に、ページにタイトルを追加します。ページのテキストエディタで、 フォームを追加 オプション。新しいウィンドウが画面にポップアップします.

wpforms埋め込みフォーム

ドロップダウン矢印をクリックして、作成したフォームを選択します。次に、 フォームを追加 ボタン。埋め込みコードがページのテキストエディターに反映されているのがわかります。をクリックすると、フォームの外観を確認できます プレビュー 画面右側のボタン.

次に、 公開する 最後にフォームを公開させるボタン.

それは簡単でしたね?

次に、コンタクトフォームが受け取ったボタンクリックの数を追跡することができます。これを行うには、私たちのガイドをチェックしてください リンクとボタンのクリックの追跡.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map