How to Populate a Form Field from an Anchor Link

Markdownを表示

ユーザーがページ上のリンクをクリックしたときに、フォームフィールドを自動的に入力しますか？アンカーリンクとJavaScriptを使用すると、訪問者が特定のリンクをクリックしたときに、事前定義されたテキストでフォームフィールドに入力できます。

このガイドでは、この動的なフォーム入力を実装する方法を説明します。

概念の理解

ユーザーがアンカーリンク（#dailyや#weeklyなど）をクリックすると、そのインタラクションをキャプチャし、対応するテキストでフォームフィールドを自動的に入力します。これは以下のような場合に役立ちます。

サービス選択フォーム
製品問い合わせフォーム
サポートリクエストフォーム
事前定義された件名付きの連絡先フォーム

フォームの設定

まず、フォームを作成しましょう。これは、名前、メールアドレス、件名（一行テキスト）、およびメッセージ（段落テキスト）のフィールドを持つシンプルなものです。

フォームの作成方法については、最初のフォームの作成ガイドをご覧ください。

次に、フォームとフィールドのID番号を書き留めてください。コードスニペットに必要になります。これらのIDの見つけ方がわからない場合は、フォームとフィールドIDの見つけ方ガイドを確認してください。

次のステップで使用するため、フォームとフィールド ID を記録する必要があります。

フォーム通知の設定

このステップでは、フォームビルダーの通知タブにある件名フィールドを、件名フィールドが自動的に入力するようにします。

フォームビルダーの他の場所でスマートタグを使用するのと同じように、通知タブに移動し、件名フィールドに、フィールドIDと共に希望するテキストを入力するだけです。

この方法でフィールドIDを使用する詳細については、スマートタグの使用方法に関する詳細ガイドをご覧ください。

例では、フィールドIDは3なので、件名行は次のようになります：「私の会社のために{field_id="3"}クリーニングに興味があります」。

フィールド ID スマートタグは、メール通知の件名行も自動入力するようになります。

アンカーリンクの作成

次に、アンカーリンクと先ほど作成したフォームを使用して、サイトに新しいページを作成しましょう。

アンカーリンクの理解や作成にヘルプが必要な場合は、WPBeginnerのこのチュートリアルをご覧ください。

アンカーリンクを作成するには、ページコンテンツを入力し、WordPressでヘッダーを使用します。ブロックエディターでヘッダーを選択し、詳細タブに移動して、アンカーリンクに使用したいテキストを追加します。WordPressでは、短く、スペースを含まず、複数の単語の場合はハイフンを使用することをお勧めします。たとえば、「about-us」セクションの場合は「about-us」です。

このチュートリアルでは、毎日、毎週、毎月、四半期ごとのセクションを用意します。

WordPress でアンカーリンクを作成するには、見出しにこれを追加します。次にリンクを作成します。

各ヘッダーには、1単語のアンカーリンクを挿入します。たとえば、毎日セクションにはアンカーリンクdailyがあります。

アンカーリンクを追加したら、各セクションにジャンプしてフォームの件名フィールドに入力されるコンテンツ内のテキストを選択します。

テキストをアンカーリンクにリンクするには、WordPressで通常どおりリンクを追加します。テキストを選択し、チェーンアイコンをクリックして、完全なURLの代わりに、ポンド記号（#）とその後にアンカーリンクの単語を追加します。たとえば、#dailyです。

WordPress はリンク名に基づいて、各リンクに一意の data-id を自動的に割り当てます。そのため、#daily は data-id が #daily になります。

同様に、ページの #weekly、#monthly、#quarterly セクションも処理します。

アンカーリンクのテキストでフォームを自動入力する

これで、すべてをまとめるスニペットを追加する時間です。サイトへのスニペットの追加についてサポートが必要な場合は、こちらのチュートリアルをご覧ください。

スニペットを、内部リンクと同じ名前、およびフォーム ID (378) とフィールド ID (-field_3) に一致するように更新する必要があります。

これで完了です！フォーム内で非常に似たことを行うことができることをご存知でしたか？長いフォームの目次を追加する方法に関するチュートリアルをご覧ください。

参照アクション

wpforms_wp_footer_end

よくある質問

Q: CSS クラス名または ID も使用できますか？

A: もちろんです！CSS クラスまたは ID で JavaScript をトリガーしたい場合は、スクリプトを変更するだけです。たとえば、CSS クラス名が daily-link、weekly-link、monthly-link、quarterly-link の場合、スニペットは次のようになります。

/**
 * Populate field from anchor link.
 *
 * @link https://wpforms.com/developers/how-to-populate-a-form-field-from-an-anchor-link/
 */
 
function wpf_dev_autofill_field() {
?>
<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery( 'a.daily-link' ).click(function(){
            document.getElementById( 'wpforms-378-field_3' ).value = "daily cleaning";
        });  
        jQuery( 'a.weekly-link' ).click(function(){
            document.getElementById( 'wpforms-378-field_3' ).value = "weekly cleaning";
        });  
        jQuery( 'a.monthly-link' ).click(function(){
            document.getElementById( 'wpforms-378-field_3' ).value = "monthly cleaning";
        });  
        jQuery( 'a.quarterly-link' ).click(function(){
            document.getElementById( 'wpforms-378-field_3' ).value = "quarterly cleaning";
        });  
    });
</script>
 
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_autofill_field', 10 );

クラスの代わりに ID を使用していた場合は、各リンクのピリオドをポンド記号 (#) に置き換えるだけです。例: a#daily-link。

これで完了です。次に、カスタムスマートタグを作成しますか？詳細については、カスタムスマートタグの作成に関するチュートリアルをご覧ください。

アンカーリンクからフォームフィールドに入力する

AI要約