-
traveldiunsaAsked on December 2, 2015 at 3:47 PM
Hello, I have checked the responsive options for my form but it´doeasn work properly, what can it be wrong with my setup?
Thanks in advance!
-
Mike_G JotForm SupportReplied on December 2, 2015 at 9:10 PM
I have cloned your form.
Then, I applied some changes on the cloned form. I believe that when you make your form alone responsive it should be responsive also when embedded on your website. Especially when you embed it using the iframe code: Getting-the-Form-iFrame-Code
First, you need to expand the fields as shown on the image below:
This, however, will not take much effect on your form.
After expanding the fields on the image, we will add this CSS codes in your form so it will look responsive on your mobile devices.
@media screen and (max-width: 480px) {
.form-all,.jotform-form, .form-section.page-section, .supernova{
background-color: green !important;
width: 350px !important;
}
label.form-sub-label{
white-space: normal !important;
}
.form-checkbox-item{
width: 175px !important;
}
.form-label{
text-align: left !important;
}
#recaptcha_input_28 tr:nth-child(2) td{
background-color: blue !important;
position: relative !important;
display: inline !important;
}
}
Note: The codes above will only take effect if the form is opened in a mobile device.
Here's how it will look like on a mobile device:
I would like to suggest you clone the form I have used for testing using this guide: How-to-Clone-an-Existing-Form-from-a-URL
Here's the Form URL of the clone version of your form I have used for testing:
https://form.jotform.com/53357798371974
Once you have cloned the form I have used for testing, please try to embed the clone version on your website.
I hope this helps. Let us know if there is a need for us to clarify any of the instructions above. Thank you.
-
traveldiunsaReplied on December 3, 2015 at 1:26 PM
Hello Mike ¡Thanks for the detailed answer! I just proceed with the instructions, here is the new form:
https://form.jotform.com/53364754721963
However in the first field this option:
is like blocked, so I can enter and expand that field. It´s not the first time I get this option like this in other forms, appreciate your help.
-
Mike_G JotForm SupportReplied on December 3, 2015 at 2:41 PM
I'm not sure what's blocking the cog-wheel icon for you to change the properties of the field. I have cloned your new form(here's the clone version of it: https://form.jotform.com/53365763088970) and I was able to expand the first field.
Let us know if you need any further assistance. Thank you.
-
traveldiunsaReplied on December 4, 2015 at 10:40 AM
Thanks, I proceed to create a new field and delete de first one, but after that the block appeared again. I notice that happens when i have this icon above the field also
Thanks!
-
MikeReplied on December 4, 2015 at 11:35 AM
I have checked the 'Formulario de Pre-Inscripción' form in editor, but everything appears to be working fine.
Is this still happening on your end when you select the first field, or in some other way?
-
traveldiunsaReplied on December 4, 2015 at 11:45 AM
-
MikeReplied on December 4, 2015 at 12:15 PM
Thank you for the video, we can see the problem now. We will handle it on a separate thread.