What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Credit Card Form Displays Improperly

    Asked by naamatusa on September 06, 2016 at 06:48 PM

    Hi Jotform,

    The payment form we are using is not displaying properly. Some labels do not appear over the proper boxes (causing payments to fail). How do I edit the form? Thanks! I have attached a screenshot and included the url.

     

    Page URL:
    https://naamat.org/waystogive/donate-now/

    Screenshot
    credit card payment form JotForm thanks attached
  • Profile Image
    JotForm Support

    Answered by Jim_R on September 06, 2016 at 10:52 PM

    Hello, I'm seeing the same thing when I checked the form as it was embedded on your website and even on the stand alone form.

    Upon checking, your form is heavily customized with lots of CSS changes (many of which are targeting actual DOM elements instead of classes and IDs).

    Please allow us some time to figure out which CSS code causes the misalignment, and what to do to fix it. We'll get back to you on this same thread.

  • Profile Image
    JotForm Support

    Answered by Jim_R on September 06, 2016 at 11:04 PM

    All right, these are the CSS codes that caused the misalignment. By removing them, this is how your Credit Card section would look like:

    #sublabel_cc_firstName {

        padding-top : 10px;

        position : relative;

        top : -56px;

    }

    #sublabel_cc_lastName {

        position : relative;

        top : -51px;

    }

    #input_57_cc_firstName {

        position : relative;

        top : 22px;

    }

    #input_57_cc_lastName {

        position : relative;

        top : 17px;

    }

    #input_57_cc_number {

        position : relative;

        top : 22px;

    }

    #sublabel_cc_number {

        position : relative;

        top : -45px;

    }

    #input_57_cc_ccv {

        left : 230px;

        position : relative;

        top : -38px;

    }

    #sublabel_cc_ccv {

        left : 230px;

        position : relative;

        top : -105px;

    }

    #sublabel_cc_exp_month {

        position : relative;

        top : -108px;

    }

    #input_57_cc_exp_month {

        position : relative;

        top : -40px;

    }

    #input_57_cc_exp_year {

        left : 230px;

        position : relative;

        top : -102px;

    }

    #sublabel_cc_exp_year {

        left : 230px;

        position : relative;

        top : -172px;

    }

    #creditCardTable tr:nth-of-type(5) {

        position : relative;

        top : -100px;

        color : #fff;

    }

    #creditCardTable tr:nth-child(6),

    #creditCardTable tr:nth-child(7),

    #creditCardTable tr:nth-child(8),

    #creditCardTable tr:nth-child(9) {

        position : relative;

        top : -60px;

    }

    #sublabel_57_addr_line2,

    #sublabel_57_city,

    #sublabel_57_state,

    #sublabel_57_postal,

    #sublabel_57_country {

        position : relative;

        top : -65px;

    }

    #sublabel_57_addr_line1 {

        left : -93px;

        position : relative;

        top : -64px;

    }

    #sublabel_57_addr_line1::before {

        position : relative;

        content : "Billing Address";

        top : -46px;

        left : 92px;

    }

    To lessen your workload of searching and deleting each one of them manually, I have compiled all your original CSS codes (misaligned) and my modified (working) version.

    1. Original: http://hastebin.com/lidebahafo.hs

    2. Modified: http://hastebin.com/olaqacupom.hs

    Just delete all the CSS on the INJECT CSS section of your FORM BUILDER, then replace them with the ones from the modified version above.

    Here's a cloned copy of your form https://jotform.com/62499076453971 with the changes applied so you can see how it looks like.

    If you encounter any issues, don't hesitate to followup so we can further assist you.

  • Profile Image

    Answered by naamatusa on September 07, 2016 at 12:14 PM

    Hi Jim,

    Thanks for the help. Much appreciated! I inherited the role of maintaining the forms from the creator who is no longer accessible. I am a bit of a newbie...apologies for my ignorance.

    I did as you suggested above. I copied your code and replaced the old CSS code with yours. However, the credit card input continues to display as before, with the labels and the boxes misaligned. It does not display the way it does in your cloned copy. 

    https://naamat.org/waystogive/donate-now/

    One other thing....we use a number of forms on the site that include the same credit card block. All have the same misalignment...up until a couple of weeks ago, I believe, they were fine. 

    Any suggestions are most welcome.

    Best,

    Keith G.

     

  • Profile Image
    JotForm Support

    Answered by Jim_R on September 07, 2016 at 12:52 PM

    I checked your form again and I noticed that instead of using these codes http://hastebin.com/olaqacupom.hs what you did was you copied the actual codes that were supposed to be deleted and pasted it on your form's CSS section.

    The codes highlighted in yellow on my previous reply are the codes that you're supposed to delete/remove. But instead, it appears you pasted those codes and removed everything.

    I'm seeing your designer is loading differently from mine so I'll paste the codes on the actual DESIGNER WIZARD so you know exactly what to do. Here's a short clip:

    One other thing....we use a number of forms on the site that include the same credit card block. All have the same misalignment...up until a couple of weeks ago, I believe, they were fine.

    For this one, since it will be on a different form, a different page on your website and may have a different scenario as well, I suggest you open a new thread (you can post one here) and include the Form URL, the page URL, and what the exact issue is about (screenshots are also welcome). Any additional details will be highly appreciated so we can better assist you.

    Please give it another try by following the video above.

  • Profile Image

    Answered by naamatusa on September 07, 2016 at 01:11 PM

    Well, what do you know...when I actually follow your directions, it works! I appreciate your patience in walking me through this. 

    I will follow your suggestion and start a new thread with the urls for the other pages that have this problem. 

    Much appreciated.

    Have a great day!

     

    --kg

  • Profile Image
    JotForm Support

    Answered by Jim_R on September 07, 2016 at 01:56 PM

    Sure, anytime Keith and have a great day too :)

  • Profile Image

    Answered by naamatusa on September 07, 2016 at 03:10 PM

    Jim,

    Upon closer inspection, there continues to be a problem with the form. At the very bottom, under billing address, the fields for zip code and country are not properly placed. This issue also appears in the video instructions you provided above. 

    https://naamat.org/waystogive/donate-now/ 

    Thanks!

    --kg

  • Profile Image
    JotForm Support

    Answered by Nik_C on September 07, 2016 at 05:55 PM

    I checked all CSS code and your form, but I'm not sure I understand the problem, I investigated the page and fields are right above the proper label:

    City field:

    State field:

    Postal code:

    Country:

    Do you want to place them somewhere else?

    If I misunderstood your question I'm sorry, in that case, please give us more details.

    Thank you!