Re-styling payment tool credit card fields

  • Profile Image
    BBC2016
    Asked 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

  • Profile Image
    Chriistian
    Answered 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
    Chriistian
    Answered 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
    BBC2016
    Answered 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
    BBC2016
    Answered on April 12, 2016 at 04:14 AM

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

  • Profile Image
    Chriistian
    Answered 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
    BBC2016
    Answered on April 12, 2016 at 04:36 PM

    what about the line? is it possible1 to

  • Profile Image
    Ben
    Answered 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
    BBC2016
    Answered on April 13, 2016 at 12:42 AM

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

  • Profile Image
    BBC2016
    Answered 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
    Chriistian
    Answered 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.