viernes, abril 19, 2024
No menu items!
InicioBlogs6 hermosos dise√Īos de formularios de contacto que puedes robar (ejemplos de...

6 hermosos dise√Īos de formularios de contacto que puedes robar (ejemplos de CSS)

¬ŅBusca inspiraci√≥n para el dise√Īo de formularios web para su sitio web?

Con algunos ajustes simples, puede crear formularios en l√≠nea con el estilo que desee. En este art√≠culo, le mostraremos algunos ejemplos interesantes de dise√Īo de formularios de contacto junto con fragmentos de c√≥digo CSS √ļtiles para que pueda usarlos en su propio sitio web.

Si prefiere no tener que editar el c√≥digo CSS, consulte nuestra gu√≠a sobre c√≥mo dise√Īar sus formularios con el complemento CSS Hero (no se requiere codificaci√≥n).

C√≥mo personalizar los dise√Īos de sus formularios de contacto

Antes de comenzar, aseg√ļrese de instalar WPForms en su sitio. Aseg√ļrese de crear al menos un formulario en su sitio para que pueda ver y probar los cambios en vivo utilizando el panel de personalizaci√≥n del tema. Para crear un formulario de contacto, vea nuestro tutorial sobre c√≥mo crear un formulario de contacto simple.

Con WPForms, puede personalizar los estilos de todos los formularios en su sitio o puede dise√Īar cada uno individualmente.

Método 1: personalización en todo el sitio

Personalizar el estilo es bastante f√°cil una vez que tiene los fragmentos de CSS que desea usar. Todo lo que necesita hacer es copiar los fragmentos de CSS m√°s apropiados para su sitio y pegarlos en su secci√≥n de CSS adicional en el panel de personalizaci√≥n navegando a Apariencia ¬ĽPersonalizar¬Ľ CSS adicional.

Entonces solo haz clic Guardar y publicar, y tu estas listo.

M√©todo 2: dise√Īar una forma individualmente

Si necesita personalizar un formulario espec√≠fico, simplemente busque el ID √ļnico de su formulario y realice la personalizaci√≥n en funci√≥n de √©l.

inspeccionar elemento

Para encontrar el ID del formulario, lleve el mouse a cualquier campo del formulario, clic derecho ¬ĽInspeccionar elemento.

Ahora la pantalla del navegador se dividirá y verá el código fuente de la página. En el código fuente, debe ubicar la línea de inicio del código del formulario.

Como puede ver en la captura de pantalla anterior, nuestro código de formulario de contacto comienza con la línea:






Usaremos esta ID en nuestro CSS para dise√Īar nuestro formulario de contacto. El atributo ID es un identificador √ļnico generado por WPForms para este formulario en particular, por lo que el estilo no se aplicar√° en ning√ļn otro lugar.

Por ejemplo, puede simplemente insertar el siguiente fragmento al principio del primer fragmento de código.

div#wpforms-14 {background-color: transparent; !important}

Para obtener m√°s detalles, puede consultar nuestra gu√≠a para principiantes sobre c√≥mo dise√Īar sus formularios con CSS.

Ahora echemos un vistazo a algunos ejemplos interesantes y el CSS de dise√Īo de formulario de contacto correspondiente para que pueda recrearlos en su sitio.

1. Pixpa

ejemplo de dise√Īo de formulario de contacto de pixpa

Usar un formulario de contacto simple es una excelente opci√≥n si desea evitar cualquier complicaci√≥n que puedan tener sus visitantes al completar su formulario. Si est√° buscando un dise√Īo de formulario de contacto simple, el formulario de contacto de Pixpa es un gran ejemplo.

Tambi√©n usan un color de contraste para su llamado a la acci√≥n que no se mezcla con el resto del dise√Īo del formulario.

Con WPForms, puede realizar una personalizaci√≥n simple en sus formularios incluso si no es un experto en CSS. Antes de guardar el c√≥digo CSS que se proporciona a continuaci√≥n en su tema, si√©ntase libre de hacer algunos ajustes simples en √©l para que encaje perfectamente en el dise√Īo de su sitio.

Dise√Īo de formulario de contacto CSS

/* Fields */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #aaa;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #aaa;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #aaa;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #aaa;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #aaa;
}
/* Button */
div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit], div.wpforms-container-full .wpforms-form .wpforms-page-button {
   background-color: #00C5BE;
   border: none;
   color: #fff;
   font-size: 1em;
   padding: 10px 50px;
   text-transform: uppercase;
   font-weight: normal;
}

2. Afobi

dise√Īo de formulario de contacto afobi

Junto con el formulario de contacto, Afobi muestra su direcci√≥n de correo electr√≥nico en su p√°gina de contacto. En la p√°gina, el formulario de contacto est√° resaltado, lo que sugiere que la mejor manera de comunicarse es completando el formulario. Tambi√©n le dieron a su formulario un aspecto √ļnico al crear un bot√≥n de env√≠o redondeado.

Si desea ofrecer un método alternativo para contactarlo, es posible que desee resaltar su formulario en su página de contacto.

