Credit Card and Expiration Fields Styling

  • Profile Image
    kauseway
    Asked 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

  • Profile Image
    Charlie
    Answered 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
    Charlie
    Answered 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
    kauseway
    Answered 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
    ashwin_d
    Answered 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!