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

    How to align the security code to the credit card field

    Asked by venco 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?

    align cc
  • Profile Image
    JotForm Support

    Answered by EltonCris on February 20, 2015 at 01: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.

    Thank you!

    Hope this helps. Thanks!

  • Profile Image

    Answered by msimpy on February 20, 2015 at 01: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."

  • Profile Image

    Answered by venco on February 20, 2015 at 02:19 PM

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

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on February 20, 2015 at 02: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.

    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!

  • Profile Image

    Answered by venco on February 20, 2015 at 02: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?

  • Profile Image
    JotForm Support

    Answered by EltonCris on February 20, 2015 at 03: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.

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

    Thank you!

  • Profile Image

    Answered by venco on February 20, 2015 at 03: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!

  • Profile Image
    JotForm Support

    Answered by jonathan on February 20, 2015 at 04:28 PM

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

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

     

     

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

     

    they both look as intended by the injected CSS code.

    We will wait for your updated response.

    Thanks.

     

  • Profile Image

    Answered by venco on February 20, 2015 at 05:13 PM

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

     

  • Profile Image
    JotForm Support

    Answered by jonathan on February 20, 2015 at 06: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

     

    versus

     

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

    Thanks.

     

     

  • Profile Image

    Answered by venco on February 21, 2015 at 04:05 AM

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

  • Profile Image
    JotForm Support

    Answered by EltonCris on February 21, 2015 at 07: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!

  • Profile Image
    JotForm Support

    Answered by EltonCris on February 21, 2015 at 07: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!

  • Profile Image

    Answered by venco on February 22, 2015 at 07: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.