DISEÑO DE FORMULARIO

Me gustaría saber cómo hacer un formulario para que se vea asi:

Con la imagen de fondo, el texto a la izquierda y el formulario a la derecha.

Hi elimed,

Thanks for reaching out to Jotform Support. Our Spanish Support agents are busy helping other Jotform users right now, so I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in Spanish, let us know and we can have them do that. But, it might take a while until they're available again.

Now, coming back to your question, this might be possible with using custom CSS code, but we will have to review your form first. Could you share with us the form URL of the concerned form so that we can check it out?

Once we hear back from you, we'll be able to help you with this.

Oke, este es el formulario https://www.jotform.com/build/250348694494671

Espero su respuesta

Hi elimed,

I just reviewed the form and currently, it does not have a Paragraph element. Could you add it to your form with your preferred text so that we can try to work on a custom CSS code? Here's how to do it:

1. In Form Builder, on the left side of the screen, click on Add Element.

2. Click on Paragraph to add it into the form.

3. Click on the added Paragraph element on the form to enter your preferred text.

4. On the right side of the Paragraph element, click on the Check icon to save.

Once we hear back from you, we'll be able to help you with this.

Listo, ya lo agregué

Hi elimed,

We can try to replicate the format of the screenshot that you have provided on a form by Injecting CSS Codes into your form.  Let me walk you through it:

1. First, copy this code:

.form-all {

    margin-left: 50% !important;

}





li#id_35 {

    position: absolute !important;

    left: 0px !important;

    margin-left: 4% !important;

    margin-top: 15% !important;

    width: 40% !important;

    background-color: rgb(255 250 250 / 40%) !important;

    padding: 10px !important;

    font-weight: bold !important;

    opacity: 61px !important;

}





div#text_35 {

    color: white !important;

}





div#text_35 {

    color: #01d7cf !important;

    font-size: 42px !important;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Result:

Give it a try and let us know how it goes.