V4 Editor: Forms are changing styles on their own

  • Profile Image
    wakinggirl
    Asked on October 05, 2017 at 03:38 PM

    Many of us who use Jotform are using it because of the easy drag and drop that it once had.


    That means, many of us are also using DRAG AND DROP website editors (Weebly).

    It's almost impossible to make a Jotform look good in Weebly with the mobile-responsiveness. If I make a form 300pixels wide, it's gonna be mobile friendly, no matter what.


    But for some reason, the form looks like ass on a website.


    The whole reason I got into Jotform was because I could build a form in a minute. Now it takes HOURS to make it look decent.


    Your solutions did not help me.

  • Profile Image
    Welvin
    Answered on October 05, 2017 at 04:34 PM

    Our apologies for the troubles and inconvenience. Would you mind sharing us your Weebly page where the form is embedded? This way, we can check what's causing the problem. 

    I suspect it is because the responsive layout is rendered, but the width of the form container is smaller than the form width. 

    We'll wait for your reply.

  • Profile Image
    Gertie 
    Answered on October 06, 2017 at 08:43 PM

    The problem exists on these sites and more:

    http://www.renowakinggirl.com/build.html

    http://www.nvautobodysparks.com/

    http://www.vanallenplumbingreno.com/

    http://www.antiqueangelchapel.com/make-a-reservation.html


    These forms are working, but if I make any edits to them, they will be on the "new and unimproved" Jotform experience, at which point it will require a lot of edits to make it fit in the space:

    http://www.tropicalcarpetreno.com/contact.html

    http://www.deltchevgymnastics.com/contact-us.html

    http://www.renooralsurgery.com/contact.html

    http://www.orthodonticsreno.com/


    The problems:

    The default settings--> padding, margins, gray background.

    Because of the added padding/margins, the form can never fit appropriately into a Weebly column. Weebly allows for easy padding/spacing, WITHOUT CODE. Jotform's padding/spacing can only be modified IN THE CODE, and in two separate places, and it only works SOMETIMES.

    Ain't nobody got time for that!

    The solution:

    Return the default settings to a stripped down version of the form with NO PADDING, NO MARGINS, NO BACKGROUND COLOR.

    Remove the slider for background form transparency. THAT NEVER WORKS. Turn it into a checkbox option: Form background color: Yes or No.



    Responsiveness won't be an issue if you do those things!


    Thank you!

  • Profile Image
    Nik_C
    Answered on October 07, 2017 at 02:43 AM

    I tested your links and they showed properly on my phone (it's iPhone 7). 

    Only with this URL, I had an issue: http://www.nvautobodysparks.com/ where the form didn't show at all.

    For example:

    So I'm not sure if you used some different embed method there?

    Again, the other links showed perfectly, so are there certain devices where you're testing your URLs so we can check if we can create CSS to target such devices.

    Also, I assume, you used this guide to embed your forms: https://www.jotform.com/help/215-Adding-a-form-to-Weebly

    We'll wait for your response.

    Thank you!

  • Profile Image
    wakinggirl
    Answered on October 09, 2017 at 06:07 PM

    Let me back up:

    In this thread, I'm not as concerned with how it looks on mobile, as I am with how it looks on Desktop.


    Here's an example:

    I just went in to make an edit to this simple RSVP form at

    http://www.pattystours.com/rsvp.html

    The form was built years ago and it was on the old Default Theme with ZERO padding.

    Once I opened the form in the new Jotform, the form automatically updated to the "new look."

    The form was squished together. I expanded the size and removed the gray background.


    You can still see the black border around the form, from the previous incarnation. See all the extra padding between the black border and the actual form? This disallows forms from nesting directly against the column or adjacent content.


    Let's walk through that in slow motion on another website:

    1) We have a form built a long time ago that's working:


    2) Then we log into Jotform and click into the form and we get:


    Do you see the problem? The fields are off the edge, the form is too big for the area, there's a gray box around the form.


    AND biggest problem of all--I have to edit every single form!


    Not a big deal if I just had a form or two. But we're talking about 1-10 forms for HUNDREDS of websites.


    Now let's review how this affects small forms:

    BEFORE


    AFTER


    Now the page and/or form needs a redesign.


    The default color has always been WHITE. I don't understand the choice of gray background + shadowing. That just creates more work for a typical user.


    It's becoming faster and easier to make a good-looking form in FORMSITE! Never thought I would see that day!


    Help!!!!!!!!!

  • Profile Image
    Mike
    Answered on October 09, 2017 at 10:36 PM

    We appreciate your detailed reply. I have escalated the issue about the new styles that are applied to the old form in v4 editor to our developers. We will get back to you when we have any updates on this.

    In the meantime, here is a CSS that you can try to remove the padding, border and set a transparent background. 

    /* Remove top and bottom padding */
    @media screen and (min-width: 1024px) {
    .jotform-form {
    padding: 0;
    }
    }
    @media screen and (max-width: 1024px) and (min-width: 768px) {
    .jotform-form {
    padding: 0;
    }
    }
    @media screen and (max-width: 768px) and (min-width: 480px) {
    .jotform-form {
    padding: 0;
    }
    }
    /* Remove border around the form */
    .form-all {
    border: none !important;
    box-shadow: none !important;
    }
    /* Transparent background */
    html, .form-all {
    background: transparent !important;
    }

  • Profile Image
    tropicalcarpetreno
    Answered on October 10, 2017 at 04:12 PM

    Thanks, Mike!


    Here is a current example of the challenge of designing with an ever-changing form (with padding). I used the code you shared, which helped a lot, but the padding is still there.

    The top picture shows the width that we would like the form to be, but the form goes into mobile mode:

    1507666120jform trop 2.png

    This is the width the form needs to be to NOT be in mobile:

    1507666214jform trop.png


    Can a form be mobile width, without being on "mobile"?


  • Profile Image
    Welvin
    Answered on October 10, 2017 at 05:07 PM

    I noticed that the current container of the form is a bit smaller compare to your last screenshot. It's currently set to 37.088733798604%. You'll see, the wrapping of the texts, they are not the same in your screenshot(s).


    You will have to adjust the size in the webpage editor, set 60% to get the desired layout. See screenshot:

    2017-10-11-010010010.png


    The responsive layout kicks in because the container is set to mobile. Please try it and let us know if the output is the same.