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?
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.
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:
En este artículo
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.
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!
Más preguntas sobre formularios de cálculo
Los formularios de calculadora son un tema popular entre nuestros lectores. Aquí tiene respuestas a algunas preguntas frecuentes sobre ellos.
Para desactivar el botón de envío en un formulario, especialmente si está utilizando WPForms Pro, puede aplicar CSS personalizado. Vaya a WPForms » Herramientas. Luego, navegue 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 se envían automáticamente o utilizan métodos alternativos para la captura de datos. Con WPForms Pro, puede crear dichos formularios personalizándolos con CSS para ocultar el botón de envío, utilizando la integración de WPCode para añadir el código necesario sin problemas.
A continuación, aprenda cómo crear una calculadora en línea personalizada
Añadir una calculadora a su sitio web puede aumentar la participación al animar a los visitantes a quedarse y obtener respuestas a sus problemas. Consulte esta guía sobre cómo crear una calculadora personalizada en WordPress para las necesidades únicas de su sitio web.
Crear una calculadora online personalizada
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin constructor 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!