How to Customize the Address Field Layout

Markdownを表示

フォームの住所フィールドのレイアウトをカスタマイズしますか？ぴったりのチュートリアルがあります！簡単なPHPとCSSを使用して、都道府県フィールドを除外したカスタム住所スキームを作成し、CSSを使用して郵便番号フィールドをフォームの市区町村フィールドの隣に配置します。

住所フィールドのレイアウトをカスタマイズする

このチュートリアルでは、まずこのチュートリアルで詳しく説明されているカスタム住所スキームを作成します。このスキームには次のフィールドのみが含まれます。

番地1
番地2
市
郵便番号（郵便番号フィールド用）

デフォルトでは、郵便番号/郵便番号フォームフィールドは、フォームの住所セクション内で常に最後のフィールドとして表示されます。

郵便番号は、デフォルトで住所フィールドの一番下に独自の行として常に表示されます

カスタムスニペットをサイトに追加する方法と場所についてサポートが必要な場合は、この記事を確認してください。

/**
 * WPForms Add new address field scheme (Custom)
 *
 * @link   https://wpforms.com/developers/create-additional-schemes-for-the-address-field/
 */
 
function wpf_dev_new_address_scheme( $schemes ) {
 
    $schemes[ 'custom' ] = array(
        'label' => 'Custom',
        'address1_label' => 'Address Line 1',
        'address2_label' => 'Address Line 2',
        'city_label' => 'City',
        'postal_label' => 'Code Postal',
    );
 
    return $schemes;
 
}
 
add_filter( 'wpforms_address_schemes', 'wpf_dev_new_address_scheme', 10, 1);

フォームの作成

スニペットでカスタム住所スキームが作成されたので、フォームを作成する時間です。フォームの作成にヘルプが必要な場合は、このヘルプドキュメントを確認してください。

まず、新しいフォームを作成し、フィールドを追加します

フォームは、住所フィールドを含む基本的な情報のみを取得します。

住所スキームの選択

住所を追加したら、スニペットで作成した一般タブのドロップダウンから新しい住所スキームを選択します。

「一般」タブから、上記のコードスニペットで作成した住所スキーム名を選択します

CSSの追加

次に、郵便番号フィールドを市区町村フィールドと同じ行に引き出すCSSをサイトに追加します。

CSSの追加方法と場所についてサポートが必要な場合は、この記事を確認してください。

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) {
    float: left;
    max-width: 50%;
    width: 50%;
}

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) {
    float: left;
    max-width: 50%;
    width: 50%;
}

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) .wpforms-one-half.wpforms-first {
    padding-right: 1%;
}

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) .wpforms-one-half, 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) .wpforms-one-half {
    max-width: 100%;
    width: 100%;
}

ここではフォームID2453とフィールドID9のみを対象としていることに注意してください。これらのIDはご自身のものに合わせて更新する必要があります。IDの検索については、役立つドキュメントを確認してください。

これで、郵便番号フィールドが都市フィールドと同じ行にあることがわかります

セクション区切りフィールドのスタイルをCSSでカスタマイズしますか？WPFormsセクション区切りをCSSでカスタマイズする方法の記事をご覧ください。

参照フィルター

wpforms_address_schemes

よくある質問

Q: 市区町村と郵便番号の位置を変更するにはどうすればよいですか？

A:郵便番号フィールドを市区町村フィールドの前に配置するには、代わりにこのCSSを使用してください。

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) {
    float: right;
    max-width: 50%;
    width: 50%;
}
 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) {
    float: left;
    max-width: 50%;
    width: 50%;
}
 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) .wpforms-one-half.wpforms-first {
    padding-right: 1%;
}
 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) .wpforms-one-half, 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) .wpforms-one-half {
    max-width: 100%;
    width: 100%;
}

Q: 郵便番号フィールドのみを表示するにはどうすればよいですか？

A: 郵便番号フィールドのみが必要な場合は、CSSですべての他のフィールドを非表示にすることができます。ただし、郵便番号のみをキャプチャしたい場合は、最も簡単な解決策は、フォームに数字フィールドを追加してこの情報を収集することです。

Q: 他のフィールドを完全に並べ替えることはできますか？

A:もちろんです。ただし、住所フィールドにはさまざまなバリエーションがある可能性があるため、すべての特定のシナリオをカバーするわけではありません。特定のサポートについては、WPForms VIP Circleにお気軽にお問い合わせください。

住所フィールドのレイアウトをカスタマイズする方法

AI要約