Cómo personalizar la disposición del campo de dirección

¿Te gustaría personalizar la disposición del campo Dirección en tu formulario? ¡Tenemos el tutorial perfecto para ti! Usando un poco de PHP y algo de CSS, vamos a crear un esquema de dirección personalizado que omitirá el campo Provincia de nuestro formulario, y usando CSS colocaremos el campo Código Postal justo al lado del campo Ciudad en nuestro formulario.

Personalizar la disposición del campo Dirección

En este tutorial, comenzaremos creando un esquema de dirección personalizado como se detalla en este tutorial, que solo tendrá los siguientes campos.

• Línea 1 de la dirección
• Línea 2 de la dirección
• Ciudad
• Código Postal (para nuestro campo de código postal)

Por defecto, el campo de formulario Código Postal siempre aparecerá como el último campo dentro de la sección de dirección en el formulario.

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

Creación del formulario

Ahora que se ha creado el esquema de dirección personalizado con nuestro fragmento, es hora de crear nuestro formulario. Si necesitas ayuda para crear tu formulario, por favor consulta esta documentación de ayuda.

Nuestro formulario solo obtendrá información básica que incluirá un campo de Dirección.

Seleccionar el esquema de dirección

Una vez que hayas añadido tu Dirección, selecciona el nuevo Esquema de Dirección del menú desplegable en la pestaña General que creamos en el fragmento.

Añadir el CSS

Ahora es el momento de añadir el CSS a nuestro sitio que colocará el campo Código Postal en la misma línea que el campo Ciudad.

Para cualquier ayuda sobre cómo y dónde añadir tu CSS, por favor revisa este artículo.

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

Es importante tener en cuenta que solo estamos apuntando al ID del formulario 2453 y al ID del campo 9, necesitarás actualizar estos IDs para que coincidan con los tuyos. Para obtener ayuda para encontrar tus IDs, por favor consulta nuestra útil documentación.

¿Te gustaría personalizar el estilo del campo Divisor de Sección con CSS? Consulta este artículo sobre Cómo Personalizar el Divisor de Sección de WPForms Usando CSS.

Filtro de Referencia

wpforms_address_schemes

Preguntas frecuentes

P: ¿Cómo puedo cambiar la posición de la Ciudad y el Código Postal?

R: Para colocar tu campo Código Postal antes del campo Ciudad, usa este CSS en su lugar.

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

P: ¿Cómo mostraría solo el campo de Código Postal?

R: Si solo quieres tener un campo de código postal, podrías ocultar todos los demás campos con CSS. Sin embargo, si solo quisieras capturar el código postal, la solución más fácil sería añadir un campo de Números a tu formulario para recopilar esta información.

P: ¿Puedo reorganizar completamente los otros campos?

R: Absolutamente, sin embargo, dado que puede haber tantas variaciones diferentes para un campo de dirección, no cubriremos todos los escenarios específicos. Pero no dudes en contactar con nuestro Círculo VIP de WPForms para obtener ayuda específica con esto.