¿Quieres que tu formulario destaque en tu sitio web añadiéndole un borde personalizado? Con un simple fragmento de código, puedes añadir un elegante borde alrededor de tu formulario para mejorar su atractivo visual y hacerlo más prominente en tu página.
Esta guía le mostrará cómo agregar y personalizar un borde alrededor de sus WPForms.
Configuración del formulario
Para empezar, tendrá que identificar el ID de su formulario. Esto es esencial ya que el código se dirigirá a un formulario específico utilizando este ID. Si necesitas ayuda para encontrar el ID de tu formulario, consulta nuestra guía para encontrar IDs de formularios y campos.
Añadir el código de frontera
A continuación, tendrás que añadir el fragmento de código que creará el borde alrededor de tu formulario. Si necesitas ayuda para añadir fragmentos de código a tu sitio, consulta este tutorial sobre cómo añadir CSS personalizado.
El código anterior añade un borde a su formulario con un poco de estilo adicional para un mejor atractivo visual. Esto es lo que hace cada línea:
- En la línea 2, sustituya 1234 por su número de identificación real.
- En la línea 3, puede modificar el ancho del borde (2px), el estilo (sólido) y el color (#333333).
- En la línea 4, el relleno crea espacio entre los elementos del formulario y el borde.
- En la línea 5, border-radius añade esquinas redondeadas a tu formulario.
- En la línea 6, background-color establece un fondo blanco para su formulario.
- En la línea 7, box-shadow añade un sutil efecto de sombra alrededor de tu formulario.
Si desea aplicar este mismo CSS a todos sus formularios, utilice este CSS en su lugar.
¡Y eso es todo lo que necesitas para colocar un borde alrededor de tu formulario! ¿Le gustaría también centrar sus formularios? Echa un vistazo a nuestro tutorial sobre Cómo centrar un formulario.