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

    Re-styling payment tool credit card fields

    Asked by BBC2016 on April 11, 2016 at 11:11 PM

    I cant style my form and I am so frustrated with it :(

    See attached screenshot I tried to make.

    #1 - The following fields......last,  security and expiration need lining up

    #2 - Yellow line by the " / " line needs a space.

    #3  The circled dash needs a space too on the RH side please.


    Screenshot

    Page URL:
    http://buildingbridgescoalition.org/moreinforsvp/

    Screenshot
    payment form style payment tool custom CSS
  • Profile Image
    JotForm Support

    Answered by Chriistian on April 12, 2016 at 03:28 AM

    I see that you want to add some spaces to the credit card fields and the phone number. Allow me to investigate your form further and I will get back to you once I have the custom css that you can apply to your form.
    Regards.

  • Profile Image
    JotForm Support

    Answered by Chriistian on April 12, 2016 at 03:41 AM

    Here's the css that I injected to your form (https://www.jotform.com/61018466344151):

    #cid_19 {

    width: 200px;

    }

    #cid_19 .form-sub-label-container {

    margin-right: 20px;

    }

    #cid_19 .form-sub-label-container:nth-of-type(2) {

    width: 200px;

    }

    #cid_13 .form-sub-label-container {

    width: 200px!important;

    margin-right: 30px!important;

    margin-left: 0px;

    }

    If you need further assistance, please let us know.
    Regards.

     

  • Profile Image

    Answered by BBC2016 on April 12, 2016 at 04:10 AM

    oh no! yes but the rest of my form got messed up - look at the top.

  • Profile Image

    Answered by BBC2016 on April 12, 2016 at 04:14 AM

    email and phone sections are al messed up now too!!!!! :( please help asap!!!!

  • Profile Image
    JotForm Support

    Answered by Chriistian on April 12, 2016 at 04:57 AM

    Apologies for the inconvenience. I have updated the code on your form to fix the issues. Here's the new css that I injected:

    #cid_19 {

    width: 200px;

    }

    #cid_19 .form-sub-label-container {

    margin-right: 20px;

    }

    #cid_19 .form-sub-label-container:nth-of-type(2) {

    width: 95px;

    }

    #cid_13 .form-sub-label-container {

    width: 200px!important;

    margin-right: 30px!important;

    margin-left: 0px;

    }

    #cid_13 > span:before{

    left: 425px !important;

    }

    Do let us know if you need to make further modifications.
    Regards.

  • Profile Image

    Answered by BBC2016 on April 12, 2016 at 04:36 PM

    what about the line? is it possible1 to

  • Profile Image

    Answered by Ben on April 12, 2016 at 04:54 PM

    If you add the following code:

    input.form-textbox.cc_number {
        margin-right: 10px;
    }
    .form-dropdown.cc_exp_month {
        margin-right: 10px;
    }

    next to the code given by my colleague, your form should look like this:

    As you can see both dash - and slash / are now in the middle of the space between the fields and the same will be on your form once you add the CSS above.

    Do let us know how it goes.

  • Profile Image

    Answered by BBC2016 on April 13, 2016 at 12:42 AM

    AMAZING! THANKS!!!!!!!!!!!!!!!

  • Profile Image

    Answered by BBC2016 on April 13, 2016 at 12:44 AM

    Q

    UESTION - do you see the line above above the billing section? how can i make THAT line look like the total $ line ?????? can u help me ? is there amy way you can put the line in if u know h
    ow????
  • Profile Image
    JotForm Support

    Answered by Chriistian on April 13, 2016 at 01:59 AM

    I see that the previous issue has been resolved. To better assist you with your latest concern, I have moved your question about the line into a new thread. You can check out the thread by following this link: https://www.jotform.com/answers/817071 

    Regards.