También puede probar con varios colores para sus campos y asegurarse de utilizar el mejor que se vea bien en su página. Puede usar algo como la herramienta Teoría del color de Canva o ColourLovers para encontrar los colores adecuados para usar en su sitio.

Dise√Īo de formulario de contacto CSS

/* Fields */
div.wpforms-container-full .wpforms-form input[type=date], div.wpforms-container-full .wpforms-form input[type=datetime], div.wpforms-container-full .wpforms-form input[type=datetime-local], div.wpforms-container-full .wpforms-form input[type=email], div.wpforms-container-full .wpforms-form input[type=month], div.wpforms-container-full .wpforms-form input[type=number], div.wpforms-container-full .wpforms-form input[type=password], div.wpforms-container-full .wpforms-form input[type=range], div.wpforms-container-full .wpforms-form input[type=search], div.wpforms-container-full .wpforms-form input[type=tel], div.wpforms-container-full .wpforms-form input[type=text], div.wpforms-container-full .wpforms-form input[type=time], div.wpforms-container-full .wpforms-form input[type=url], div.wpforms-container-full .wpforms-form input[type=week], div.wpforms-container-full .wpforms-form select, div.wpforms-container-full .wpforms-form textarea {
   background-color: #eee; /* Fill color */
}
/* Button */
div.wpforms-container-full .wpforms-form button[type=submit] {
   border-radius: 50px; /* Rounded button edges */
   width: 100px; /* Width and height must match */
   height: 100px;
}

3. Sin melón

dise√Īo de formulario de contacto 2

Melonfree es una empresa de consultor√≠a web y el dise√Īo de su sitio web refleja su creatividad y habilidades de dise√Īo.

Para que el formulario de contacto se vea √ļnico y llamativo, utilizan un dise√Īo de esquina redondeada para sus campos y el texto del marcador de posici√≥n est√° en cursiva.

Este dise√Īo es una elecci√≥n perfecta para ti si quieres darle un aspecto geek a tu forma.

Dise√Īo de formulario de contacto CSS

/* Fields */
div.wpforms-container-full .wpforms-form input[type=date], div.wpforms-container-full .wpforms-form input[type=datetime], div.wpforms-container-full .wpforms-form input[type=datetime-local], div.wpforms-container-full .wpforms-form input[type=email], div.wpforms-container-full .wpforms-form input[type=month], div.wpforms-container-full .wpforms-form input[type=number], div.wpforms-container-full .wpforms-form input[type=password], div.wpforms-container-full .wpforms-form input[type=range], div.wpforms-container-full .wpforms-form input[type=search], div.wpforms-container-full .wpforms-form input[type=tel], div.wpforms-container-full .wpforms-form input[type=text], div.wpforms-container-full .wpforms-form input[type=time], div.wpforms-container-full .wpforms-form input[type=url], div.wpforms-container-full .wpforms-form input[type=week], div.wpforms-container-full .wpforms-form select, div.wpforms-container-full .wpforms-form textarea {
   -moz-box-shadow: inset -3px -3px 10px #eee;
   -webkit-box-shadow: inset -3px -3px 10px #eee;
   box-shadow: inset -3px -3px 10px #eee;
   border-radius: 15px;
}
/* Button */
div.wpforms-container-full .wpforms-form button[type=submit] {
   -moz-box-shadow: inset -3px -3px 10px #cc870a;
   -webkit-box-shadow: inset -3px -3px 10px #cc870a;
   box-shadow: inset -3px -3px 10px #cc870a;
   background-color: #f7b31c; /* Fill color */
   color: white; /* Text color */
   border-radius: 15px; /* Rounded button edges */
   font-style: italic; /* Italicize text */
   padding: 10px 30px; /* Distance between text and border */
}

4. Frontera Blanca

ejemplo de dise√Īo de formulario de contacto transparente

¬ŅQuiere colocar un formulario encima de una imagen de fondo?

Entonces es posible que desee hacer que su formulario sea transparente. White Frontier utiliza un formulario transparente en su p√°gina de contacto, por lo que su formulario se combina perfectamente con el dise√Īo de fondo.

Cuando pruebe este dise√Īo en su sitio, aseg√ļrese de colocar una imagen en el fondo. De lo contrario, no podr√° ver el formulario.

Dise√Īo de formulario de contacto CSS

/* Fields */
div.wpforms-container-full .wpforms-form input[type=date], div.wpforms-container-full .wpforms-form input[type=datetime], div.wpforms-container-full .wpforms-form input[type=datetime-local], div.wpforms-container-full .wpforms-form input[type=email], div.wpforms-container-full .wpforms-form input[type=month], div.wpforms-container-full .wpforms-form input[type=number], div.wpforms-container-full .wpforms-form input[type=password], div.wpforms-container-full .wpforms-form input[type=range], div.wpforms-container-full .wpforms-form input[type=search], div.wpforms-container-full .wpforms-form input[type=tel], div.wpforms-container-full .wpforms-form input[type=text], div.wpforms-container-full .wpforms-form input[type=time], div.wpforms-container-full .wpforms-form input[type=url], div.wpforms-container-full .wpforms-form input[type=week], div.wpforms-container-full .wpforms-form select, div.wpforms-container-full .wpforms-form textarea {
    background-color: transparent; /* Remove background fill */
    text-transform: uppercase; /* Make text all uppercase */
    border-radius: 0; /* Remove corner curve */
    border: 2px solid #fff; /* 2px white border */
    color: #fff; /* White text */
    height: 45px; /* Increase input height */
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #fff;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #fff;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #fff;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #fff;
}
/* Button */
div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit], div.wpforms-container-full .wpforms-form .wpforms-page-button {
   text-transform: uppercase;
   padding: 10px 60px;
   color: white;
   background: #444;
   font-weight: normal;
}

