Updating form over Form Designer causes CSS and layout changes not related to the change

  • Profile Image
    buymorefans
    Asked on July 08, 2015 at 01:34 AM
    And yes, every time I edit ANY form in the designer (without touching the CSS code at all), it messes up everything, just change the submit text button, or color of anything on the form, makes the CC fields look all not aligned, every single time. I can never eidt any form without having to email support about 4 times to fix alignment....... really really time consuming.
  • Profile Image
    Chriistian
    Answered on July 08, 2015 at 01:54 AM

    Hi buymorefans,

    Thanks for contacting us.

     

    I checked your form using Chrome browser and I was not able to replicate the issue. Are you opening/updating multiple forms in multiple tabs? If so, please avoid opening or editing multiple form in multiple tabs in your browser since it may conflict the changes to your current form and other forms. If you are opening only one form at a time and still encounters the problem, can you try clearing your form cache and browser cache and see if it helps? If the issue still persists, can you provide us a screenshot so we can further check the issue.

     

    We will wait for your response.

     

    Regards.

  • Profile Image
    buymorefans
    Answered on July 10, 2015 at 09:38 PM
    Hi,I have 20 different browsers, the form looks the same in each browser, all the credit card fields are completely stretch, not aligned, they don't look like a professional form, they don't look the way they do when I just create a brand new form with stripe integration.I didn't touch anything, I just changed the color of the submit button.Please send proper CSS code to fix this form and make it look like a normal form. Your form designer is really buggy and I've talked to a few other people in the industry who agreed that whenever you touch ANYTHING in the form designer, all the CC fields change and don't align.Mike TaylorCustomer Servicewww.BuyMoreFans.com Facebook LikesTwitter FollowersInstagram FollowersYoutube ViewsGoogle +1, Linkedin & More
    ...
  • Profile Image
    Chriistian
    Answered on July 10, 2015 at 11:14 PM

    Hi buymorefans,

     

    Have you tried the suggested custom CSS code in your previous thread (last post)? Can you try to implement it? If you have any problems regarding the fix on the alignment on the custom CSS code, kindly reply on the previous thread so we can focus on this thread the investigation on the issue where the Credit Card fields alignment are being affected whenever changes are made in the Designer Mode.

     

    I have tested the form using Chrome Version 43.0.2357.132 and Mozilla Firefox version 38.0.5 but I was not able to replicate the issue. Can you try it again in Chrome and/or Mozilla Firefox if the issue still persists and also please try to clear the browser cache and see if it helps. 

     

    If the issue still persists, can you give us a specific browser version and device you are using when you encountered this issue other than Chrome and Firefox so we can further investigate?

     

    We will wait for your response.

     

    Regards.

  • Profile Image
    buymorefans
    Answered on July 16, 2015 at 08:35 AM

    Hi,

     

     

    I really appreciate your support thank you, but the form is still not working.

     

    I've attached a screenshot.

     

    It looks like that on every single browser I've tried, Firefox, Chrome, Safari, Opera etc...

     

     

    I've never touched any custom CSS, I just change the color of the submit button in the form designer and all fields are not aligned or over lapping now.

     

    I would really appreciate If I wouldn't have to email support 6 times everytime I change the tiniest thing in form designer. It is very very buggy...

     

     

    How to fix this? I just want a working form please!

     

     

    Thanks,

     

  • Profile Image
    Welvin
    Answered on July 16, 2015 at 11:15 AM

    I don't think there's a bug in the designer. Normally, when you adjust the textbox properties in the designer, the styles will be applied to all fields with the same class. In this case, the .form-textbox.

    Anyways, I've fixed it for you by removing the custom CSS that was given by my colleagues and by expanding the fields (http://www.jotform.com/help/90-Form-Field-Positioning) and by setting up the width to its default. Kindly check and confirm if it's good now.

    Thanks

  • Profile Image
    buymorefans
    Answered on July 16, 2015 at 10:17 PM

    Hi,

     

     

    But can I please repeat that I never touched any of the field boxes fields or CSS of any kind, every time I just OPEN the form designer on any STRIPE form then I save it and all the fields are completely not aligned. I've had that problem about 10 times on 10 different forms.

     

    How do I reset the fields width to 'default' like you suggested in your previous message?

     

    Why do the fields always changes every time I open the form designer without touching anything?

  • Profile Image
    Chriistian
    Answered on July 17, 2015 at 12:09 AM

    Hi buymorefans,

    I think what my colleague meant about setting the fields to their default width is that he removed the custom CSS in the form.

     

    Can you please confirm if the fix of my colleague worked and the alignment is no longer affected when you change the look of your submit button in the Designer mode? If not, please try clearing your form cache and browser cache and re-check if it works.

     

    Regards.

  • Profile Image
    buymorefans
    Answered on July 17, 2015 at 09:22 PM

    Hi,

     

    See image attached, I didn't delete the last code, it fixed it a little bit but still the credit card field is way too long, the CCV field appears below the CC field instead of beside, the Expiry month/year take 1 line each instead of being side be side, the '-' and '/' are not aligned.

     

     

    Let me know thanks,

  • Profile Image
    Welvin
    Answered on July 18, 2015 at 11:28 AM

    There's currently no way to reset the styles that were added by the form designer so I have re-created the form for you. Here's the link: http://www.jotformpro.com/form/51965564717972.

    Feel free to clone it by following the steps from this guide:

    http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Make sure to configure the Stripe after cloning it.

    Thanks

  • Profile Image
    Welvin
    Answered on July 18, 2015 at 11:36 AM

    I was able to fix the problem in your original form by simply removing the CSS codes, especially for the textbox widths in the Preferences - Custom CSS area, but I'm not sure if that's a good idea because the codes were part of the form designer. Kindly check and let us know if there are problems so we can check again.

    Thanks

  • Profile Image
    buymorefans
    Answered on July 25, 2015 at 10:22 PM

    Hi Guys,

     

     

    I appreciate your support, you are very professional and always answer in a timely manner but still after weeks this problem is not resolved.

     

    This is not how credit card fields should appear. please look at the screenshot, this is wasting my time A LOT, I didn't touch any CSS at all eVER, please fix this it's getting really ridicoulous and I contacted both Wufoo and Ninja form for alternative options as this is just getting silly.

     

    You guys are supposed to be form experts, how can you not know how credit card fields are supposed to align?

     

    CC number and CCV should be side bey side, they are now on top of each other, expiration montha and year should also be side by side, they are on top of each other too.

     

    Don't you know anything about conversion rate optimization? Don't you know that this is making my form long VERY LONg and it decreases my conversion rate a lot and is making me lose TONS of money?

     

     

    seriously get your stuff together your form designer DOESNT WORK, IT BUGGY , IT ALWAYS MESSES UP. I've only change my submit button color from pink to yellow and all the CC fields changes. It's been doing that 10 times on 10 different forms.

     

    SO ANNOYING

     

    Wasting my time and money I'm not happy at all

     

     

    see attached image.

     

  • Profile Image
    Shadae
    Answered on July 26, 2015 at 09:36 AM

    Hi buymorefans,

    I do apologize for the issue that you are experiencing with your form and we do apologize that the issue has not yet been resolved.

    I reviewed your direct form: http://www.jotformpro.com/form/50950276675968 and I am seeing that your credit card field is aligned correctly:

    I viewed your webpage and I am seeing that you have a different form currently embedded.

    Can you confirm if you are still experiencing this issue?

  • Profile Image
    buymorefans
    Answered on July 27, 2015 at 12:41 AM

    Hi,

     

     

    Yes I am still experiencing this issue. No it is not a different form no my website, there is a tab for the Paypal form, and a tab for the Stripe form. Click the stripe tab and you'll see the Stripe form wich CC fields not aligned properly still.

     

     

     

    http://euro-wand.com/buy-euro-wand-massager

     

     

    see screenshot

     

  • Profile Image
    Chriistian
    Answered on July 27, 2015 at 03:53 AM

    Hi buymorefans,

     

    I checked your form and I noticed that the credit card is displayed properly when viewed using the direct link of the form - http://www.jotformpro.com/form/50950276675968

     

    However, when the form is viewed from your site - http://euro-wand.com/buy-euro-wand-massager, the credit card fields are not properly aligned specifically the Credit Card Number-Security Code and Expiration Month-Expiration Year.

     

    Can you try re-embedding your form using the iFrame embed code (adjusted width) below?

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/50950276675968" frameborder="0" style="width:120%; height:1321px; border:none;" scrolling="no"></iframe>

     

    Sorry for the inconvenience this has caused you. We are trying are best to solve the issue. We will wait for your response.

     

    Regards.

  • Profile Image
    buymorefans
    Answered on July 28, 2015 at 12:03 AM

    That didn't solve the issue, it re-aligned the CC fields, but made all my boxes and fields thicker, and more white space, making my form way longer than it should. Long forms are horrible for conversions.

     

    I went in the form designer to reduce the line spacing (not with css, just with the normal form options)

     

    The result is now the same as before, CC fields not aligned properly, and also all my boxes now have a weird shadow that make them look like it's 1996 and text between boxes not aligned also.

     

     

  • Profile Image
    Chriistian
    Answered on July 28, 2015 at 03:21 AM

    Hi buymorefans,

     

    I cloned your form and adjust the line spacing in Designer Mode > Line Layout Tab and I was able to see that the textbox shadow you are referring to. See screenshot below.

     

    I will escalate this issue to our development team for them to further check the issue. We will inform you on this thread if the issue was fixed. Again, apologies for the inconvenience.

     

    Regards. 

  • Profile Image
    buymorefans
    Answered on August 03, 2015 at 04:19 AM

    Any news about this?

     

  • Profile Image
    Welvin
    Answered on August 03, 2015 at 06:55 AM

    I'm sorry to say, but the ticket was cancelled for some reason. 

    But I managed to fix the alignment in the form. Kindly check and let us know if there are problems.

    Thank you and our apologies for all the troubles and inconvenience dealing with this problem.

    Thanks