フォームのソーシャルメディアURLフィールドを検証する方法

紹介

フォームでソーシャルメディアのURLを検証したいですか？このドキュメントでは、ユーザーがTwitterのURLとFacebookのURLを入力できるようにしますが、フォームが送信される前にソーシャルメディアのURLを検証する機能が必要です。このチュートリアルでは、これを実現するための手順を説明します。

フォームの作成

まず、フォームを作成します。このフォームには2つのウェブサイト/URLフィールドがあります。ひとつはツイッターのフォローURL、もうひとつはフェイスブックのフォローURLです。

スニペットの追加

フィールドを追加したら、次はフォームにソーシャルメディアのURLを検証するコードスニペットをサイトに追加しましょう。

あなたのサイトにスニペットを追加する方法や場所がわからない場合は、こちらのチュートリアルをご覧ください。

/**
 * Confirm the correct social network link in the form.
 *
 * @link   https://wpforms.com/developers/how-to-validate-a-social-media-url-field-in-your-form/
 */

function wpf_dev_process_check_social_url( $fields, $entry, $form_data ) {
      
    // Optional, you can limit to specific forms. Below, we restrict output to
    // form #902.
    if ( absint( $form_data['id'] ) !== 902 ) {
        return $fields;
    }
    
	
	$fb_url = $fields[25][ 'value' ];
	$findfb   = 'facebook.com';
	$find_fb_url = strpos($fb_url, $findfb);

	if ($find_fb_url === false) {
            // Check the field ID 25 to make sure it contains facebook.com
               wpforms()->process->errors[ $form_data[ 'id' ] ] [ '25' ] = esc_html__( 'Please enter a valid Facebook Profile URL.', 'plugin-domain' );
  
        }
	
	$twitter_url = $fields[26][ 'value' ];
	$findtwitter   = 'twitter.com';
	$find_twitter_url = strpos($twitter_url, $findtwitter);

	if ($find_twitter_url === false) {

            // Check the field ID 26 to make sure it contains twitter.com
               wpforms()->process->errors[ $form_data[ 'id' ] ] [ '26' ] = esc_html__( 'Please enter a valid Twitter Profile URL.', 'plugin-domain' );
  
        }
	
    }
add_action( 'wpforms_process', 'wpf_dev_process_check_social_url', 10, 3 );

上のコード・スニペットでは、このスニペットをフォームID902とフィールドID25（FacebookのURLフィールド）とフィールド26（TwitterのURLフィールド）のみに使用しています。

上記のコード・スニペットに記載されているものと一致しないフィールドにユーザーがリンクを入力すると、フォーム送信後にエラーが表示されます。

フォームとフィールドのIDをあなたのサイトのものと一致するように更新する必要があります。 これらのIDを見つけるのに助けが必要な場合は、こちらのチュートリアルをご覧ください。

これで完了です！これでソーシャルメディアのURLを認証することができました。 ユーザーが登録フォームを完了したら、自動的にログインするようにしたいですか？ 登録後にユーザーを自動的にログインさせる方法の記事をご覧ください。

関連

アクション・リファレンス：wpforms_process

よくあるご質問

Q：このスニペットにLinkedInを追加することはできますか？

A:もちろんです！上記のスニペットをLinkedIn用に追加するには、このスニペットを使用し、使用しているフォームのフォームIDとフィールドIDを更新してください。

/**
 * Confirm the correct social network link in the form.
 *
 * @link   https://wpforms.com/developers/how-to-validate-a-social-media-url-field-in-your-form/
 */

function wpf_dev_process_check_social_url( $fields, $entry, $form_data ) {
      
    // Optional, you can limit to specific forms. Below, we restrict output to
    // form #902.
    if ( absint( $form_data['id'] ) !== 902 ) {
        return $fields;
    }
    
	
	$fb_url = $fields[25][ 'value' ];
	$findfb   = 'facebook.com';
	$find_fb_url = strpos($fb_url, $findfb);

	if ($find_fb_url === false) {
            // Check the field ID 25 to make sure it contains facebook.com
               wpforms()->process->errors[ $form_data[ 'id' ] ] [ '25' ] = esc_html__( 'Please enter a valid Facebook Profile URL.', 'plugin-domain' );
  
        }
	
	$twitter_url = $fields[26][ 'value' ];
	$findtwitter   = 'twitter.com';
	$find_twitter_url = strpos($twitter_url, $findtwitter);

	if ($find_twitter_url === false) {

            // Check the field ID 26 to make sure it contains twitter.com
               wpforms()->process->errors[ $form_data[ 'id' ] ] [ '26' ] = esc_html__( 'Please enter a valid Twitter Profile URL.', 'plugin-domain' );
  
        }

	$linkedin_url = $fields[27][ 'value' ];
	$findlinkedin   = 'linkedin.com';
	$find_linkedin_url = strpos($linkedin_url, $findlinkedin);

	if ($find_linkedin_url === false) {

            // Check the field ID 27 to make sure it contains linkedin.com
               wpforms()->process->errors[ $form_data[ 'id' ] ] [ '27' ] = esc_html__( 'Please enter a valid LinkedIn Profile URL.', 'plugin-domain' );
  
        }
	
    }
add_action( 'wpforms_process', 'wpf_dev_process_check_social_url', 10, 3 );