How to align the security code to the credit card field

  • venco
    Asked on February 20, 2015 at 11:33 AM

    That not work for me. What am I doing wrong??? How to reenter the original layout of the credit card info boxes?

  • Elton Support Team Lead
    Replied on February 20, 2015 at 1:41 PM

    Hi,

    Use this CSS codes:

    input[name$="[cc_number]"] {

    width: 92% !important;

    }

    select[name$="[cc_exp_month]"]{

    width: 92% !important;

    }

    input[name$="[cc_ccv]"] {

    width: 100% !important;

    }

    [data-type="control_stripe"] .form-address-table > tbody tr + tr + tr > td span:first-child {

    width: 70% !important;

    }

    [data-type="control_stripe"] .form-address-table > tbody tr + tr + tr > td span {

    width: 30% !important;

    }

    Demo: http://form.jotformpro.com/form/50505706446958?

    Make sure to paste these CSS codes in the CSS tab on the Designer.

    How to align the security code to the credit card field Image 1 Screenshot 20

    Thank you!

    Hope this helps. Thanks!

  • NJFallen
    Replied on February 20, 2015 at 1:58 PM

    I'm a little confused? I thought the TOS did not allow forms to collect CC information?   Just read this in another thread...

     

    "Your account was automatically disabled by our anti-phishing filter due to credit card fields on the 'Classic Travel Connection' form. We do not allow collectingcredit card details using jotforms."

  • venco
    Replied on February 20, 2015 at 2:19 PM

    I did put it on may main form and two of the forms went wrong, only one left ok

     

  • Elton Support Team Lead
    Replied on February 20, 2015 at 2:30 PM

    @msimpy

    I have move your question to a separate thread. We'll answer your question to that thread shortly.

    @venco

    I'm not sure what you mean but this is how your form looks like here.

    How to align the security code to the credit card field Image 1 Screenshot 20

    Both security code and expiration year are now aligned to its first field.

    Am I right that this is what you want to achieve? If not, kindly provide more details so we can assist you further.

    Thank you!

  • venco
    Replied on February 20, 2015 at 2:49 PM

    Thank you about it, yes it is fixed, but now on the product drop down field became larger. No idea is it connected to that code I did inserted or no? How to fix them now?

  • Elton Support Team Lead
    Replied on February 20, 2015 at 3:06 PM

    @venco

    Thanks for your reply.

    The dropdowns are fine here too. Check this screenshot. I'm sure it's not with the CSS codes I have provided above.

    How to align the security code to the credit card field Image 1 Screenshot 20

    Can you provide a screenshot please? Or which form is it happening and what particular drop downs are expanding?

    Thank you!

  • venco
    Replied on February 20, 2015 at 3:21 PM

    They should be like this one you showed. But on those two went wrong some how! 

    http://form.jotformeu.com/form/50504932265351

    http://form.jotformeu.com/form/50504292229350

    Thank you!

  • jonathan
    Replied on February 20, 2015 at 4:28 PM

    Can you please described what was wrong with the 2 mentioned forms

    http://form.jotformeu.com/form/50504932265351

    How to align the security code to the credit card field Image 1 Screenshot 30

     

     

    http://form.jotformeu.com/form/50504292229350

    How to align the security code to the credit card field Image 2 Screenshot 41

     

    they both look as intended by the injected CSS code.

    We will wait for your updated response.

    Thanks.

     

  • venco
    Replied on February 20, 2015 at 5:13 PM

    I showing you now how they are normal, those you showed are expanded!

    How to align the security code to the credit card field Image 1 Screenshot 20

     

  • jonathan
    Replied on February 20, 2015 at 6:55 PM

    Thank you for the clarification. I can see now how you meant they are expanded.

    I see the difference in the injected CSS code between the forms

    How to align the security code to the credit card field Image 1 Screenshot 30

     

    versus

    How to align the security code to the credit card field Image 2 Screenshot 41

     

    Allow me some time to check further and find a fix. I will get back to you as soon as I can.

    Thanks.

     

     

  • venco
    Replied on February 21, 2015 at 4:05 AM

    They are two codes one is for the hover of the product pictures, other is for the two column Payment Form

  • Elton Support Team Lead
    Replied on February 21, 2015 at 7:28 AM

    @venco

    I have fixed them for you. It was due to the fact that the designer made theme responsive (width:100%) that's why it expands dramatically when you load your form in the designer.

    However, it should be fixed now. Thank you!

  • Elton Support Team Lead
    Replied on February 21, 2015 at 7:31 AM

    @venco

    By the way, I just want to recommend you something for the product images. If you want your product images to zoom in when clicked, add this widget to your form. http://widgets.jotform.com/widget/product_lightbox

    Example: http://form.jotform.co/form/33604136500846?

    Thanks!

  • venco
    Replied on February 22, 2015 at 7:14 AM

    Thank you mach better, but when click on the pic it is to large frame the pic is ok. The widget it is not flexible, I cant adjust as I want.