Cómo traducir formularios de contacto de WordPress (paso a paso)

¿Quieres traducir tus formularios de contacto de WordPress a otro idioma?

Las traducciones son muy importantes si tu sitio web atiende a personas de diferentes regiones del mundo donde el inglés puede no ser su primer idioma.

La buena noticia es que gestionar las traducciones es muy fácil en WordPress. Recuerda, no solo estás traduciendo palabras; también estás abriendo puertas a una audiencia más amplia. 🌐

En este artículo, te mostraremos cómo traducir tus formularios de contacto de WordPress.

Crea tu formulario de WordPress ahora

Cómo traducir tus formularios de contacto de WordPress

Paso 1: Crear un formulario de contacto sencillo

Con WPForms instalado y activado en tu sitio, puedes empezar a crear un formulario para traducir.

Abre tu menú de administración de WordPress y ve a WPForms » Añadir nuevo.

Una vez hecho esto, serás llevado a la pantalla de configuración del formulario. Empieza por darle un título a tu formulario.

Después de eso, desplázate hacia abajo hasta la sección de plantillas y selecciona una de las más de 2.100 plantillas de formularios de WordPress. Seleccionaremos la plantilla de Formulario de contacto sencillo para los propósitos de este tutorial.

Tan pronto como presiones Usar plantilla, la plantilla del formulario comenzará a cargarse dentro del constructor de formularios.

Puedes añadir campos adicionales a tu formulario de contacto arrastrándolos desde el panel izquierdo al panel derecho.

Asegúrate de presionar el botón Guardar para guardar los cambios que hayas realizado en tu formulario hasta este punto.

Paso 2: Traducir los campos de tu formulario

Traducir los campos de tu formulario de contacto es muy fácil de hacer en WPForms, y hay varias maneras de hacerlo.

Traducción automática

La forma más rápida de traducir los campos de tu formulario a cualquier idioma es usar el plugin Weglot.

Weglot es un plugin de pago que puede traducir instantáneamente el contenido de tu sitio a cualquier idioma simplemente haciendo clic en un botón selector de idioma.

Funciona con todo tipo de contenido en un sitio de WordPress, incluidos los formularios creados con WPForms. Puedes instalar Weglot siguiendo los mismos pasos que seguiste para instalar WPForms.

Después de instalar el plugin, haz clic en Weglot en la barra lateral del menú de administración de WordPress.

Ahora verás la pantalla de configuración de Weglot.

Para usar los servicios de traducción de Weglot, necesitas crear una cuenta con Weglot y usar tu clave API para conectar tu cuenta con WordPress.

Haz clic en el enlace Weglot debajo de API para crear tu cuenta de Weglot y obtener tu clave API.

Crea tu nueva cuenta introduciendo tu dirección de correo electrónico y contraseña.

Weglot te enviará un correo electrónico de confirmación. Haz clic en el enlace dentro del correo electrónico y serás redirigido a tu panel de Weglot, donde podrás copiar tu clave API.

Ahora, vuelve a la página de configuración de Weglot en tu sitio de WordPress y pega tu clave API.

También deberás seleccionar el idioma original de tu sitio. Luego, selecciona el/los idioma(s) de destino, que son los idiomas a los que te gustaría traducir tu contenido y formularios.

Luego pulsa el botón Guardar Cambios en la parte inferior.

Weglot mostrará una ventana modal confirmando que tu sitio es ahora multilingüe.

Ahora, visita la página donde acabas de publicar tu formulario de contacto y utiliza los selectores de idioma en la parte inferior para traducir tu formulario a otro idioma.

Como puedes ver, Weglot traducirá la etiqueta del campo de tu formulario, el texto del botón y las subetiquetas a tu idioma deseado.

Sin embargo, ningún plugin de traducción puede traducir automáticamente las validaciones y los mensajes de error en WPForms.

Por lo tanto, deberás traducir los mensajes de validación manualmente como se muestra en el paso 3.

Además, ten en cuenta que Weglot es un plugin de pago con una prueba gratuita de 10 días. Para seguir utilizando sus funciones de traducción después de 10 días, deberás comprar un plan de pago.

Si esta no es la mejor opción para ti, te mostraremos cómo traducir tus formularios de contacto de forma gratuita y manual.

Traducciones manuales del formulario

Es muy fácil traducir tus formularios manualmente en WPForms. Para cambiar las etiquetas de cualquier campo del formulario, todo lo que tienes que hacer es hacer clic en el campo del formulario en el editor de formularios y reemplazar la etiqueta predeterminada por el idioma al que deseas traducir tu formulario.

Si necesitas ayuda con la traducción, puedes usar herramientas de traducción en línea como Google Translate para ayudarte.

