Insertar un formulario sobre una imagen

Hola @giolgi,

¿Podrías por favor facilitar la página donde se encuentra el formulario para revisarlo?
Así podré ayudarte con el código CSS.

Saludos

Hola de nuevo @giolgi,

Para hacer lo que quieres podrías añadir el siguiente código:

#wpcf7-f9844-p24322-o1 {
    position: absolute;
    bottom: 0;
    right: 0;
    color: #fff;
    height: 55%;
    width: 35%;
    display: flex;
    align-items: center;
}

#wpcf7-f9844-p24322-o1 .wpcf7-submit {
    margin-top: 10px;
}

#wpcf7-f9844-p24322-o1 p{
    margin-bottom: 0;
}

#post-24322 .post-content{
    position: relative;
}

De todos modos no es algo que te recomiende hacer. Plantéate cómo quedará en dispositivos pequeños. Usar imágenes con texto en una web no es muy recomendable (salvo excepciones puntuales) debido a que las imágenes deben adaptarse al dispositivo en el que carguemos la web. En este caso será prácticamente imposible ver ese texto en dispositivos móviles, además de que el formulario se romperá por el tamaño de los enunciados.

Lo que te recomendaría para este caso concreto sería que elimines el texto de la imagen y lo coloques como 2 bloques HTML. El formulario también se incluiría en el bloque de la derecha, bajo el texto «inscríbete». La imagen podrás colocarla de fondo con la propiedad CSS background. De este modo lograrás que todo el contenido sea completamente responsive.

Espero haberte sido de ayuda, un saludo

• Esta respuesta fue modificada hace 1 año, 11 meses por Alvaro Torres.
• Esta respuesta fue modificada hace 1 año, 11 meses por Alvaro Torres.

Hola de nuevo @giolgi ,

¿Y dónde quieres alinearlo?

Hola @giolgi ,

Aquí hay varias cosas que habría que cambiar. Una forma de hacerlo sería la siguiente:

1. La estructura HTML del formulario debería ser diferente. Ahora mismo hay etiquetas <br> después de cada input. Para evitar esto tendrás que colocar los inputs sin saltos de línea en CF7.

2. Los enunciados de cada input habría que colocarlos, por ejemplo, en etiquetas <label> que también envuelvan el input en sí. Así podremos tratar el input junto con el enunciado como un único bloque

3. Luego habría que poner la etiqueta padre, que en este caso es <p>, como display: flex;flex-direction: column;justify-content: space-between;

4. tras esto podremos darle un valor de flex-basis: 100% a aquellos elementos que queramos que ocupen todo el ancho. Y un valor de flex-basis: 48% a aquellos que queremos que ocupen solo la mitad

Espero haber sido de ayuda, saludos

• Esta respuesta fue modificada hace 1 año, 11 meses por Alvaro Torres.
• Esta respuesta fue modificada hace 1 año, 11 meses por Alvaro Torres.

Hola,

1. Perdona, tendrías que cambiar flex-direction: column; por flex-wrap: wrap;

2. Luego podrías atacar a las etiquetas label de DNI y teléfono con el selector :nth-child()

3. También jugaría con el padding de cada input así como de border-radius

4. Para el botón haría algo así:

.wpcf7-form.cf7skins label:last-child {
    text-align: center;
    width: 100%;
    margin-top: 10px;
}

.wpcf7-submit{
    background: transparent;
    border: 2px solid yellow;
    border-radius: 6px;
    margin: 0 auto;
}

Saludos

• Esta respuesta fue modificada hace 1 año, 11 meses por Alvaro Torres.

Contento de haberte ayudado Jorge!