WordPress

Insertar formulario de contacto en el lateral de tu web

Si tienes una web o blog de servicios, no me puedes negar la importancia de ponerle las cosas fáciles a tus usuarios para que puedan contactar contigo. La manera más práctica es teniendo una página de contacto, pero todavía se lo puedes poner más fácil si incluyes un pequeño formulario de contacto en el lateral de tu web. Eso es precisamente lo que te explico en la entrada de hoy.

Lo vamos a hacer gracias a los Widgets de WordPress, una funcionalidad muy útil que viene de serie, por lo que no vas a tener que instalar ningún plugin extra. Bueno, si no tienes ningún plugin de formulario de contacto, entonces sí que vas a necesitar instalar uno ya que WordPress no lo incluye ninguno.

Si no tienes un formulario de contacto, puedes instalar el plugin Contact Form 7 que es gratuito y ya hablamos de él en otra ocasión para mostrarte cómo crear un formulario en WordPress. De hecho, hemos hablado de ese plugin en más de una ocasión, porque también hicimos una entrada sobre cómo validar un DNI o CIF en WordPress.

Lo primero que necesitas saber es dónde están los Widgets. Es muy fácil, sólo tienes que localizar la opción “Apariencia” del menú lateral izquierdo y ahí tienes la opción Widgets.

Insertar-formulario-contacto-en-lateral-web-localizar-widgets-wordpress

Una vez estés dentro de la pantalla de Widgets, verás algo similar a esto:

Insertar-formulario-contacto-en-lateral-web-Zona-Widgets-Wordpress

En la parte de la izquierda, encuentras los widgets que tienes disponibles. Algunos vienen de serie con WordPress, pero otros se instalan cuando añades algún plugin nuevo. Por ejemplo, en la imagen se puede ver uno con el título “Formulario” que lo ha añadido automáticamente el plugin Gravity Forms.

En la parte derecha de la pantalla tienes las zonas de tu web donde vas a poder añadir los Widgets. Esas zonas varían de una web a otra, en función del tipo de plantilla que tengas, aunque también puedes instalar plugins para hacer que te salgan nuevas zonas. Cuando digo zonas me refiero a la estructura de la web (cabecera, pie de página, lateral,…).

De las tres que ves en la imagen superior, para poner un formulario en el lateral de nuestra web nos interesa la zona “Primary Sidebar”. Recuerda que tu web seguramente puede tener áreas diferentes a las que te muestra la imagen. Lo normal sería que tuvieses una “Sidebar” (para el lateral del blog), aunque puede que también tengas una “Side Area”, una “Sidebar Page”,… Es cuestión de que lo que vamos a hacer a continuación lo pruebes en las diferentes zonas donde aparezcan las palabras “Side” y “bar” hasta dar con la correcta en tu caso.

En nuestro caso vamos a hacerlo con el área “Primary Sidebar” ya que queremos colocar el formulario de contacto en la barra lateral del blog. Lo primero que tienes que hacer es desplegar el área haciendo clic en el icono de la flecha que encontrarás junto al título del área.

Insertar-formulario-contacto-en-lateral-web-Area-lateral-blog

Como ves, nosotros tenemos hasta seis Widgets en este área, empezando por el formulario para darse de alta en el blog y terminando por un Widget de texto, que es donde tenemos el banner de Shutterstock. El orden de los Widgets es el que nosotros queramos, por lo que si te interesa poner formulario para darse de alta en el blog el último, lo único que tienes que hacer es arrastrarlo para cambiarlo de lugar (para arrastrar tienes que hacer clic sobre el Widget y, sin soltar el botón del ratón, moverlo hasta donde quieras).

El widget necesario para colocar un formulario de contacto en el lateral del blog va a depender del plugin que estés utilizando. En el caso del plugin Gravity Forms ya tiene un Widget propio (si has creado ya un formulario con ese plugin claro), por lo que únicamente tendrías que buscarlo en la zona de la izquierda, la zona de Widgets disponibles, y arrastrarlo dentro del área “Primary Sidebar”.

