Cada agencia web tiene que tomar una decisión crítica sobre cómo quiere manejar las estimaciones. Es prácticamente lo primero que los clientes quieren saber cuando buscan un nuevo sitio web.
Con el lanzamiento del nuevo paquete de diseño de la agencia web, me inspiré para mostrarle cómo integrar un formulario de estimación de costos. Para hacer esto, me decidí por un complemento popular llamado WP Cost Estimation & Payment Form . Este complemento viene con muchas funciones de personalización excelentes. Este complemento no solo puede calcular el costo en función de ciertas selecciones realizadas por el usuario, sino que también puede procesar esos pagos. Y dado que el complemento usa códigos cortos para incrustar el formulario, básicamente puede incrustar el formulario en cualquier lugar de mi página usando Divi Builder.
En este tutorial, le mostraré con qué facilidad puede diseñar un formulario de estimación de costos profesional y agregarlo a su sitio web utilizando el paquete de diseño de agencia web. Incluso le mostraré cómo puede personalizar el formulario para que coincida con el diseño de su sitio.
Empecemos.
Vea un adelanto del formulario en el diseño de la agencia web.
La puesta en marcha
Por cuestiones de tiempo, voy a comenzar este tutorial con los siguientes pasos ya completados:
- Instalar y activar el tema Divi
- Instale y active el complemento WP Cost Estimation & Payment Form .
- Descargue el paquete de diseño de la agencia web e importe el archivo Web-Agency_All.json a su biblioteca de temas Divi.
- Cree nuevas páginas para cada diseño.
- Crea tu menú principal.
Si está confundido con la configuración mencionada anteriormente, puede encontrar instrucciones más detalladas sobre cómo configurar su diseño correctamente consultando estos 10 pasos para usar un paquete de diseño para su nuevo proyecto .
Una vez que haya completado los pasos anteriores, estará listo para comenzar.
Nota: Si solo está interesado en la integración de la funcionalidad del formulario de estimación de costos y no tanto en el paquete de diseño, aún puede seguir el tutorial y aprender a usar el complemento para agregar un formulario a cualquier sitio web.
Cómo agregar un formulario de estimación de costos a su sitio utilizando el diseño de la agencia web
Suscríbete a nuestro canal de Youtube
Importar formularios de ejemplo
Para comenzar con algunos formularios de ejemplo, deberá importar los datos de ejemplo. Incluido en la carpeta de descarga de su complemento hay un archivo llamado » example_data_can_be_imported.zip «. Esto es lo que necesitará para importar los formularios de ejemplo.
Vaya a E&P Form Builder y haga clic en el botón amarillo Importar formularios en la parte superior de la página. En el cuadro Importar datos que aparece, cargue el archivo example_data_can_be_imported.zip y luego haga clic en el botón verde Importar. Debería ver aparecer los formularios de ejemplo. proporcionado en la carpeta de descarga del complemento donde encontró el archivo zip del complemento.
Duplicar el ejemplo de mi formulario de estimación
A continuación, duplique el ejemplo de mi formulario de estimación haciendo clic en el icono de duplicado junto al formulario en la lista.
Configuración general
En Configuración de formulario, actualice lo siguiente en la pestaña General.
- Título: Formulario de estimación de costos (o lo que quieras)
- Precio máximo: déjelo en blanco (esto es para que el costo máximo se calcule automáticamente)
- Siguiente paso automático: SÍ (Esto elimina la necesidad de hacer clic en el botón de siguiente paso en ciertos pasos)
- Velocidad de animaciones: 0.1 (Esto es solo porque creo que la velocidad predeterminada es demasiado lenta)
Guardar cambios
Configuración de diseño
Ahora haga clic en la pestaña Diseño para que podamos hacer algunos ajustes en el formulario para que coincida con el diseño de nuestro diseño de agencia web.
Actualice lo siguiente:
- Color principal: #4046B9
- Color de los textos: #2a3443
- Título de introducción y color de información sobre herramientas: #2a3443
- Nombre de la fuente de Google: Montserrat (esto es para que coincida con los encabezados en el diseño de la agencia web)
- Efecto brillante en los botones: NO (nuevamente, esto es para que coincida con el diseño del sitio)
Guardar cambios
Complete otras configuraciones importantes
Este formulario es realmente poderoso y tiene toneladas de configuraciones que deseará realizar en su propio tiempo al crear un formulario para su sitio. Puede cambiar esta configuración haciendo clic en el resto de las pestañas en Configuración de formulario.
Ajustes de Textos
En la pestaña de configuración de Textos, puede editar todas las etiquetas de copia y texto utilizadas a través de su formulario.
Ajustes del correo electrónico
También puede personalizar cómo desea manejar los correos electrónicos de notificación en la pestaña Correo electrónico, incluida una opción para integrar su formulario con Mailchimp .
Último paso
Aquí puede personalizar la configuración para el último paso de su formulario. Este es el paso que generalmente muestra el precio final de su presupuesto y le da al usuario un llamado a la acción. Para el ejemplo que estamos usando, la principal llamada a la acción es ingresar su dirección de correo electrónico, pero puede agregar los campos que desee para este último paso.
También puede elegir configurar su pasarela de pago aquí para procesar pagos. Esto llevaría al usuario a pagar el precio estimado en ese mismo momento.
Configuración de resumen
También puede optar por proporcionar un resumen en el último paso en la pestaña Resumen. Esto sería útil para estimaciones avanzadas que tienen mucha información que desea que el usuario revise antes del pago.
Cupones de descuento
En la configuración de cupones de descuento, puede crear nuevos códigos de cupón y asignarlos a su formulario.
Personalización de pasos de formulario
Como se trata de un duplicado de un formulario preconstruido, verá pasos conectados con diferentes saltos lógicos que ya se muestran en la sección Administrador de pasos.
El primer paso
El primer paso se designa con el color verde (puede designar un paso como el primer paso pasando el cursor sobre el paso y haciendo clic en el icono de la bandera). Pasa el cursor sobre el paso y verás un menú de navegación emergente (como cuando pasas el cursor sobre un módulo en Divi) que te permite editarlo, duplicarlo, eliminarlo o vincularlo a otro paso.
Haga clic en el icono de edición para editar la configuración del paso.
En las opciones del paso, verá que el título del paso es «¿Móvil o sitio web?». Cambie esto a «¿Aplicación móvil o sitio web?» para mayor claridad. También puede agregar una descripción a este paso, que se mostrará directamente debajo del texto del título de la opción.
En la sección Lista de elementos, verá los elementos o las opciones que el usuario elegirá para completar este paso. En el ejemplo, las opciones son Sitio web o Aplicación móvil. Haga clic para editar el elemento de la lista de sitios web.
Una vez que hace clic para editar un elemento, puede ver una buena cantidad de opciones disponibles.
Observe la opción Tipo. Al igual que lo haría con cualquier creador de formularios, puede cambiar el tipo de elemento que desea mostrar. Por ahora quiero mantener el tipo Imagen.
Observe también el nombre del grupo. Solo se puede seleccionar uno de los elementos del mismo grupo. Asignar elementos al mismo grupo (dándoles el mismo nombre de grupo) le permitirá proporcionar una lista de opciones en las que solo se puede seleccionar una. Debido a que el elemento de la lista «sitio web» y «aplicación móvil» tienen el mismo nombre de grupo «web_or_sitio web», solo puede seleccionar uno de esos elementos en el formulario en vivo. Y, debido a que elegimos la opción «próximos pasos automáticos» en nuestra configuración general, una vez que el usuario selecciona uno de los elementos de la lista en el grupo, lo llevará automáticamente al siguiente paso.
Con el Tipo de imagen seleccionado, tenemos la opción de cargar una imagen personalizada para que sirva como elemento de nuestra lista. Esta es una gran oportunidad para agregar una de nuestras imágenes proporcionadas en el diseño de la agencia web. Para hacer eso, simplemente haga clic en cargar imagen y agregue la nueva imagen de su biblioteca de medios.
La opción de imagen de tinte le permite agregar una superposición de color a todas sus imágenes para que coincidan con el conjunto de colores principal en la configuración general del formulario. Si desea mantener el color original de la imagen, cambie esta opción a «No».
Aquí también puede agregar un valor de precio a este artículo. Cuando se selecciona, el valor del precio se agregará al formulario. En este caso, no queremos añadir un precio a esta selección porque solo estamos aclarando si quieren o no un sitio web.
Clic en Guardar
El paso de características
Regrese al administrador de pasos y busque el paso «características». Este paso contiene la lista de elementos que un usuario seleccionará para calcular el costo de todas las funciones que necesitará para su nuevo sitio. Pase el cursor sobre él y haga clic en editar.
Observe las funciones enumeradas en Lista de elementos. Aquí es donde agregaría todas las diferentes características que le gustaría ofrecer y luego asignaría precios a cada una. Los elementos de la lista de ejemplo aquí son todos los tipos de imágenes como los elementos anteriores en el primer paso. Fíjate que no son parte del mismo grupo como los anteriores. Esto permite al usuario seleccionar cualquier cantidad de opciones antes de hacer clic para ir al siguiente paso.
Haga clic para editar el primer elemento de la lista con el Título Analytics .
Observe que se le ha asignado un precio de «150». Esto le indicará al formulario que agregue eso al valor del precio total cada vez que se seleccione este artículo específico.
Si hace clic para editar los otros tres elementos, verá que cada uno tiene un precio asignado, de modo que si hace clic en más de una característica/elemento en este paso, cada valor de precio adicional también se agregará al precio total. .
Vinculación de los pasos
Vuelva al Administrador de pasos y observe que el primer paso está vinculado al paso Funciones. Para vincular un paso a otro paso, coloque el cursor sobre el paso, haga clic en el icono del vínculo y luego haga clic en el paso que desea conectar. Cada enlace se puede filtrar con cierta lógica condicional, lo que permite llevar a los usuarios a pasos específicos en función de su selección de ciertos elementos.
Veamos las condiciones de enlace que vinculan nuestro primer paso con nuestro paso de funciones. Haga clic en el icono de enlace en la línea que conecta los dos pasos. Tenga en cuenta que solo se ha agregado una condición. Esta condición le indica al formulario que traiga al usuario al
paso Funciones si el elemento «Sitio web» está seleccionado en el primer paso.
Edite los pasos según sea necesario para su propio uso
Deberá seguir y personalizar todos los pasos y funciones heredados con el formulario de ejemplo que estamos usando para satisfacer sus propias necesidades. Duplicar este formulario era solo una forma de hacer que la pelota rodara un poco más rápido.
Agregar el formulario de estimación de costos a la página de servicios
Hay tres formas de publicar el formulario en su sitio web. Puede incrustar el formulario dentro de una página. Puede incrustar una versión de pantalla completa del formulario que ocupará una página completa. O puede usar el formulario como una ventana emergente al hacer clic en un enlace o botón en una página. Las tres formas requieren el uso de códigos cortos.
Para este ejemplo, le mostraré cómo insertar el formulario dentro de una nueva sección en la página Servicios del diseño de la agencia web.
Toma el código corto
Primero, necesitamos agarrar el shortcode. Desde el editor de formularios, haga clic en el botón gris Shortcode en la parte superior de la página y copie el shortcode que integrará el formulario en una página.
Agregar código abreviado a la página de servicios como una nueva sección
Ahora que tiene su código abreviado, asegúrese de guardar la configuración de su formulario y vaya a su página de Servicios. Implemente Visual Builder y desplácese hasta la parte inferior de la página. Borra la sección que contiene el formulario de contacto.
Luego agregue una nueva sección regular con un diseño de una columna y agregue un módulo de texto a la fila.
En la configuración del módulo de texto, incruste el código abreviado en el cuadro de contenido.
Ahora actualice la configuración de H2 en la pestaña Diseño a lo siguiente:
- Título 2 Fuente: Montserrat
- Título 2 Estilo de fuente: TT (mayúsculas)
Eso es todo.
Ahora tiene un formulario de estimación de costos de gran apariencia en su página web. Y el color y la fuente coinciden con el diseño de su sitio.
¡Nada mal!
No te olvides del diseñador de formularios
Aunque no cubrí el diseñador de formularios en este tutorial, es una característica útil que le permite personalizar/diseñar cada elemento de su formulario. Es básicamente la versión del complemento de un constructor visual. Puede seleccionar ciertos elementos del formulario y luego modificar el diseño de ese elemento específico. Un aspecto único de este diseñador de formularios es la capacidad de cambiar el estilo de un elemento en función de su estado (predeterminado, pasar el mouse por encima o enfocar). Incluso puede probar cómo se verá su formulario en dispositivos móviles como el constructor visual de Divi.
Puede acceder al diseñador de formularios en cualquier momento haciendo clic en el botón en la parte superior del editor de formularios.
Pensamientos finales
Tener un formulario de estimación de costos como agencia web puede ser una excelente manera de aumentar las conversiones. Y es fácil de crear con el complemento de formulario de pago y estimación de costos de WP. Muchos otros complementos de formulario principal también permiten el uso de operaciones matemáticas y el procesamiento de pagos. La amplia gama de opciones disponibles le permitirá crear el formulario perfecto para su sitio. Y con solo unos pocos ajustes, el diseño general puede coincidir perfectamente con el diseño de la agencia web.
Espero que encuentre útil este formulario de estimación de costos para su propio sitio.
¡Salud!