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

    Optimise and make Stripe Expiry Date fields responsive and narrower for Smart Phones etc

    Asked by charitychallenge on October 29, 2015 at 04:38 AM

    Is it possible to make the Expiry Date fields in the Stripe Connector Responsive (narrower) on small devices?

    I have set to Responsive, but does not seem to help.

    Please see this payment form to understand what I mean:

    http://www.jotform.com//?formID=53008256217955#

    You will need to enter an email address and Amount, followed by selecting credit card type to see this - the expiry date fields are far wider than they need to be.

    If there is anything else you can recommend to make this form look compact and impactful, please feel free to advise.

    Thanks

     

  • Profile Image
    JotForm Support

    Answered by Mike_G on October 29, 2015 at 09:32 AM

    I was able to see what you mean,

     

    I will work with a solution and will post my reply as soon as I have one. 

    Thank you.

  • Profile Image
    JotForm Support

    Answered by Mike_G on October 29, 2015 at 10:53 AM

    You can add this CSS codes to your form using this guide: How-to-Inject-Custom-CSS-Codes

    select#input_1_cc_exp_month.form-dropdown.cc_exp_month{

    width: 97% !important;

    }

    select#input_1_cc_exp_year.form-dropdown.cc_exp_year{

    width: 97% !important;

    position: relative !important;

    left: 6px !important;

    }

    label#sublabel_cc_exp_year.form-sub-label{

    position: relative !important;

    left: 6px !important;

    }

    .form-address-table tbody > tr:nth-child(4) td:nth-child(1) span {

    width: 50% !important;

    }

    Here's how it will look like after

    Here's the link to the form I have used for testing: https://form.jotform.com/53013992115955

    I hope this helps. Let us know if you need any further assistance. Thank you.

     

  • Profile Image

    Answered by charitychallenge on October 29, 2015 at 04:08 PM

    Thank you for this.

    Can you please also point to the code that I need to modify where I can make these fields and also the $ amount field much narrower to match the max size of their contents?  Obviously their contents will be far narrower, so they don't actually have to evenly fit the width of the screen - this is actually what I am after.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 29, 2015 at 07:27 PM

    This is the CSS code to make the amount field wider.

    #input_8 {

        width: 100% !important;

        max-width: 100% !important;

    }

    And this is for the CCV

    .form-textbox.cc_ccv {

        width: 100% !important;

    }

    You can also decrease the 100% value if you want to adjust its width.

    Please let us know if there's anything else you need help with.