5. Noearaujo

dise√Īo de formulario de contacto 1

El principal atractivo de la forma de Noearaujo es que, en lugar de usar texto, usan un ícono genial para su botón. Puede utilizar fácilmente un icono para su botón siguiendo los pasos a continuación.

Paso 1: Descargue un icono para su botón. Para encontrar los íconos correctos de su elección, puede usar Flaticon.com

Paso 2: En el c√≥digo CSS a continuaci√≥n, aseg√ļrese de reemplazar la URL de la imagen de fondo donde dice http://example.com/youricon.svg

Paso 3: Guarde el CSS en el archivo CSS adicional de su tema.

Dise√Īo de formulario de contacto CSS

div.wpforms-container-full .wpforms-form button[type=submit] {
   background-image: url(http://example.com/youricon.svg);
   background-repeat: no-repeat;
   background-position: center;
   color: transparent; /* Hide button text */
   padding: 20px 70px;
   background-color: #00f3ff;
}

6. Evocar

evocar un ejemplo de dise√Īo de formulario de contacto

Evoke utiliza un dise√Īo de formulario que se asemeja a una tarjeta de carta cl√°sica. El dise√Īo es √ļnico, por lo que atrae f√°cilmente la atenci√≥n de los visitantes del sitio web. La fuente se ve elegante y las letras parecen haber sido escritas con una m√°quina de escribir antigua.

Dise√Īo de formulario de contacto CSS

div.wpforms-container-full .wpforms-form .wpforms-field {
    display: flex; 
    align-items: top; /* Try changing this to center if you like it better! */
}
div.wpforms-container-full .wpforms-form .wpforms-field label {
    min-width: 135px; /* Needs to be set to longest label (to keep inputs in a straight vertical line) */
    padding-right: 20px; /* This ensures a gap between label and input */
}
div.wpforms-container-full .wpforms-form input[type=date], div.wpforms-container-full .wpforms-form input[type=datetime], div.wpforms-container-full .wpforms-form input[type=datetime-local], div.wpforms-container-full .wpforms-form input[type=email], div.wpforms-container-full .wpforms-form input[type=month], div.wpforms-container-full .wpforms-form input[type=number], div.wpforms-container-full .wpforms-form input[type=password], div.wpforms-container-full .wpforms-form input[type=range], div.wpforms-container-full .wpforms-form input[type=search], div.wpforms-container-full .wpforms-form input[type=tel], div.wpforms-container-full .wpforms-form input[type=text], div.wpforms-container-full .wpforms-form input[type=time], div.wpforms-container-full .wpforms-form input[type=url], div.wpforms-container-full .wpforms-form input[type=week], div.wpforms-container-full .wpforms-form select {
    border: none;
    border-bottom: 1px solid #888;
    background: transparent;
}
/* Set background color for entire form */
div.wpforms-container-full {
    background-color: #eee; 
}
/* For title area only */
div.wpforms-container-full .wpforms-form .wpforms-title {
    background-color: orange;
    color: white;
    text-transform: uppercase;
    padding: 10px 20px;
}
/* Wrapper for all fields (not title) -- adding padding to make it line up with title (left) and keep it away from container edge */
div.wpforms-container-full .wpforms-form .wpforms-field-container {
    padding-left: 20px;
    padding-right: 20px
}
div.wpforms-container-full .wpforms-form textarea {
    background-color: #ddd;
    border: none;
}
/* Button */
div.wpforms-container-full .wpforms-form .wpforms-submit-container {
    padding: 10px 20px 20px 0;
    text-align: right;
}
div.wpforms-container-full .wpforms-form button[type=submit] {
    background-color: orange;
    color: white;
    padding: 10px 30px;
    letter-spacing: 4px;
    font-weight: normal;
    text-transform: uppercase;
}

Pensamientos finales

Esperamos que este art√≠culo lo inspire a crear hermosos dise√Īos de formularios de contacto en su sitio.

Si desea modificar los estilos de los botones con CSS, lea cómo personalizar los estilos de los botones con CSS. También puede hacer que los formularios se vean geniales leyendo nuestra publicación sobre cómo crear un formulario de varios pasos en WordPress.

¬ŅQue estas esperando? Comience hoy mismo con el mejor complemento de formularios de WordPress.

Si te gusta este artículo, síguenos en Facebook y Twitter para obtener más tutoriales gratuitos de WordPress.

Recomendamos

Populares