Diseño página de contacto con Ninja Forms

Play

En esta séptima clase del curso de diseño web de un portafolio, vamos a crear y configurar una página de contacto utilizando el plugin Ninja Forms. Este plugin es conocido por su facilidad de uso y efectividad para añadir formularios de contacto en sitios web de WordPress. Es el momento de facilitar que los visitantes de tu sitio web se pongan en contacto contigo. ¡Vamos a empezar!

Antes recuerda que puedes suscribirte gratis al blog.
Si te suscribes puedes proponer artículos y cursos. También te envío un email semanal con todas las novedades que publico en el blog.

Si has seguido el curso hasta ahora, ya deberías tener diseñadas la página inicial y la página Sobre mí de tu portafolio creativo. También hemos dejado instalado y activado el plugin Ninja Forms. Si aun no lo has instalado en tu WordPress, veta a Plugins > Añadir nuevo > busca Ninja Forms y los instalas y activas.

A continuación te dejo el resumen de lo que hemos visto en el videotutorial.

Para comenzar, vamos a la página de contacto que creamos previamente. En el editor de bloques de WordPress, buscamos el bloque de Ninja Forms. Seleccionamos este bloque y, dentro de él, el formulario de contacto predeterminado que viene con el plugin. Al actualizar y visitar la página, veremos que el formulario ya está añadido con un solo clic. Es increíblemente sencillo.

Ahora, ocultamos el título de la página de contacto para una apariencia más limpia. Volvemos al panel de control y accedemos al ítem de menú de Ninja Forms. Seleccionamos el formulario de contacto predeterminado y empezamos a personalizar los campos. Cambiamos las etiquetas para que sean más claras, como «Tu nombre», «Tu email» y «Tu mensaje». También personalizamos el botón de envío para que diga «Enviar» y el mensaje de envío a «Enviando…».

En las opciones avanzadas, ocultamos el mensaje que indica que los campos marcados con asterisco son obligatorios. Esto se hace desde los ajustes de visualización. Además, configuramos las notificaciones por correo electrónico para que nos avisen cuando alguien complete el formulario. Personalizamos el asunto del correo para que sea más claro, por ejemplo, «Nuevo mensaje desde la web», y ajustamos el contenido del correo para que incluya el nombre, el email y el mensaje de la persona.

Para personalizar el diseño del formulario y que se integre con el estilo de nuestra web, añadimos un contenedor en la página de contacto y movemos el formulario dentro de este contenedor. Ajustamos el espaciado y los márgenes para que el formulario esté bien centrado en la página.

Ninja Forms ofrece opciones de personalización de diseño adicionales, pero algunas requieren una extensión de pago. Para aquellos que no quieren pagar, puedes usar CSS personalizado. Añadimos un fragmento de código CSS para darle un borde al formulario que coincida con el diseño del sitio, asegurándonos de que el fondo del formulario sea el mismo que el de la página y que el texto dentro de los campos sea blanco.

Finalmente, probamos el formulario para asegurarnos de que todo funcione correctamente. Ajustamos los mensajes de confirmación para que sean claros y útiles para los usuarios. Una vez que estamos satisfechos con la configuración y el diseño, publicamos la página.

Aquí tienes el código CSS que utilizo en la clase para personalizar los campos del formulario, simplemente tienes que copiarlo y añadirlo tal como te indico en el video.

/*FORMULARIO DE CONTACTO*/

#nf-field-4{
background:#1b191a!important;
color:#da90f6!important;
font-weight:600!important;
text-decoration:underline!important;
color:rgb(17,86,127)!important;
font-size: 26px!important;
}

#nf-field-1, #nf-field-2, #nf-field-3{
	border: 4px solid transparent; 
border-image:linear-gradient(90deg,rgb(17,86,127) 0%,rgb(17,86,127) 100%) 1!important;
	background-color:#1b191a!important;
	color:#fff!important;
}

Con estos sencillos pasos, hemos creado una página de contacto funcional y bien diseñada utilizando Ninja Forms en WordPress. Este formulario permitirá que los visitantes de tu portafolio se pongan en contacto contigo fácilmente.

En la siguiente clase, comenzaremos a crear las páginas de categoría del portafolio. Si tienes alguna duda o comentario, no dudes en hacérmelo llegar a través de la página de contacto del blog ¡Hasta la próxima!