Forms

¿Cómo puedo cambiar el color de un botón de envío de formulario?

Última actualización: February 5, 2016

Para los formularios en páginas de destino del COS

  • Navega hasta Contenido > Páginas de destino.
  • Encuentra y edita la página de destino en cuestión.
  • Haz clic en la pestaña Estilo del formulario.
  • Elige Botón del formulario en el menú desplegable para diseñar el botón de envío.
Imagen añadida por el usuario
Guarda y actualiza la página de destino.

Para los formularios incrustados en páginas externas

Modifica el código de incrustación:

  • Agrega una clase CSS personalizada al código de incrustación del formulario.
  • Esto puede realizarse al agregar el atributo «submitButtonClass».
  • Código de ejemplo:
  • <!--[if lte IE 8]>
    <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
    <![endif]-->
    <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
    <script>
    hbspt.forms.create({
    portalId: '118xxx',
    formId: '41tgif309-ok74-xxxx-xxxx-xxxxxxxxxx',
    submitButtonClass: 'my-awesome-submit-button'
    });
    </script>
  • Esto eliminará el estilo predeterminado del botón de envío del formulario.
    • Luego, debes agregar CSS al encabezado de la página o una hoja de estilo.
      • .my-awesome-submit-button {background-color:red; padding:10px;}

Como alternativa, puedes deshabilitar el estilo predeterminado de HubSpot y usar un selector de CSS en tu hoja de estilo sin modificar el código de incrustación:

  • Por ejemplo, input[type="submit"]{ background: #ff0000; }
  • Esto hará que el botón sea rojo.

Consulta nuestra documentación de desarrolladores para obtener más información sobre cómo personalizar el código de incrustación. Artículos relacionados: