Santi Navarro
Menu
  • INICIO
  • WORDPRESS
  • SOCIALMEDIA
  • YOUTUBE
  • SEO
  • RECURSOS
  • CONTACTO
Home
Wordpress
Cómo crear un formulario de contacto en WordPress con diseño responsive

Cómo crear un formulario de contacto en WordPress con diseño responsive

telefono-antiguo-formas-de-contacto

El post vamos a ver cómo crear un formulario de contacto para WordPress que además se adapte a todos los dispositivos para una correcta visualización mediante su diseño responsive y que lo podamos insertar en cualquiera plantilla de WordPress..

En la mayoría de sitios web precisamos de un formulario, ¿no te parece?.

Nuestro objetivo es que cualquier visitante pueda contactar con nosotros fácilmente.

Sí, podemos indicar un correo al que posteriormente pueda escribirnos y comunicarse con nosotros, pero la mejor manera es hacerle el camino sencillo, además evitaremos que nuestro email sea visible en nuestro website evitando que sea captado para remitirnos correo spam.

Por tanto se hace necesario disponer de un formulario en el que pueda escribirnos en el momento para situarlo en el sitio más adecuado de nuestra plantilla de WordPress.

Para hacer esto usaremos un plugin en WordPress que hace su función a la perfección, es sencillo, totalmente configurable y además es responsive adaptándose a todos los dispositivos, ¿qué más podemos pedirle?.

Estoy hablando de Contact Form 7, un plugin que nos facilita la creación de formularios para WordPress.

Vamos a ver cómo en unos sencillos pasos podemos disponer en nuestra web/blog de un form o de varios, ya que nos permite la creación de múltiples forms.

Bien, para instalarlo podemos buscarlo desde el administrador de plugins de nuestro WordPress o bien descargarlo desde la web del plugin para posteriormente subirlo vía FTP a nuestra carpeta de plugins.

En el primer caso bastará con hacer click a Añadir nuevo, en la sección de plugins de nuestro panel de administración de WordPress y realizar la búsqueda, nos aparecerá y antes de nada es aconsejable hacer click en ‘Detalles' con el fin de comprobar que funcionará adecuadamente en nuestra versión de WordPress.

Realizada la comprobación bastará con Instalar el plugin.

En el segundo caso, de igual forma, deberíamos comprobar que sea compatible con nuestra versión actual de WordPress. Finalmente activarlo.

Una vez activado ya nos aparecerá en la barra de admin el título de Contacto como podemos ver a continuación:

formulario-de-contacto-para-wordpress

Contenido

Nuestro primer formulario de contacto

Llegado este punto ahora nos disponemos a crear nuestro primer formulario de contacto en nuestro blog de WordPress.

Si vamos a la pestaña de Contacto se nos muestran las opciones de Formularios, donde se muestra la relación de formularios que tenemos creados y en segundo lugar Añadir un nuevo.

Una ventaja de este plugin es que podemos crear tantos formularios como deseemos para diferentes objetivos para mostrarlos en nuestro blog o website.

Podríamos crear uno para el contacto, otro para pedidos, otro de sugerencias, etc. Gracias a la versatilidad de éste plugin podemos hacer cualquier tipo que nos planteemos.

Vamos a añadir uno nuevo y vemos los campos que podemos incluir. El idioma en este caso será el Español.

El primer paso será darle un Nombre, aconsejo que sea diferenciador para identificarlo fácilmente.

Por defecto se nos crear un formulario con los campos Nombre, Email, Asunto y Mensaje, más el botón de Enviar.

¿Cómo muestro el formulario y dónde lo puedo ubicar?

Una de las cosas que más me gusta de este plugin es que los formularios que creamos son adaptativos por lo que se ajustarán a las diferentes ubicaciones donde deseemos ponerlos en nuestra web, ya sea en el sidebar, en el footer, en el contenido, etc.

Para agregar el formulario basta con copiar el shortcode que genera y pegarlo allá donde deseemos mostrarlo. Para que gener el shortcode debemos Guardar los cambios.

En la siguiente imagen vemos cómo se muestra.

shortcode-muestra-formulario-de-contacto-wordpress

¿Qué tipo de campos puedo disponer en mi form?

Existen diferentes campos que podemos emplear para crear nuestro formulario, lo que el plugin llama etiquetas, la relación es la siguiente:

  • Campo de texto.
  • Email
  • URL
  • Número de teléfono
  • Número (casilla)
  • Número (control deslizante)
  • Fecha
  • Área de texto
  • Menú desplegable
  • Casillas
  • Botones de opción
  • Aceptación
  • Acertijo
  • CAPTCHA
  • Subida de archivos
  • Botón de enviar

Como veis con todas estas etiquetas es posible generar cualquier tipo de form lo que hace al Contact Form 7 uno de los mejores plugins para crear formularios para WordPress ya que además su diseño se adaptará a todos los dispositivos.

