¿Se pregunta cómo eliminar el botón de envío de los formularios de cálculo para mejorar la experiencia del usuario?
Al eliminar el botón de envío de los formularios de cálculo creados por WPForms, puede proporcionar cálculos instantáneos a sus visitantes.
En esta guía, aprenderá los sencillos pasos para modificar sus formularios para realizar cálculos en tiempo real sin necesidad de enviar el formulario.
Cómo eliminar el botón Enviar de los formularios de cálculo
Eliminar el botón de envío de los formularios de cálculo con WPForms es increíblemente fácil. Todo lo que necesitas hacer es seguir estos sencillos pasos a continuación:
En este artículo
Requisitos previos
Antes de proceder con los pasos para deshabilitar el botón de enviar, asegurémonos de que hemos completado algunos pasos importantes.
Si ya ha completado estos pasos, no dude en pasar a la sección sobre la eliminación del botón de envío.
1. Tener una licencia WPForms Pro
WPForms es un reputado plugin constructor de formularios y calculadora que permite a los usuarios crear una amplia gama de formularios, incluyendo una calculadora de días entre fechas.
Es importante que tenga instalada la última versión de WPForms, junto con el acceso a la licencia Pro.
La versión Pro le proporciona acceso a integraciones premium, complementos y muchas funciones valiosas como lógica condicional, informes de envío de formularios, etc.
2. Uso del complemento de cálculos
Para crear calculadoras personalizadas en WordPress, probablemente ya sepa que necesita tener instalado el complemento WPForms Calculations Addon.
Puede utilizar este complemento para insertar operadores lógicos y sentencias if-then para crear presupuestos personalizados o construir calculadoras inteligentes.
Incluso permite utilizar funciones matemáticas integradas para redondear números, calcular intervalos de tiempo, hallar promedios y mucho más.
3. Selección de una plantilla de formulario de calculadora
Por último, necesitas tener un formulario listo. Si necesitas crear uno, WPForms ofrece más de 2.000 plantillas prediseñadas que facilitan la creación de formularios.
Entre ellas se incluyen plantillas de formularios de calculadora diseñadas por profesionales que pueden personalizarse para adaptarse a una gran variedad de casos de uso e industrias, como:
- Plantilla de formulario de calculadora de hipotecas: perfecta para agencias inmobiliarias, ya que permite a los posibles compradores calcular la hipoteca y sus pagos mensuales sin esfuerzo.
- Plantilla de formulario de calculadora de gastos de envío: ayuda a los sitios de comercio electrónico a ahorrar tiempo y esfuerzo proporcionando a los clientes una sencilla calculadora de gastos de envío.
- BMI Calculator Form Template - ideal para sitios web dedicados a la aptitud física o la salud que ayuda a los usuarios en la evaluación de su estado actual de salud.
- ROI Calculator Form Template -ayuda a empresas y profesionales del marketing a evaluar eficazmente la rentabilidad de sus campañas o proyectos.
Lo mejor de todo: puedes utilizar el complemento de cálculos para crear calculadoras personalizadas sin necesidad de HTML, javascript o conocimientos complejos de codificación.
Eliminar el botón Enviar
Una vez cumplidos estos requisitos, ya puede modificar su formulario para eliminar el botón de envío y mejorar la experiencia del usuario.
1. Ir a la Biblioteca de Snippet WPForms
Desde su panel de WordPress, simplemente vaya a WPForms " Herramientas. A continuación, vaya a la pestaña Fragmentos de código.
Esto mostrará un mensaje emergente que dice: "Por favor, instale WPCode para utilizar la biblioteca de fragmentos WPForms".
2. Instalar + Activar WPCode
Todo lo que tienes que hacer ahora es pulsar el botón Instalar + Activar WPCode. El plugin tardará unos segundos en instalarse.
Una vez instalado el plugin WPCode, podrás acceder a la lista completa de snippets de WPForms.
3. Utilice el fragmento de botón Ocultar envío
Ahora, busque el fragmento de código del botón ocultar envío escribiendo su nombre en el campo Buscar fragmentos de código. A continuación, haga clic en el botón Instalar fragmento .
Este es el fragmento de código que vamos a importar:
Esto le redirigirá a la página de vista previa del fragmento de código WPCode, donde podrá ver el código integrado automáticamente.
Ahora, todo lo que tiene que hacer es activar el fragmento de código. Para ello, mueva el conmutador de Inactivo a Activo.
El siguiente paso para activar el fragmento de código en todo el sitio es pulsar el botón Actualizar, justo al lado de la opción Activo.
Siguiendo este enfoque, sólo tendrá que añadir el fragmento una vez a través de la biblioteca de fragmentos WPForms.
A continuación, para cada formulario en el que el usuario desee utilizar este fragmento, deberá añadir el nombre de la clase CSS del botón Enviar dentro del constructor.
4. Añadir clase CSS del botón Enviar
Ahora, todo lo que queda por hacer es añadir la clase CSS en el constructor de formularios de la calculadora de la que quieres eliminar el botón de envío.
Para ello, abra el formulario de la calculadora, vaya a la pestaña General y desplácese hasta la pestaña Avanzado.
A continuación, pegue el archivo wpf-calc-form CSS en el Clase CSS del botón Enviar para activar el fragmento de código.
Ahora puede previsualizar su formulario para comprobar que el botón de envío de la calculadora se ha eliminado correctamente.
Más preguntas sobre Formularios de cálculo
Los formularios de cálculo son un tema muy popular entre nuestros lectores. Aquí tienes respuestas a algunas preguntas frecuentes sobre ellos.
Para desactivar el botón de enviar en un formulario, especialmente si está usando WPForms Pro, puede aplicar CSS personalizado. Vaya a WPForms " Herramientas. A continuación, vaya a la pestaña Fragmentos de código y acceda a la biblioteca de fragmentos de WPForms, que contiene una solución para desactivar el botón de envío en un formulario.
Sí, un formulario puede funcionar sin un botón de envío. Esto es común en formularios que auto-envían o usan métodos alternativos para la captura de datos. Con WPForms Pro, puede crear este tipo de formularios mediante la personalización con CSS para ocultar el botón de envío, utilizando la integración WPCode para agregar el código necesario sin problemas.
A continuación, aprenda a crear una calculadora en línea personalizada
Añadir una calculadora a tu sitio web puede aumentar la participación de los visitantes, animándoles a quedarse y a obtener respuestas a sus problemas. Echa un vistazo a esta guía sobre cómo hacer una calculadora personalizada en WordPress para las necesidades únicas de su sitio web.
Crear una calculadora en línea personalizada
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin más sencillo para crear formularios en WordPress. WPForms Pro incluye un montón de plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.
Si este artículo te ha ayudado, síguenos en Facebook y Twitter para más tutoriales y guías gratuitas sobre WordPress.
Este CSS no detiene el envío del formulario cuando se utiliza el botón Intro en uno de los campos de texto utilizados dentro de un formulario de calculadora.
Hola Dean,
Tienes razón: este fragmento de CSS sólo oculta el botón de envío, pero no impide que el formulario se envíe cuando se pulsa la tecla Intro en un campo de texto.
Si también desea desactivar la tecla Intro, le recomendamos que utilice el fragmento de código proporcionado en nuestra documentación para desarrolladores aquí: Cómo evitar que la tecla Intro envíe el formulario.
Espero que le sirva de ayuda.