Re-styling payment tool credit card fields

  • 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 Screenshot 10

    Jotform Thread 815926 Screenshot
    Page URL: http://buildingbridgescoalition.org/moreinforsvp/
  • Chriistian Jotform Support
    Replied on April 12, 2016 at 3: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.

  • Chriistian Jotform Support
    Replied on April 12, 2016 at 3: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;

    }

    Re styling payment tool credit card fields Image 1 Screenshot 20

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

     

  • BBC2016
    Replied on April 12, 2016 at 4:10 AM

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

  • BBC2016
    Replied on April 12, 2016 at 4:14 AM

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

  • Chriistian Jotform Support
    Replied on April 12, 2016 at 4: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.

  • BBC2016
    Replied on April 12, 2016 at 4:36 PM

    what about the line? is it possible1 to

  • Ben
    Replied on April 12, 2016 at 4: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:

    Re styling payment tool credit card fields Image 1 Screenshot 20

    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.

  • BBC2016
    Replied on April 13, 2016 at 12:42 AM

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

  • BBC2016
    Replied 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????
  • Chriistian Jotform Support
    Replied on April 13, 2016 at 1: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.