¿Qué pasos debo seguir para generar etiquetas?

Para generar una etiqueta debes desplegar el botón con el nombre Generar etiqueta.

Una vez selecciones la correspondiente etiqueta debes configurarla según el tipo.

En todas es posible añadir clases e id por si deseas posteriormente dar estilos mediante CSS.

Una vez generada la etiqueta debes copiar un pequeño shortcode sobre la pantalla en la que se van introduciendo los elementos del formulario y otro shortcode deberás pegarlo en la pantalla del Mensaje, que serán los valores que se remitirán al enviar el form.

En la siguiente imagen puedes ver mayor detalle haciendo clic aquí.

En la imagen anterior puedes observar que también deberás configurar la dirección de email donde deseas recibir los datos que te remitan desde los forms que hayas dispuesto en tu website.

Si deseas más información te recomiendo que visites cómo crear y configurar un sencillo formulario de contacto para WordPress.

Si deseáis ver cómo optimizar la carga de los ficheros CSS y JS que incluye el plugin en vuestro sitio para mejorar el rendimiento podéis leer el post sobre Contact Form 7: Cargar CSS y JS en las páginas que lo precisen.

Además de este plugin para crear formularios de contacto podemos encontrar otros tipos de formularios que pueden adaptarse a nuestro sitio, sólo queda investigar y elegir el que mejor se adapte.

Conclusión

La necesidad de disponer de un formulario para nuestro blog está totalmente cubierta con el Contact Form 7 ya que es versátil, responsive y además lo podemos obtener gratuitamente desde el repositorio de plugins de WordPress.

Verdaderamente resulta interesante, ¿no te lo parece?

Si os ha gustado el artículo estais invitados a compartirlo por los canales sociales. Así mismo si necesitáis ayuda con vuestro formulario seguir leyendo más abajo. 😉

¿Necesitas ayuda para configurar o crear un formulario de contacto?

Si precisas de ayuda para configurar el Contact Form 7 o deseas hacer un formulario más complejo puedo hacerlo por tí, escríbeme aquí y hablamos 🙂

En la siguiente imagen puedes ver cómo podría quedar tu formulario, por ejemplo.

crear-formulario-responsive-en-wordpress

Post anterior
Siguiente post

Artículos relacionados de Wordpress

Las 7 mejores Plantillas para Prestashop para tu tienda online profesional [2017]

Las 7 mejores Plantillas para Prestashop para tu tienda online profesional [2017]

Post personalizado en WordPress, ¿qué es y para qué sirve?

Post personalizado en WordPress, ¿qué es y para qué sirve?

¿Cómo poner Google Adsense en WordPress?

¿Cómo poner Google Adsense en WordPress?

10 ideas principales sobre los plugins para WordPress

10 ideas principales sobre los plugins para WordPress


Los datos de los comentarios están seguros.

Responsable: Santi Navarro. Finalidad: Moderar los comentarios Legitimación: Consentimiento del Interesado. Destinatarios: Tus datos los guardará Disqus, el sistema que emplea esta web, que está acogido al acuerdo de seguridad EU-US Privacy. Derechos: podrás acceder, rectificar, limitar y suprimir tus datos.

ENTRADAS RECIENTES

  • Como eliminar comentarios desde la base de datos en WordPress
  • Como crear un botón para eliminar post o página en admin bar de WordPress
  • Cómo organizar las entradas de WordPress en categorías masivamente
  • Las Mejores Plantillas WordPress para Abogados Responsive
  • Tecnicas para ganar visibilidad en redes sociales gratis
  • Los mejores navegadores de internet para Android móvil y tablet
  • Mejores Plantillas de WordPress para Inmobiliaras y Agencias de Venta y Alquiler de Propiedades
  • Mejores Plantillas de WordPress para Empresas o Web Corporativa

Santi Navarro

Diseño web Wordpress, Posicionamiento web y Socialmedia

ARTÍCULOS SOBRE HOSTING

  • Hosting para Wordpress
  • Loading Alojamiento Web
  • Hosting Gratis

PLANTILLAS PARA WORDPRESS

  • Plantillas WordPress para Fotografía
  • Plantillas WordPress para Empresas
  • Plantillas WordPress para Abogados
  • Plantillas WordPress para Inmobiliarias
  • Plantillas WordPress para Restaurantes
  • Elegant Themes Plantillas Premium
  • Themeforest Envato Market

PUBLICACIONES

  • Página web barata
  • Descargar videos de Youtube sin programas
  • Como registrarse en Twitter fácilmente
  • Mejores Plantillas Responsive para Wordpress
  • Presupuesto Tienda Online
Copyright © 2025 Santi Navarro
Diseño web Wordpress en Valencia | Diseño web Gandia
Aviso legal - Política de privacidad - Uso de cookies - Mapa del sitio