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 and Expiration Fields Styling

    Asked by kauseway on December 30, 2014 at 01:54 AM

    Can you look at this:

     

    http://form.jotformpro.com/form/43630411741950?

     

    Can you tell me a way to:

     

    1) get rid of or hide or move the dash below the credit card field.  

    2) Fix the expiration date fields.  They both take up full width with the forward slash in between.  I tried reducing the fields widths but it looks worse and doesnt help. I would prefer for both of them to be on the same line and look better than it is currently. thanks

    credit card and move thanks
  • Profile Image
    JotForm Support

    Answered by Charlie on December 30, 2014 at 10:31 AM

    Hi,

    I see that you have already styled your form, and you changed the position of each labels manually. It's quite hard to remove those elements especially they are part of the styling of the payment form and the labels are positioned differently.

    I'll look at this and will try to come up a better styling with your preferences.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by Charlie on December 30, 2014 at 12:54 PM

    Hi,

    You can try adding this custom CSS code in your Form Designer.

    .form-textbox.cc_number {

        width : 180px!important;

    }

    .form-textbox.cc_ccv {

        width : 50px !important;

    }

    #cid_14 > table > tbody > tr:nth-child(3) > td >.form-sub-label-container {

        width : 190px;

    }

    #input_14_cc_exp_month {

        width : 180px !important;

    }

    #input_14_cc_exp_year {

        width : 180px !important;

    }

    #cid_14 > table > tbody > tr:nth-child(4) > td > .form-sub-label-container {

        width : 190px;

    }

     

    Although, you might need to edit again the positioning of your labels because they are manually positioned to a specific area.

    Here's the form with the styling you have: http://form.jotformpro.com/form/43635533123954

    While here's the form without the styling you have but with the styling made on the credit card field: http://form.jotformpro.com/form/43634277725966

    You can clone my form to see how I set it up. 

    I hope this helps. Let us know if you need more assistance on this.

    Thank you.

  • Profile Image

    Answered by kauseway on December 31, 2014 at 11:31 PM

    Not sure about this. Now the fields are offset plus you still have a dash and a forward slash hanging out. It just looks awful.  I am wondering if I had someone insert the javascript and html. Code I directly code stripe into the form and bypass this widget?

  • Profile Image
    JotForm Support

    Answered by ashwin_d on January 01, 2015 at 02:05 AM

    Hello kauseway,

    Unfortunately no. It is not possible to bypass the integrated payment tool and use your own code as it is not allowed to have form fields in your form asking for credit card details.

    We will try to help you in all possible way. Can you please confirm if the remain issue is only dash and forward slash or you want some other changes as well?

    We will wait for your response.

    Thank you!