Después de traducir las etiquetas de tu formulario, necesitas hacer algo con las subetiquetas de Nombre (las etiquetas debajo de los campos del formulario como "Primero" y "Último"). Aunque no puedes editar las subetiquetas de Nombre en WPForms, hay una solución.

Haz clic en un campo del que quieras cambiar la subetiqueta para acceder a sus Opciones de Campo en el panel izquierdo. Luego haz clic en la pestaña Avanzado.

Aunque no podemos traducir las subetiquetas, todavía podemos usar marcadores de posición personalizados en lugar de subetiquetas.

Inserta tus traducciones en los campos de marcador de posición.

Luego desplázate hasta la parte inferior y haz clic en el botón de alternancia Ocultar Subetiquetas.

También deberías traducir el texto del botón Enviar y el nombre del formulario (si originalmente usaste un nombre en inglés para tu formulario).

Para hacerlo, ve a Ajustes » General dentro del constructor de formularios.

En el panel derecho, simplemente introduce tu traducción en el cuadro de texto Nombre del Formulario.

Desplázate hasta la parte inferior y repite los mismos pasos para los cuadros de texto Texto del Botón Enviar y Procesamiento del Botón Enviar.

¡Excelente! Ahora has traducido todas las etiquetas y el texto dentro de tu formulario. Continúa y pulsa Guardar y pasa al siguiente paso.

Paso 3: Traducir los mensajes de validación de tu formulario

Un mensaje de validación es un texto que aparece cuando se deja vacío un campo obligatorio de un formulario o cuando alguien introduce datos incorrectos en un campo.

Para traducir los mensajes de validación de tu formulario de contacto, sal de tu creador de formularios y navega a WPForms » Ajustes desde tu panel de WordPress. Luego, haz clic en la pestaña Validación.

Desde allí, todo lo que tienes que hacer es cambiar los mensajes de validación actuales (en inglés por defecto) al idioma al que estás traduciendo tus formularios de contacto.

Cuando hayas terminado, pulsa Guardar ajustes.

Ahora, si vas a comprobar tu formulario introduciendo entradas incorrectas o saltándote un campo obligatorio, verás que aparecen los mensajes de validación traducidos.

¡Y eso es todo! Ahora sabes cómo traducir tus formularios de contacto de WordPress.

Aunque los pasos anteriores deberían ser suficientes para la mayoría de los sitios, hay ciertos casos especiales en los que puede que necesites usar código PHP para traducir ciertos campos especiales.

Te mostraremos algunos de estos en la siguiente sección para que puedas copiar y pegar fragmentos de código incluso si nunca has usado código antes.

Extra: Opciones avanzadas de traducción

Antes de entrar en los detalles de los diferentes escenarios especiales, te explicaremos cómo puedes insertar fragmentos de código personalizados en tu sitio de WordPress de la manera más sencilla posible.

Para ello, necesitarás un plugin llamado WPCode. Instala este plugin en tu sitio.

Después de instalar el plugin, pasa el cursor sobre Fragmentos de código en la barra lateral de administración de WP y haz clic en Añadir fragmento.

Luego, pulsa el botón Usar fragmento en Añadir tu código personalizado (Nuevo fragmento).

Esto abrirá la ventana del editor de código.

En la parte superior, puedes dar un nombre a tu fragmento para ayudarte a referenciarlo más tarde. En el centro, tienes el editor de código, donde puedes escribir tu propio código o copiarlo y pegarlo de otra fuente.

En la parte superior derecha, puedes seleccionar el tipo de código según la naturaleza de tu código. Para estos escenarios, usaremos códigos PHP, así que selecciona Fragmento PHP en el menú desplegable.

Excelente. Ahora, repasaremos algunos escenarios comunes en los que puede que necesites usar código PHP para traducir ciertas partes de tu formulario.

Traducción de mensajes de validación a varios idiomas

Consideremos un sitio web que tiene formularios en diferentes idiomas en el mismo sitio. Si bien puedes cambiar fácilmente las etiquetas manualmente o con el plugin Weglot como hemos mostrado anteriormente, los mensajes de validación no se pueden cambiar para formularios individuales con estos métodos.

Para cambiar los mensajes de validación según el idioma específico seleccionado por un usuario en tu sitio, necesitarás insertar un fragmento de código PHP.

Hemos creado un fragmento de código que traduce tus mensajes de validación de formularios al español o francés según el idioma seleccionado por el usuario.

Sigue los pasos que hemos mostrado anteriormente para a tilde;adir un nuevo fragmento usando WPCode, y luego inserta el siguiente fragmento dentro del editor de c ilde;digo:

Selecciona el m ilde;todo de inserci ilde;n de c ilde;digo (auto-insertar, ejecutar en todas partes).

Luego, despl ilde;zate hacia arriba y pulsa el bot ilde;n de alternancia para establecer tu fragmento de c ilde;digo como Activo. Haz clic en el bot ilde;n Guardar fragmento.

