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 Universally.

Universally es un plugin de traducción impulsado por IA que puede traducir instantáneamente el contenido de tu sitio a más de 110 idiomas simplemente haciendo clic en un botón de selector de idioma.

Funciona con todo tipo de contenido en un sitio de WordPress, incluidos los formularios creados con WPForms. Además, puedes empezar a usar Universally gratis.

El plan gratuito traduce hasta 2.000 palabras a un idioma en un solo sitio, y puedes actualizar a un plan de pago más adelante si necesitas más idiomas o más palabras traducidas.

Para empezar, dirígete al sitio web de Universally y haz clic en el botón 'Empezar gratis' para registrarte en una cuenta.

Después de registrarte, accederás a tu panel de control de Universally, donde podrás configurar tu primer proyecto de traducción.

Desde tu panel de control, busca y haz clic en el botón 'Añadir proyecto'. Esto abrirá un formulario corto donde configurarás tu sitio en Universally.

Empieza introduciendo el dominio de tu sitio. Luego, dale un nombre a tu proyecto para que puedas reconocerlo fácilmente más tarde.

Luego selecciona el idioma de origen en el que está escrito tu contenido y elige WordPress como tu plataforma. Una vez que todo esté rellenado, haz clic en 'Siguiente'.

Después de crear tu proyecto, accederás a una pantalla de configuración donde podrás conectar todo a WordPress en solo unos clics.

Empieza haciendo clic en el botón 'Instalar plugin'. Se abrirá automáticamente una nueva ventana, donde simplemente haz clic en 'Instalar' y luego en 'Activar' para añadir el plugin Universally a tu sitio de WordPress.

A continuación, haz clic en el botón 'Activar' para conectar tu clave API. Se abrirá otra ventana y vinculará tu sitio a Universally por ti.

Simplemente haz clic en el botón 'Confirmar y conectar', y la ventana se cerrará sola.

Con tu sitio conectado, ahora puedes hacer clic en el botón 'Añadir idiomas' para elegir en qué te gustaría traducir tu formulario.

Esto te llevará a una nueva página y mostrará una lista desplegable de más de 110 idiomas, así que adelante y elige el que quieras.

Para este tutorial, seleccionaremos español.

Puedes añadir tantos idiomas como permita tu plan, luego haz clic en 'Añadir idioma' para guardar tus selecciones.

Universally empezará a traducir tu sitio de inmediato, incluido el formulario de contacto que creaste con WPForms.

Ahora, visita la página donde publicaste tu formulario. Universally añade automáticamente un selector de idioma en la esquina inferior de tu sitio, así que simplemente haz clic en él y elige español.

Como puedes ver, Universally traducirá la etiqueta de tu campo de formulario, el texto del botón y las subetiquetas en el 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 el plan gratuito de Universally está limitado a 2.000 palabras traducidas. Si necesitas traducir más palabras que eso, tendrás que comprar un plan de pago, que empieza en 7,50 $ al mes.

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 puede cambiar fácilmente las etiquetas manualmente o con el plugin Universally 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.