Resumen de IA
¿Te preguntas cómo eliminar el botón de envío de los formularios de cálculo para una mejor experiencia de usuario?
Para una estimación de hipoteca o una cotización de envío, la gente quiere que el número se actualice mientras escribe, no que haga clic en un botón y espere a que la página se recargue.
Al eliminar el botón de envío de los formularios de cálculo creados por WPForms, puedes proporcionar cálculos instantáneos a tus visitantes.
En esta guía, aprenderás los sencillos pasos para modificar tus formularios y lograr cálculos en tiempo real sin necesidad de una acción de envío de formulario.
Crea tu formulario de calculadora ahora
¿Por qué eliminar el botón de envío de un formulario de cálculo?
La mayoría de los formularios necesitan un botón de envío porque envían datos a algún lugar, como una solicitud de contacto o un pedido, pero un formulario de calculadora funciona de manera diferente.
Tu visitante no te envía nada, solo quiere una respuesta, como el pago mensual de una hipoteca o un coste de envío. Cuando el complemento Calculations actualiza el total en tiempo real mientras las personas escriben, el botón de envío no tiene nada más que hacer.
Incluso puede confundir a los visitantes haciéndoles pensar que tienen que hacer clic en él para ver su resultado. Ocultarlo hace que el formulario se comporte como una calculadora real, donde la cifra simplemente aparece y se actualiza por sí sola.
Por lo tanto, si tu formulario existe para mostrar un número en vivo en lugar de recopilar un envío, eliminar el botón de envío suele ser la decisión correcta.
Cómo eliminar el botón de envío 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:
Los Prerrequisitos
Antes de continuar con los pasos para deshabilitar el botón de envío, asegúrate de haber completado algunos pasos importantes.
Si ya has completado estos pasos, siéntete libre de saltar a la sección sobre eliminar el botón de envío.
1. Tener una licencia de WPForms Pro
WPForms es un reputado creador de formularios y complemento de cálculo que permite a los usuarios crear una amplia gama de formularios, incluido un calculador de días entre fechas.
Es importante que tengas instalada la última versión de WPForms, junto con acceso a la licencia Pro.
La versión Pro te da acceso a integraciones premium, complementos y muchas características valiosas como lógica condicional, informes de envío de formularios, etc.
2. Usar el complemento de Cálculos
Para crear calculadoras personalizadas en WordPress, probablemente ya sepas que necesitas tener instalado el complemento de Cálculos de WPForms.
Puedes usar este complemento para insertar operadores lógicos y declaraciones condicionales para crear presupuestos personalizados o construir calculadoras inteligentes.
Incluso te permite utilizar funciones matemáticas integradas para redondear números, calcular rangos de tiempo, encontrar promedios y más.
3. Seleccionar una plantilla de formulario de calculadora
Finalmente, necesitas tener un formulario listo. Si necesitas crear uno, WPForms ofrece más de 2100 plantillas prediseñadas que facilitan la creación de formularios.
Estas incluyen plantillas de formularios de cálculo diseñadas profesionalmente que se pueden personalizar para adaptarse a una variedad de casos de uso e industrias, como:
- Plantilla de formulario de calculadora de hipotecas: perfecta para agencias inmobiliarias, ya que permite a los compradores potenciales calcular la hipoteca y sus pagos mensuales sin esfuerzo.
- Plantilla de formulario de calculadora de costos de envío: ayuda a los sitios de comercio electrónico a ahorrar tiempo y esfuerzo al proporcionar una calculadora de envío sencilla para los clientes.
- Plantilla de formulario de calculadora de IMC: ideal para sitios web dedicados al estado físico o la salud que ayudan a los usuarios a evaluar su estado de salud actual.
- Plantilla de formulario de calculadora de ROI: ayuda a las empresas y a los especialistas en marketing a evaluar de manera eficiente la rentabilidad de sus campañas o proyectos.
La mejor parte de todo: puedes usar el complemento de cálculos para crear calculadoras personalizadas sin necesidad de conocimientos de HTML, JavaScript o codificación compleja.
Obtén WPForms Pro para crear tu calculadora
Eliminar el botón de envío
Una vez que se cumplen estos requisitos previos, ya está todo listo para modificar su formulario y eliminar el botón de envío para una mejor experiencia de usuario.
1. Ve a la Biblioteca de fragmentos de WPForms
Desde su panel de WordPress, simplemente vaya a WPForms » Herramientas. Luego, navegue a la pestaña Fragmentos de código.
Esto mostrará un mensaje emergente que dice: “Por favor, instale WPCode para usar la biblioteca de fragmentos de WPForms”.
2. Instala y activa WPCode
Todo lo que tiene que hacer ahora es hacer clic en el botón Instalar + Activar WPCode. El plugin se instalará en unos segundos.
Una vez instalado el plugin WPCode, podrá acceder a la lista completa de fragmentos de WPForms.
3. Usa el fragmento Ocultar botón de envío
Ahora, busque el fragmento para ocultar el botón de envío escribiendo su nombre en el campo Buscar fragmentos. A continuación, haga clic en el botón Instalar fragmento.
Aquí está el fragmento de código que vamos a importar:
Esto le redirigirá a la página de vista previa del fragmento de WPCode, donde podrá ver el código integrado automáticamente.
Ahora, todo lo que tiene que hacer es habilitar el código del fragmento. Para ello, mueva el interruptor 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 de interruptor Activo.
Siguiendo este enfoque, solo necesitará añadir el fragmento una vez a través de la biblioteca de fragmentos de WPForms.
Luego, para cada formulario en el que el usuario quiera usar este fragmento, deberá añadir el nombre de la Clase CSS del Botón de Envío dentro del constructor.
4. Añade una clase CSS al botón de envío
Ahora, todo lo que queda por hacer es añadir la clase CSS en el constructor del formulario de la calculadora del que desea eliminar el botón de envío.
Para ello, abra su formulario de calculadora y navegue a la pestaña General, luego desplácese hasta la pestaña Avanzado.
Después de eso, pegue el CSS wpf-calc-form en la Clase CSS del Botón de Envío para activar el fragmento de código.
¡Ahora puede previsualizar su formulario para ver que el botón de envío de su calculadora se ha eliminado con éxito!
Cómo evitar que la tecla Intro envíe el formulario
Incluso sin un botón de envío visible, un formulario aún puede enviarse cuando alguien presiona la tecla Intro dentro de un campo de texto. En una calculadora que está diseñada para mostrar un resultado en tiempo real, ese no es el comportamiento que deseas.
La solución es un segundo fragmento que evita que la tecla Intro active un envío. El código exacto se encuentra en nuestra documentación para desarrolladores, por lo que puedes seguir la guía sobre cómo evitar que la tecla Intro envíe el formulario y añadirlo de la misma manera que añadiste el primero.
Con ambos fragmentos activos, tu calculadora muestra su total al instante y permanece en su lugar, sin botón y sin envíos accidentales.
Preguntas frecuentes sobre formularios de calculadora
Los formularios de calculadora surgen con frecuencia entre nuestros lectores. Aquí tienes respuestas a algunas de las preguntas más comunes sobre la eliminación del botón de envío y el trabajo con formularios de calculadora en WordPress.
¿Cómo desactivo el botón de envío en un formulario?
Para desactivar el botón de envío en WPForms Pro, lo ocultas con CSS personalizado. Ve a WPForms » Herramientas, abre la pestaña Fragmentos de código para acceder a la Biblioteca de fragmentos de WPForms e instala el fragmento para ocultar el botón de envío. Luego, añade la clase wpf-calc-form al campo Clase CSS del botón de envío de tu formulario.
¿Puede un formulario no tener botón de envío?
Sí. Un formulario puede funcionar sin un botón de envío, lo cual es común para calculadoras que muestran un resultado al instante o formularios que se envían automáticamente. En WPForms Pro, ocultas el botón con un poco de CSS añadido a través de la integración WPCode incorporada, por lo que no se necesita nada adicional.
¿Ocultar el botón de envío evita que el formulario se envíe?
No, ocultar el botón por sí solo no detiene los envíos. El formulario aún puede enviarse si un visitante presiona la tecla Intro mientras está en un campo de texto. Para evitarlo, añade un segundo fragmento que evite que la tecla Intro envíe, utilizando la guía para desarrolladores enlazada anteriormente.
¿Puedo eliminar el botón de envío de un solo formulario de calculadora?
Sí. El fragmento solo tiene efecto en los formularios donde has añadido la clase wpf-calc-form al campo Clase CSS del botón de envío. Deja ese campo vacío en tus otros formularios y sus botones de envío permanecerán exactamente como están.
A continuación, aprenda cómo crear una calculadora en línea personalizada
Una calculadora es una de las mejores maneras de mantener a los visitantes en tu sitio, ya que les da una razón para quedarse y obtener una respuesta a una pregunta real.
Si quieres construir una desde cero, echa un vistazo a nuestra guía sobre cómo hacer una calculadora personalizada en WordPress y configúrala para lo que necesite tu sitio.
Crea tu formulario de calculadora ahora
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin de creación de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.
Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.
Este CSS no impide que el formulario se envíe cuando se utiliza la tecla Intro en uno de los campos de texto dentro de un formulario de calculadora.
Hola Dean:
Tienes razón: este fragmento de CSS solo oculta el botón de envío, pero no evita que el formulario se envíe cuando se presiona la tecla Intro en un campo de texto.
Si deseas deshabilitar también la tecla Intro, te recomendamos usar 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 esto ayude!