¡Enhorabuena! Tus formularios ahora mostrar ilde;n mensajes de validaci ilde;n en el idioma seleccionado.

Si deseas a tilde;adir traducciones para otros idiomas, necesitar ilde;s el c ilde;digo de idioma ICL para ese idioma (es 'es' para espa tilde;ol y 'fr' para franc ilde;s). Simplemente a tilde;ade una l ilde;nea de c ilde;digo que comience con:

case '[inserta tu c ilde;digo de idioma]':

Luego, usa los mismos bloques de c ilde;digo que aparecen en nuestro c ilde;digo de ejemplo anterior, justo despu ilde;s de la l ilde;nea case.

A tilde;ade las traducciones para cada mensaje de validaci ilde;n a la derecha del signo igual dentro de corchetes como se indica a continuaci ilde;n (el tipo espec ilde;fico de mensaje de validaci ilde;n se indica con las barras diagonales dobles):

//n ilde;mero v ilde;lido
$strings[ 'val_number' ] = '[Introduce tu traducci ilde;n]'

Y repite para cada l ilde;nea de c ilde;digo.

Hemos probado este c ilde;digo para los plugins WPML y Polylang. No se garantiza la compatibilidad con otros plugins de traducci ilde;n de idiomas.

Traducci ilde;n de Subetiquetas del Campo de Confirmaci ilde;n de Correo Electr ilde;nico

Si est ilde;s utilizando el campo de Confirmaci ilde;n de Correo Electr ilde;nico, es posible que desees traducir la subetiqueta a otro idioma.

Como se muestra en el ejemplo anterior, puedes hacerlo con algo de c ilde;digo PHP personalizado insertado usando WPCode.

Aqu ilde; tienes el c ilde;digo que necesitar ilde;s:

El texto traducido para las subetiquetas debe insertarse en el lado derecho de los signos igual en las funciones $properties.

Por ejemplo, as ilde; es como necesitar ilde;s modificar el c ilde;digo anterior para las subetiquetas en espa tilde;ol para los campos de confirmaci ilde;n de correo electr ilde;nico:

$properties[ 'inputs' ][ 'primary' ][ 'sublabel' ][ 'value' ] = __( 'Introduce tu correo electr ilde;nico', 'plugin-domain' );
$properties[ 'inputs' ][ 'secondary' ][ 'sublabel' ][ 'value' ] = __( 'Para confirmar, vuelva a ingresar su direcci ilde;n de correo electr ilde;nico aqu ilde;i', 'plugin-domain' );

El c ilde;digo anterior cambiar ilde; el mensaje de validaci ilde;n para el campo de confirmaci ilde;n de correo electr ilde;nico globalmente en los formularios de tu sitio. Sin embargo, tambi ilde;n es posible cambiarlo solo para formularios individuales modificando ligeramente el c ilde;digo anterior.

/**
 * Customize email field properties.
 *
 * @link https://wpforms.com/developers/how-to-change-sublabels-for-the-email-field/
 */
 
function wpf_dev_email_field_properties( $properties, $field, $form_data ) {
 
    // Only process this snippet on the form ID 123
    if ( absint( $form_data[ 'id' ] ) !== 123 ) {
 
        return $properties;
    } 
      
    // Change sublabel values
    $properties[ 'inputs' ][ 'primary' ][ 'sublabel' ][ 'value' ] = __( 'Enter Your Email', 'plugin-domain' );
    $properties[ 'inputs' ][ 'secondary' ][ 'sublabel' ][ 'value' ] = __( 'To confirm, re-enter your email address here', 'plugin-domain' );
  
    return $properties;
 
}
 
add_filter( 'wpforms_field_properties_email' , 'wpf_dev_email_field_properties', 10, 3 );

En la l ilde;nea de c ilde;digo if ( absint( $form_data[ 'id' ] ) !== 123 ), simplemente reemplaza "123" con el ID real del formulario que te interesa.

Puedes localizar el ID del formulario yendo a WPForms » Todos los Formularios y mirando el ID en el shortcode de tu formulario deseado.

Otras opciones de traducción

Si deseas traducir otros campos espec ilde;ficos y validaciones asociadas ilde;nicamente con ciertos tipos de formularios, puedes consultar la siguiente documentaci ilde;n para desarrolladores:

• Traducci ilde;n de mensajes de validaci ilde;n para el complemento de Registro de Usuarios
• C ilde;mo traducir el campo de Carga de Archivos

A continuaci ilde;n, Crea Formularios Acorde ilde;n

Un diseño de acordeón es una forma fantástica de facilitar el rellenado de un formulario largo con secciones colapsables. Nuestra guía detallada sobre cómo crear formularios de acordeón te muestra todos los pasos para crear un formulario de acordeón en WordPress.

Crea tu formulario de WordPress ahora

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin constructor de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.