Cómo agregar una calculadora de costos a su sitio web de WordPress

Si alguna vez usó una calculadora de préstamos o un estimador de precios, es posible que se haya preguntado si hay una manera de agregar una calculadora de costos a su sitio de WordPress. Lo hay, y es muy fácil.

Claro, puede aprender algo de JavaScript y sacar una calculadora decente en unos pocos meses, o puede ahorrar mucho tiempo y dolores de cabeza usando un complemento. Por eso amamos WordPress, ¿verdad?

Quédate y te mostraré cómo se hace.

Una calculadora de costos versátil para WordPress

Cuando usa una calculadora de préstamos en un sitio de hipotecas, puede parecer que hay un código complejo detrás. Y es posible que haya imaginado que está fuera del alcance de su sitio. Contratar a un desarrollador para implementar un formulario como ese puede estar fuera de su presupuesto.

Entonces, ¿qué pasa si necesitas cambiar algo en la calculadora? Tendrás que traer de vuelta al desarrollador para que lo arregle por ti. Eso sería un dolor y posiblemente fuera de su alcance financiero.

Afortunadamente, un complemento de WordPress le permitirá manejar todo esto usted mismo, sin necesidad de código.

Cost Calculator le permite crear cualquier tipo de formulario de calculadora que necesite, y se verá genial para arrancar.

Primeros pasos con la calculadora de costos

Si bien el complemento Cost Calculator es fácil de usar, lo guiaré a través de las funciones y le mostraré un ejemplo que puede inspirar sus propios formularios. Primero, obtengamos el complemento.

Calculadora de costos de instalación

Puede encontrar la Calculadora de costos buscando en su tablero de WordPress en Complementos > Agregar nuevo o descárguelo en WordPress.org. Además, puede comprar la versión Pro, que presenta opciones como Desplegable de imágenes, Carga de archivos y más.

Crear calculadoras

Una vez que se active el complemento, verá que aparece el ícono de la Calculadora de costos en el menú del panel de control de WordPress. Haga clic en eso para acceder al menú Calculadora de costos.

Inicialmente, no hay formularios en la lista. Para comenzar, simplemente haga clic en Crear nuevo en la parte superior derecha. Sin embargo, dado que es nuevo en el uso del complemento, le recomiendo que pruebe la opción Importar calculadoras . En el menú que se abre, elija Ejecutar importación de demostración predeterminada . Eso llenará su lista con algunas calculadoras de muestra proporcionadas por los autores del complemento.

Antes de crear su primera calculadora, es útil profundizar en los ejemplos de demostración proporcionados. Esto le dará una idea de los menús y de cómo está estructurada una calculadora. Elija una calculadora y, en la pestaña Acción , haga clic en el icono del lápiz para acceder al modo de edición.

Edición de calculadoras

Para este ejemplo, usemos la calculadora de fotografía. Vaya al modo de edición, desplácese hasta la parte inferior y haga clic en Vista previa . Esto le muestra lo que puede esperar cuando se muestra la calculadora. Este ayuda a los clientes potenciales de fotografía a calcular el costo al elegir entre diferentes paquetes.

Volvamos al menú de edición y vayamos a la pestaña Calculadora .

A la derecha están todos los elementos disponibles para usar en nuestra calculadora. En este ejemplo, a la izquierda, podemos ver que han usado los elementos Desplegable, Cantidad y Total. Podemos editar cualquiera de estos pasando el cursor sobre ellos, donde aparecerá un botón de edición.

El primer elemento es un menú desplegable denominado Servicios. Dentro, podemos ver los campos Nombre y Descripción en la parte superior. Si nos desplazamos más hacia abajo, podemos especificar más opciones para el menú desplegable.

Esta calculadora totaliza el costo de los servicios de fotografía. Podemos configurar todo eso en este menú desplegable, incluido el precio.

El siguiente elemento, Horas , es un elemento Cantidad. Para esto, solo necesitamos definir la Unidad de cantidad para que el cálculo funcione. Dado que estamos calculando el tiempo, no necesitamos cambiar ninguna configuración de moneda. Si bien el valor predeterminado no es obligatorio, puede ayudar a guiar a los visitantes hacia una opción que podría preferir.

El elemento Total es donde se realizará el cálculo. En el campo Fórmula de la calculadora, podemos ver lo que parece un código complicado. Realmente no lo es. Si elimina todo en ese campo, puede volver a crearlo fácilmente. En Campos disponibles, verá que solo tenemos dos campos que podemos usar en la fórmula. Haga clic en el primero y aparecerá en el campo Fórmula. Luego necesitamos un Operador, así que haga clic en el asterisco a continuación para indicar que queremos multiplicar los dos valores de campo. Haga clic en la otra opción Campo disponible y su fórmula estará completa.

Ahora que vemos cómo está configurada la calculadora, veamos las condiciones, la configuración y la personalización.

Condiciones

Es posible que no necesite la función Condiciones para todos los formularios, pero cuando la necesita, es una función fantástica. El sistema Condicional le permite vincular diferentes campos y agregarles condiciones. Puede mostrar, ocultar o deshabilitar campos específicos en función de si se cumple o no una condición. Por ejemplo, si tiene una calculadora de préstamos, puede configurar la tasa de interés para que aparezca solo cuando el usuario ingresa un monto de préstamo específico.

Ajustes

El menú de configuración de la Calculadora de costos es donde ajustará la configuración de su moneda o configurará cualquier integración de pasarela de pago.

La mayoría de las configuraciones son intuitivas aquí, pero cubriré algunas importantes.

Si tiene una tienda WooCommerce, la Calculadora de costos se integra con ella. Esta es una función útil que puede aumentar su tasa de conversión cuando se implementa. Por ejemplo, puede configurar un formulario de tarifas para que cuando los usuarios hagan clic en el botón Enviar, sean dirigidos directamente a su página de pago de Woo. También puede agregar un botón Agregar al carrito a su formulario.

Enviar formulario le permite agregar un formulario de envío mediante la integración con el complemento Contact 7. Una vez que un usuario haga clic en Enviar en el formulario de la calculadora, tendrá la opción de enviar los resultados del formulario por correo electrónico.

Si no desea que una legión de robots de spam le envíe formularios basura, puede incluir un botón ReCaptcha. Primero deberá configurarlo a través de Google, pero estará listo para comenzar una vez que tenga la clave del sitio y la clave secreta.

personalizar

El menú Personalizar es literalmente la guinda del pastel de la calculadora. Puede cambiar casi cualquier aspecto del diseño en sus formularios usando controles deslizantes simples y selectores de color.

Agregue bordes a los cuadros, cambie el color y el tamaño de la fuente, o incluso cree su propio color de fondo degradado. El menú de personalización facilita el estilo de sus formularios para que se ajusten a la marca de su sitio.

Incluya una calculadora de costos atractiva en su sitio web

Si necesita una forma de agregar un formulario de calculadora a su sitio, el complemento Cost Calculator no solo es sencillo, sino que es divertido de usar. Sin contratar a un desarrollador ni escribir ningún código, puede crear formularios atractivos para su sitio de WordPress en solo unos minutos.

Precios

Cost Calculator es gratis para instalar y usar. La versión Pro contiene funciones como pasarela de pago, pago de WooCommerce, condiciones, carga de archivos y un selector de fecha. El precio comienza en $29.99 por una sola licencia anual.