Credit Card and Expiration Fields Styling

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

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.

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.

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?

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!