My form is not responsive on wix website

  • igexposure
    Asked on September 28, 2015 at 7:41 PM

    My registration form is very glitchy on mobile, and my employment application form is not responsive with mobile even if I select the responsive option to "yes".

     

    Do you have a support phone number? or can someone call me please?

  • Ashwin JotForm Support
    Replied on September 29, 2015 at 1:27 AM

    Hello igexposure,

    Unfortunately we do not provide support over phone. Our primary mode of communication is through forum support. 

    I did check your form "Registration" and " Employment Application" form in mobile device and they appear just fine. Have you embedded your form in your webpage? Please share the webpage URlL and we will take a look.

    Please be noted that for embedded forms to be mobile responsive, we recommend you to embed forms using its iFrame embed code. If you are not using the iFrame embed code already please do so and that should most likely solve your problem. The following guide should help you:  http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code 

    We will wait for your response.

    Thank you!

  • igexposure
    Replied on September 29, 2015 at 1:30 PM

    I embedded the employment form on www.igexposure.com/employment

    The registration form I had to remove because most of my customers entry website from a movie device, and because the form is glitchy, it is effecting my sales, so I am currently using a different form service for my registration form.

    The registration form on mobile has an issue that when you click on the next field, it doesn't do anything, you need to click on the field after the one you need for it to take you to the one you need. For example, you fill out field 1, then field 2, then to get to field 3 you need to press on field 4.

    Very weird.

    Also, the auto responder email doesn't always work. Ive tested it with a few different people, including myself, sometimes it gets received, sometimes it doesn't. Emails are entered correctly, and spam folder is checked as well.

  • igexposure
    Replied on September 29, 2015 at 1:31 PM

    Also, im not sure what iFrame is.

    I use Wix forms for my Wix website if that information helps at all.

  • Kiran Support Team Lead
    Replied on September 29, 2015 at 2:50 PM

    It looks like that you are embedding the form using default embed method. Please refer to the guide below to embed the form on your wix webiste.

    http://www.jotform.com/help/70-Adding-a-Form-to-Wix-Site

    As I tried to embed the form on my wix test pages, it seems to be working fine. 

    My form is not responsive on wix website Image 1 Screenshot 30

    My form is not responsive on wix website Image 2 Screenshot 41

    Please follow the guide provided to embed the form and check the mobile preview from the wix admin. Also, you may need to activate optimized mobile view on wix

    Hope this information helps! Let us know if you need any further assistance.

    The issue with auto-responder email is moved to a separate thread and shall be addressed shortly.

    http://www.jotform.com/answers/673041

    Thank you!

  • igexposure
    Replied on September 29, 2015 at 11:04 PM

    Thank you for all the fast responses...

    I tried embedding it with iFrame this time but the employment application is glutting now, it scrolls within itself instead of smoothly with the page. Like it is not flat on the page, its in its own world within the page. This is on mobile, on the regular website it looks fine, but not working very well on mobile.

    Also, the registration form is still doing the same thing as before even using iFrame.

    Its not working properly. When you go on to the next field it goes back into the previous field, and then the form gets really big and doesn't show the rest of the form. Its really bad, I really can't use it.

    The employment form is embedded in http://igexposure.com/employment

    The registration form is embedded in http://igexposure.com/registration-test

     

    There must be another way to embed the form, its really bad.

  • igexposure
    Replied on September 30, 2015 at 1:29 AM

    Still having the same problem :( please check.

    I really hope we can find a fix for this

    thanks again for the effort and quick responses

  • beril JotForm UI Developer
    Replied on September 30, 2015 at 10:48 AM

    Hi,

    Can you copy and paste the code below to your CSS from Designer?

     

    /*-----------RESPONSIVE LAYOUT-----------*/

     

    .form-line.form-line-column {

    width: 100% !important;

    margin-left:0

    }

    .form-line{

    width: 100%;    

    }

    .form-textarea,

    .form-textbox,

    .form-dropdown{

    width: 100% !important;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }

    .form-label-left, .form-label-right{

    width: auto !important;

    }

    .form-buttons-wrapper{

    margin-left:0 !important;

    }

    .form-input {

    width: 100% !important;

    }

    .form-all{

    width: 75% !important;

    }

    .form-sub-label-container {

    width: 100% !important;

    display: block  !important;

     

    }

     

    Here is how to do this:

    1) Click on Setup & Embed.

    My form is not responsive on wix website Image 1 Screenshot 60

     

    2) Click on Designer.

    My form is not responsive on wix website Image 2 Screenshot 71

     

    3) Click on CSS.

    My form is not responsive on wix website Image 3 Screenshot 82

     

    4) Copy & paste the code above to CSS.

    My form is not responsive on wix website Image 4 Screenshot 93

     

    5) Click on save button.

    My form is not responsive on wix website Image 5 Screenshot 104

     

    6) Update the form code on your site. Please, check the guide below:

    https://www.jotform.com/help/70-Adding-a-Form-to-Wix-Site.

     

    Hope this will help. Let us know if you need further assistance.

  • igexposure
    Replied on October 2, 2015 at 4:50 PM

    This did not work, it is still glitchy and still wont go to the next field when its clicked on.

    Now the form looks ugly, the fields are on top of each other and the submit button is cut in half.

    It scrolls within itself and also doesnt allow scrolling at times.

  • Elton Support Team Lead
    Replied on October 3, 2015 at 2:55 AM

    @igexposure 

    Thanks for your reply.

    I check your forms on mobile and they are responsive. Fields are also fillable but I can see what you mean on the scroll bar which appear on the form container itself. To fix it, simply increase the HTML widget where you have pasted your form embed code. Unfortunately, it is not sufficient enough to display the entire form specially when it's length increases. You can do that on the Wix builder.

    This is how your form appears on mobile. It is rendering the responsive style for mobile so fields are easy to fill. If you have issues with this style, let us know and we'd be happy to assist you further.

    My form is not responsive on wix website Image 1 Screenshot 20

  • igexposure
    Replied on October 5, 2015 at 9:50 AM

    I know how to use wix, and it is sufficient enough to show the form.

    The problem is not with how I embedded or edited it. The problem is with the form or the way it is coded. It simply does not work. 

  • Elton Support Team Lead
    Replied on October 5, 2015 at 11:23 AM

    @igexposure 

    Thanks for your reply and apologies if I am not detailed enough. Let me please clarify it further and with an alternate solution. ;)

    There have been quite a few issues similar to this that's reported by Wix users and mostly, it was resolved by increasing the HTML widget where the form is embedded. That's why I have also recommended it to you. So, I check again your website and I can confirm that there's indeed something that's limiting the form when displayed on mobile.

    Here's a visual view of the form embedded on your page showing the problem and how it can be resolved.

    My form is not responsive on wix website Image 1 Screenshot 30

    And here's an image animation on how it is resolved by increasing the height of the container.

    My form is not responsive on wix website Image 2 Screenshot 41

    ----------------------

    There are actually other ways to resolve this, that's by adjusting the form style when viewed on mobile so it fits the current container height. If you want this, simply inject the following CSS codes to your form. This should reduce the spacing between the field questions so the form fits on the container height and the scroll bar will not be displayed in any way.

    @media screen and (max-width:768px){

    .form-line {

        padding-top: 0 !important;

        padding-bottom: 4px !important;

    }

    div.form-header-group {

        padding-top: 0 !important;

        padding-bottom: 4px !important;

    }

    .form-line-error .form-error-message {

        display: none; /*remove error message and retain the red highlight*/

    }

    }

    Please follow the same guide provided by my colleague or here on how to inject CSS codes and paste the CSS codes at the most bottom part.

    Hope this helps. Thank you!

  • igexposure
    Replied on October 7, 2015 at 5:20 PM

    This has become way too confusing for me. Not as simple as it should be, or as JotForm makes it seem to be.

    As a drag and drop form builder, I never expected to have to go through all of this mess to get it to work the way its supposed to.

  • Kiran Support Team Lead
    Replied on October 7, 2015 at 11:54 PM

    I understand. Sorry for the inconvenience this may have caused. Generally, when we use default embed method the height of the form is adjusted automatically. However, while using a website builder or CMS like Wix/WordPress we may see some conflicts with other scripts on the website. Since Wix uses HTML widget that embeds the code in iframe, we may be seeing some issues with the responsiveness which can be resolved by adding some custom code to the form or the webpage. 

     

    As I check the employment page now on my mobile, it seems to be working fine and I was able to submit it normally from the mobile webpage. It seems that the registration form is replaced with Wix inbuilt form on this webpage. If I'm looking at a different webpage, please let us know. We'll take a look and provide you with necessary assistance.

    Thank you!

  • igexposure
    Replied on October 8, 2015 at 1:10 AM

    Thank you.

    Yes, I replaced it with a wix form in the meantime since I cannot use jotforms form because it does not work properly.

    I've created a clone of the registration page which has the jotform regstration form on it.

    http://igexposure.com/registration-test

  • beril JotForm UI Developer
    Replied on October 8, 2015 at 10:39 AM

    Hi,

    On behalf of my colleague , you're welcome. We are sorry for confusion. The problem is occurs because of the registration form is replaced with Wix inbuilt form on this webpage. Because when we embed the form on Wix, the html widgets uses iframe and we have our own iframe embed code.

    If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.