Come personalizzare il layout del campo indirizzo

Vuoi personalizzare il layout del campo Indirizzo nel tuo modulo? Abbiamo il tutorial perfetto per te! Usando un po' di PHP e un po' di CSS, creeremo uno schema di indirizzo personalizzato che ometterà il campo Provincia dal nostro modulo, e usando il CSS posizioneremo il campo CAP proprio accanto al campo Città nel nostro modulo.

Personalizzazione del layout del campo Indirizzo

In questo tutorial, inizieremo creando uno schema di indirizzo personalizzato come dettagliato in questo tutorial, che avrà solo i seguenti campi.

• Riga Indirizzo 1
• Riga Indirizzo 2
• Città
• CAP (per il nostro campo codice postale)

Per impostazione predefinita, il campo modulo CAP apparirà sempre come ultimo campo all'interno della sezione indirizzo nel modulo.

/**
 * 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);

Creazione del modulo

Ora che lo schema di indirizzo personalizzato è stato creato con il nostro snippet, è ora di creare il nostro modulo. Se hai bisogno di aiuto nella creazione del tuo modulo, dai un'occhiata a questa documentazione di aiuto.

Il nostro modulo raccoglierà solo alcune informazioni di base che includeranno un campo Indirizzo.

Selezione dello schema di indirizzo

Una volta aggiunto il tuo Indirizzo, seleziona il nuovo Schema Indirizzo dal menu a discesa nella scheda Generale che abbiamo creato nello snippet.

Aggiunta del CSS

Ora è il momento di aggiungere il CSS al nostro sito che porterà il campo CAP sulla stessa riga del campo Città.

Per qualsiasi assistenza su come e dove aggiungere il tuo CSS, ti preghiamo di consultare questo articolo.

#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%;
}

È importante notare che stiamo prendendo di mira solo l'ID del modulo 2453 e l'ID del campo 9, dovrai aggiornare questi ID per corrispondere ai tuoi. Per assistenza nel trovare i tuoi ID, dai un'occhiata alla nostra utile documentazione.

Vuoi personalizzare lo stile del campo Divisore di Sezione con CSS? Dai un'occhiata a questo articolo su Come personalizzare il divisore di sezione WPForms usando CSS.

Filtro di Riferimento

wpforms_address_schemes

FAQ

D: Come posso cambiare la posizione della Città e del CAP?

R: Per posizionare il tuo campo CAP prima del campo Città, usa invece questo 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%;
}

D: Come posso visualizzare solo il campo CAP?

R: Se vuoi avere solo un campo CAP, potresti nascondere tutti gli altri campi con CSS. Tuttavia, se volessi solo acquisire il CAP, la soluzione più semplice sarebbe aggiungere un campo Numeri al tuo modulo per raccogliere queste informazioni.

D: Posso riorganizzare completamente gli altri campi?

R: Assolutamente, tuttavia poiché ci possono essere così tante variazioni diverse per un campo indirizzo, non copriremo ogni scenario specifico. Ma non esitare a contattare il nostro WPForms VIP Circle per assistenza specifica su questo.