Bloque Formulario

Nota: Las instrucciones de esta guía hacen referencia al Editor clásico. Si vas a usar el editor de bloques de WordPress, consulta esta guía.

Este método no es seguro para recopilar información privada, como números de tarjeta de crédito o de cuenta bancaria, nombres de usuario, contraseñas, etc. Para recibir pagos, utiliza PayPal o un servicio de procesamiento de pagos similar que gestione de manera segura las transacciones financieras.

Tutorial en video
Cómo añadir el formulario de contacto
Edición del formulario de contacto
Visualizar tu propia información de contacto precompletada en el formulario
Añadir un formulario de contacto con shortcodes

Tutorial en video

Mira el siguiente video para ver un resumen de cómo funciona y sigue leyendo este artículo para obtener más ejemplos y ajustes.

Cómo añadir un formulario de contacto en tus entradas o páginas

1. En la barra lateral izquierda del escritorio de tu sitio ve a Páginas o Entradas.
2. Elige una entrada o página que quieras añadir al formulario o añade una nueva.
3. Encima de la barra de herramientas, haz clic en Añadir formulario de contacto.

El formulario de contacto cuenta con cuatro campos por defecto: Nombre, Correo electrónico, Web y Comentario.

Puedes editar, eliminar o añadir más campos a tu formulario. Recuerda que puedes decidir si quieres que tu campo sea necesario completarlo o no.

Selecciona el botón Editar de la parte superior para editar los ajustes del formulario.

Preferencias de notificación

• Por defecto, cuando un visitante envía tu formulario de contacto, se enviará un correo electrónico al autor de la entrada o de la página con la dirección de correo electrónico que tenga en el registro de su cuenta de WordPress.com.
• El asunto será el título de la entrada si no añades texto personalizado.
• Puedes cambiar tanto el destinatario como el asunto del correo electrónico de tus correos electrónicos desde las opciones de la parte superior del área de edición del formulario.
• Separa los destinatarios de los correos electrónicos con comas para enviarlos a más de uno a la vez.
• También puedes cambiar la dirección de correo electrónico y el asunto con un shortcode, tal y como se explica a continuación.

Campos del formulario de contacto

Se necesita una etiqueta y un tipo de campo para cada campo. Puedes elegir entre los siguientes tipos:

• Casilla de verificación: permite al usuario marcar una casilla para elegir una opción
• Menú desplegable: crea un menú desplegable de opciones
• Dirección de correo electrónico: se necesita un formato de dirección de correo electrónico
• Nombre: campo de texto
• Botón de opción: similar al tipo de campo de casilla de verificación
• Texto: una sola línea de texto
• Área de texto: varias líneas de texto
• Dirección web: se necesita un formato de URL

• Una vez que hayas añadido los campos que quieras, haz clic en el botón Actualizar formulario para guardar los cambios y añadir el formulario a tu entrada o página.

Una vez que acabes de añadir campos y establecer preferencias de notificación, elige el botón Insertar para añadirlo a la entrada o a la página.

Edición del formulario de contacto

Una vez que añadas un formulario de contacto, podrás añadir o editar campos, y acceder a la pestaña de ajustes haciendo clic en el formulario y pulsando el icono del lápiz. Haz los cambios que quieras y, a continuación, elige Actualizar.

Visualizar tu propia información de contacto precompletada en el formulario

Si visitas tu sitio en vivo para ver tu formulario de contacto, es posible que veas que tu información de contacto ya está completada. Solo tú verás esa información, ya que estás viendo tu sitio mientras tengas la sesión iniciada en tu cuenta de WordPress.com.

• Los visitantes de WordPress.com que hayan iniciado sesión en tu sitio verán formularios de contacto con su información completada automáticamente.
• Los visitantes que no la hayan iniciado, no verán ninguna información que se haya completado automáticamente.
• Si quieres comprobarlo, cierra sesión en WordPress.com y fíjate en los formularios de contacto, que estarán vacíos.
• Esta función no se aplica a los sitios autoalojados con Jetpack.

Añadir un formulario de contacto con shortcodes

Puedes añadir un formulario de contacto básico con un código específico de WordPress denominado shortcode. Encontrarás más información sobre los shortcodes aquí.

Para añadir un formulario de contacto con un shortcode, copia y pega el siguiente texto en cualquier entrada, página o widget de texto:

[contact-form]
[contact-field label="Nombre" type="name" required="true" /]
[contact-field label="Correo electrónico" type="email" placeholder="Tu correo electrónico" required="true" /]
[contact-field label="Web" type="url" /]
[contact-field label="Comentario" type="textarea" required="true" /]
[/contact-form]

• Cada shortcode del formulario de contacto debe comenzar con [contact-form] y terminar con [/contact-form]
• En los códigos [contact-form]], cada campo individual está rodeado por una etiqueta [contact-field /]
• Los campos se pueden añadir o quitar del shortcode de forma manual. Por ejemplo, si quieres quitar el cuadro de texto de la web, tienes que quitar dicha línea como se muestra aquí:

[[contact-form]
[contact-field label="Nombre" type="name" required="true" /]
[contact-field label="Correo electrónico" type="email" placeholder="Tu correo electrónico" required="true" /]
[contact-field label="Comentario" type="textarea" required="true" /]
[/contact-form]

Atributos de campo de shortcodes disponibles

Los atributos de campo disponibles son los siguientes:

label: Asigna una etiqueta descriptiva al campo.

type: Determina qué tipo de campo añades. Entre las opciones disponibles se encuentran las siguientes:

• text: Muestra un cuadro de texto común de una sola línea
• textarea: Muestra un cuadro de texto de varias líneas
• radio: Muestra opciones de radio
• checkbox: Muestra una única casilla de verificación
• select: Muestra una lista desplegable con varias opciones
• email: Muestra un cuadro de texto de una sola línea
• name: Muestra un cuadro de texto de una sola línea
• url: Muestra un cuadro de texto de una sola línea

options: los campos «select» y «radio» tienen una cuarta opción llamada «options». Se trata de una lista separada por comas de todas las opciones disponibles en el campo de elección o en el menú desplegable. Aquí tienes un ejemplo:

[contact-field label="Do you have a blog?" type="radio" options="Yes,No" /]

También puedes cambiar las preferencias de notificación de un formulario de contacto insertado añadiendo los siguientes parámetros a la etiqueta de apertura «contact-form»:

• to='email address': La dirección de correo electrónico a la que deben enviarse las notificaciones cuando se envíen formularios.
• subject='email subject': Lo que aparece en la línea del asunto para las notificaciones del correo electrónico.

Por ejemplo:

[contact-form to='email@yourgroovydomain.com' subject='Form Submitted']

Este código enviaría una notificación por correo electrónico con la línea de asunto «Formulario enviado» a la dirección de correo electrónico email@yourgroovydomain.com.

Cambio del texto del botón Enviar

submit_button_text: Te permite cambiar el texto del botón del formulario de contacto para poner lo que quieras en lugar de «Enviar». Con el ejemplo que hay a continuación, se mostraría «Contact me!» (contactar conmigo) en el botón:

[contact-form submit_button_text='Contact me!'][contact-field label='Name' type='name'/][/contact-form]

placeholder: define un marcador de posición o un texto descriptivo para mostrar dentro de un campo de entrada mientras esté vacío. Este texto desaparece cuando se empieza a escribir en el campo. No está disponible para los campos «radio», «select» y «checkbox».

required: Si quieres que el campo sea obligatorio, añade required="true" o required ="1" al shortcode. Si no, no lo incluyas.