Soporte » Plugins y Hacks » Insertar un formulario sobre una imagen

  • Resuelto jorge_hdz

    (@giolgi)


    Buenas.

    Quiero insertar un pequeño formulario sobre una imagen que ya tengo en jpeg. Manejo algún plugin sencillo como contact form 7 donde hago estos formularios, pero el diseño ya me cuesta más.
    ¿Hay algún plugin que me deje insertar lo que yo quiera directamente sobre esta imagen que ya tengo? (sin que tenga que tocar mucho CSS)

    No es una imagen de fondo completa de la página, sino dentro de una página de fondo neutro, usar ese jpg para dentro añadir el formulario.

    ¿Alguna idea?

    Muchas gracias.

Viendo 15 respuestas - de la 1 a la 15 (de un total de 15)
  • 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

    Iniciador del debate jorge_hdz

    (@giolgi)

    Esta es la pag:
    http://www.cecapyme.org/prueba/

    El formulario quiero ponerlo debajo de donde dice inscríbite en la imagen

    Gracias.

    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 mes, 3 semanas por Alvaro Torres.
    • Esta respuesta fue modificada hace 1 mes, 3 semanas por Alvaro Torres.
    Iniciador del debate jorge_hdz

    (@giolgi)

    Muchas gracias Álvaro.

    Voy progresando. He conseguido poner el fondo, pero soy incapaz de alinear el formulario donde quiero.

    http://www.cecapyme.org/prueba/

    Te paso algunos bloques de CSS tal y como está ahora porque tampoco se muy bien en que zona tengo que modificarlo.

    .wpcf7 .cf7s-cotton-candy {
    	padding: 20px;
    	background-image: url("http://www.cecapyme.org/wp-content/uploads/2022/10/Emprendedores_escritorio.png");
    	height: 500px; 
    	width: 940px;
    	background-position: center; /* Center the image */
    	background-repeat: no-repeat; 
    	background-size: cover; 
    	color: #1E0B4A;
    }
    	
    
    .wpcf7 .cf7s-cotton-candy fieldset {
    	margin: 10px 0;
    	padding: 10px 20px;
    	border: 1px solid #9ffffe;
    	background: none;
    }
    
    .wpcf7 .cf7s-cotton-candy legend {
    	font-size: 1.2em;
    	padding: 3px 20px;
    	color: #fff;
    	border: 1px solid #9ffffe;
    	background: #90ebec;
    }
    
    .wpcf7 .cf7s-cotton-candy label {
    }
    
    .wpcf7 .cf7s-cotton-candy fieldset p {
    }

    Hola de nuevo @giolgi ,

    ¿Y dónde quieres alinearlo?

    Iniciador del debate jorge_hdz

    (@giolgi)

    Pues fíjate donde lo tengo ahora. Lo he hecho a lo bruto con padding. No será responsive pero me urge para salir del paso y ya con tiempo lo haré mejor.

    Ahora querría poner en la misma línea los campos dni y tlf, pero tengo que hacer una tabla y volver a tocar el padding, supongo…

    A lo que quiero llegar es a esto:
    http://www.cecapyme.org/wp-content/uploads/2022/10/LANDING-CECAPYME_EMPRENDEDORES.png

    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 mes, 3 semanas por Alvaro Torres.
    • Esta respuesta fue modificada hace 1 mes, 3 semanas por Alvaro Torres.
    Iniciador del debate jorge_hdz

    (@giolgi)

    De ayuda si que me estás sirviendo mucho.

    Hasta el punto 3 bien, ¿pero luego como distingo entre etiquetas para que solo me ponga algunos al 48%?. Me los coge todos

    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 mes, 3 semanas por Alvaro Torres.
    Iniciador del debate jorge_hdz

    (@giolgi)

    Ya casi lo tengo. Solo me queda tocar un pelín lo del dni y tlf para que no se salte con otras resoluciones.

    Oye muchísimas gracias. Me has ayudado mucho, eres muy amable.

    Saludos

    Contento de haberte ayudado Jorge!

    Iniciador del debate jorge_hdz

    (@giolgi)

    Ya que estamos y eres tan bueno, me aprovecho de ti jeje…

    Al final lo dejé perfecto para escritorio, pero si pudiese también para móvil sería perfecto. No se si al final la opción que elegí era la que no era responsive, me perdí con tantos intentos.
    El caso es que justo el formulario queda fuera de marco en el móvil.

    He metido este código en el style.css de mi tema, que no se si sirve de algo:

    div.wpcf7 .wpcf7-form-control {
      max-width: 95%;
    }
    
    .wpcf7 select {
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 3px;
        margin: 0;
        padding: 4px;
        text-indent: 0px;
        width: 100%;
        z-index: 100;
    }
    
    .wpcf7-text {
      width: 100%;
    }
    
    .wpcf7-textarea {
      width: 100%;
    }

    Aparte de que el códgio esté bien o mal, como estoy usando un plugin no se si esto debería ir en el css del plugin o en mi tema padre.

    Si tienes alguna idea, te lo agradezco.
    Gracias.

    Iniciador del debate jorge_hdz

    (@giolgi)

    Vale la imagen más o menos la he arreglado poniendo la propiedad contain en el background. Ahora me falta que se vea el ofrmulario porque queda fuera, supongo que será por poner el padding en valores absolutos px.

    Otra cosa, tengo otra imagen en formato vertical para el móvil. ¿Como puedo meter el código para que sepa cuando tiene que usar una y cunado la otra?

    Hola @giolgi,

    Para hacer responsive la web necesitas colocar media queries junto con los selectores y propiedades que has utilizado. Échale un ojo que ahí lo tienes:
    Media queries en mozilla

    Saludos

    Moderador Jose Luis

    (@jose64)

    Hola @giolgi

    La consulta inicial ya ha sido resuelta hace tiempo y esto se está convirtiendo en un servicio de consultoría.

    Marco como resuelto y cierro el debate.

Viendo 15 respuestas - de la 1 a la 15 (de un total de 15)
  • El debate ‘Insertar un formulario sobre una imagen’ está cerrado a nuevas respuestas.