Una de las formas de optimizar tu tiempo y ofrecer a tus posibles clientes una respuesta inmediata sobre algún producto o servicio que ofrezcas es a través de los presupuestos en linea. En este tutorial te vamos a explicar como crear presupuestos con WordPress, Elementor pro y Piotnet addons for Elementor.
Índice de contenidos
Que plugins necesitamos
Para llevar a cabo la tarea de crear un presupuesto on line necesitaremos Elementor Pro y Piotnet addons for Elementor.
Podeís descargar los plugins desde estos enlaces:
Recuerda habilitar los widgets desde piotnet addons.
Cómo funciona el formulario del presupuesto
Si ya leisteis nuestro post sobre cómo crear un formulario multipasos con Elementor y Piotnet addons for Elementor no os costará entender cómo se crea un formulario para crear un presupuesto on line.
Aún así vamos a dar un repasillo para los nuevos.
Basicamente todos los campos del formulario deben tener una ID única y todos los campos del formulario se deben asociar a un formulario, en la que el identificador será el mismo para todos los campos
Creando ID de campos y de formulario
Antes de entrar en materia comentar que nos centraremos en explicar los campos de los cálculos y de las opciones para el presupuesto. Tampoco entraremos en detalle del aspecto visual.
Todos los campos del formulario, ya sean para recoger información personal, de consulta sobre las opciones del formulario del presupuesto o para hacer los cálculos lo realizaremos a través del widget FIELD.
Una vez añadimos el widget al contenido, en la columna de la izquierda nos aparecerán las ID de formulario y ID de campo. Recuerda lo que hemos comentado en el paso anterior, ID genérico para el formulario y ID único para el campo.
Debajo de la ID del campo veras que de forma automática verás que se te crea un shortcode. Este shortcodes y el de todos los campos son los que utilizaremos para hacer los cálculos.
Tipos de campos de selección
Desde el selector type podremos definir con qué tipo de campo de selección queremos trabajar. Las opciones que nos ofrece son:
- Radio
- Select
- Image select
- Check box
- Numbers, que no es un campo de selección pero que nos permitirá ofrecer la opción de definir las cantidades.
Todas las opciones de selección se definen en el options y definiremos cada una de las variables en una línea y con esta estructura: Opcion 1 $10|10.
Es decir, si queremos que nuestro campo de selección tenga 4 opciones definiremos:
Opcion 1 $10|10.
Opcion 2 $20|20.
Opcion 3 $20|20.
Opcion 4 $20|20.
A parte de las opciones, si nuestro campo es un Image select definiremos las imágenes desde la opción add images.
Por último habilitaremos la opción Send data by label.
Definendo el campo para los calculos
Para definir el campo que va a realizar los cálculos lo único que debemos realizar diferente es definir el tipo de campo. Para ello desde el selector type definiremos el campo con calculated fields y en la opción calculated realizaremos las operaciones matemáticas utilizando los shortcodes que se crean al definir las ID de los campos. Dichos shortcodes los podremos encontrar en cada uno de los campos del formulario.
Pongamos varios ejemplos.
Necesitamos realizar la suma de 2 campos: [field id=»campo_1″]+ [field id=»campo_2″]
Necesitamos multiplicar 2 campos: [field id=»campo_1″]* [field id=»campo_2″]
Necesitamos sacar el IVA de un total: [field id=»total_presupuesto»]*21/100
Publicamos y ya tenemos nuestro formulario para crear presupuesto en on line.
Piotnet addons también permite crear formularios multipasos, si tienes interés en averiguar cómo hacerlo clica aquí.
También puedes dar un repaso a todo lo que hemos explicado en el siguiente vídeo.