Pero si utilizas el plugin Contact Form 7 o cualquier otro que utilice el sistema de shortcodes, entonces te toca trabajar un poquito más, pero no mucho. En casos así, necesitas arrastrar un Widget de texto. Una vez lo tengas situado en el área y la posición que te interese, ahora sólo tienes que ponerle un título y en el campo de abajo escribir el shortcode.

Insertar-formulario-contacto-en-lateral-web-Escribiendo-Shortcode-Widget

Una vez lo hayas hecho tienes que hacer clic en el botón de guardar y listo. Ahora ya debería verse el formulario de contacto insertado en el lateral de la página que hayas seleccionado. Si no lo ves, prueba a recargar la página. Si sigues sin verlo es posible que el área escogida no corresponda a la de la página, por lo que deberás probar con un área nueva.

Bueno, ¿ha sido fácil no? Ya puedo escuchar los “siiiiiii” ;). Lo mejor de todo es que los Widgets los puedes utilizar para muchas otras cosas además de para añadir un formulario de contacto en el lateral de tu blog. Puedes incluir banners, categorías,  etiquetas, un buscador,… y mucho más.

Si lo has intentado y no te sale déjame un comentario e intentaré ayudarte. :)

Comentarios

  1. Hola, como haces para que el nombre del campo este dentro de la caja para escribir?

    Muchas gracias!

    1. Hola Jordi. Cuando estés configurando el campo en cuestión, por ejemplo un campo de texto, tienes que escribir el texto que quieras en el campo “valor por defecto (opcional)” y luego marcar la casilla que dice “¿usar este texto como marcador?”. Sobretodo marca esa casilla, porque así el texto “desaparecerá” cuando el usuario se ponga a escribir encima.

      Un saludo y gracias por comentar. :)

  2. hola una pregunta como tengo que configurar para insertar una imagen que me quede al lado derecho del formulario. trato de agregar una imagen y me queda siempre abajo del formulario.

    1. Hola Paulina,

      Vaya, tu comentario se nos había pasado :( Espero que no sea tarde, de todas maneras te respondo.

      Para colocar una imagen antes que el formulario, puedes hacerlo añadiendo un widget de texto e introduciendo el siguiente código con unas modificaciones que te cuento al final:

      <a href=”/cursos” target=”_blank” rel=”nofollow”><img src=”http://www.hodeidesign.com/web/wp-content/uploads/2015/07/banner-cursos-online.jpg” alt=”NUEVO – Todo lo que necesitas para conseguir una web increíble – Cursos online” /></a>

      Modificaciones que debes hacer:

      1a) href=”/cursos” está escrito para que cuando pulsen la imagen les lleve a nuestra página de cursos. Si en tu caso al pinchar la imagen no quieres que vaya a ninguna parte, debes borrar lo siguiente:
      <a href=”/cursos” target=”_blank” rel=”nofollow”> y también el </a> del final. Si quieres que al pinchar sí que les lleve a otra URL, sustituye “/cursos” por “/nueva-url” ->> Ejemplos: “/contacto” (si tienes una página dentro de tu web que se llama contacto); “http://www.hodeidesign.com” si quieres que lleve a una web diferente.

      2a) “http://www.hodeidesign.com/web/wp-content/uploads/2015/07/banner-cursos-online.jpg” debes sustituirlo por la URL completa de tu imagen (no olvides las comillas).

      3a) “NUEVO – Todo lo que necesitas para conseguir una web increíble – Cursos online” sustitúyelo por el texto descriptivo que creas conveniente (esta es la “famosa” etiqueta “alt” de las imágenes y es importante de cara al SEO).

      Espero que con esto se solucione. :)

      ¡Un saludo y gracias por comentar!

  3. Hola muchas gracias por tu información. Tengo un pequeño problema, en la parte superior izquierda de la pagina esta el boton de un “sobrecito” que al darle click nos debe mandar a la pagina de “contacto” pero no es así, nos sale una pagina de ERROR 404. Me puedes ayudar a corregir ese error?

    Gracias

  4. Buenos dias, llevo tiempo probando con diferentes temas de wordpress.com para que me permita poner un formulario de contacto, pero no me aparece en ningun tema, todo lo que he visto, para poder hacerlo es instalar un plugin, pero al ser a través de la página de wordpress, no me sirve de nada instalarlo o al menos a mi no me ha servido, tengo que descargarme wordpress obligatoriamente para poder poner un formulario de contacto?
    https://vicentadelamontanablog.wordpress.com/
    Esta es la dirección.
    Muchas gracias de antemano.
    Un saludo

    1. Hola

      La plataforma de WordPress.com funciona diferente a la plataforma de WordPress.org. El primero está alojado en sus propios servidores y no tienes el control sobre la web (en cuanto a funcionalidad) y el segundo te encargas tu de todo, pero eso te permite añadir, editar y borrar todas las funcionalidades extra que quieras. Desgraciadamente en WordPress.com no es posible instalar plugins externos, ya que ellos cobran por estas funcionalidades extra.

      He encontrado un tutorial que explica cómo incluir un formulario en WordPress.com, espero que te funcione (no lo he podido probar porque nosotros no trabajamos con la plataforma de WordPress.com):
      https://en.support.wordpress.com/contact-form/

      Ahh te incluyo también un enlace aun artículo que escribimos hace tiempo dónde se explican las diferencias entre ambas plataformas:
      http://www.hodeidesign.com/diferencias-entre-wordpress-com-y-wordpress-org/

      Un abrazo :)

  5. Muchisimas gracias! Ha sido muy útil. SOlo tengo un par de preguntas.

    Resulta que mi webmaster digamos que nos ha dejado colgados y me estoy encargando ya de poner las cosas a nuestro gusto. Estoy intentando modificar la barra lateral para poner un formuario sencillo de contacto (que creé por mailchimp). como lo puedo insertar? LO pongo por un el widget “Bloom” no?

    1. Puedes usar un widget de Texto normal y pegar en la zona de contenido de ese widget el código que te da Mailchimp. Y debería funcionar bien y sin problemas.

  6. Hola me ha encantado el articulo, llevaba tiempo interesado en esto porque lo estube cuestionando el otro dia con un amigo, al final tenia yo razón por lo que veo. Enhorabuena al autor esperemos que sigan asi, nosotros tenemos un blog igual pero trata de técnicas sobre redes sociales, como conseguir mas seguidores, likes en tus publicaciones y demás. se llama creapublicidadonline.es ¡quedan invitados! gracias, un abrazo fuerte.

  7. Hola, muy interesante el articulo. Ahora, me interesaría hacer algo un poco más complicado que vi en una web y me gusto, y creo que esta hecho con widget o quizas con algun plugin.
    El sitio es http://www.inworx.com y del lado derecho tiene 2 botones que se expanden, yo necesitaría hacer uno asi.
    Muchas gracias!

    1. Hola Sergio

      Eso se sale mucho del tema de este artículo. Lo mejor es que busques algún plugin que lo haga o que mires por internet si algún programador experimentado puede ayudarte.

      Te recomiendo que mires en CodeCanyon, seguro que allí encontrarás el plugin que necesitas.

      Un abrazo :))

  8. estimado, muy buen articulo, me funciono al instante utilizando wpform, pero una consulta por si me puedes orientar, ¿como puedo hacer para que el formulario se reduzca de tamaño y se vea mas atractivo?

    muestro una imagen del formulario

    https://ibb.co/dCU2Pc

    espero me ilumine amigo, desde ya agradecido
    y nuevamente, posees una excelente pagina de ayuda y buenos tips

    saludos

Los comentarios están cerrados.