Payement Form products Alignment

  • Profile Image
    Asked on December 20, 2013 at 04:45 PM


    I have segmeted my payment form into several categories, I edit this on the HMTL and paste on my website as stated on your forum.

    However I am unable to properly align the products under the labels, when you either NUQLEO or FORZA the products are align left , and not inline with the rest of the FORM.


    Attaching the HTML code.


  • Profile Image
    Answered on December 20, 2013 at 05:17 PM


    Thank you for contacting us. Just to clarify the NUQLEO and FORZA are aligned left when viewed on your site or the form itself? You can share to us your website URL so we can see how the alignment goes when viewed. I would alos like to confirm if this is the form that you were referring to

    You can upload some screenshot to point where the problem is. Please follow this guide on how to upload images

  • Profile Image
    Answered on December 20, 2013 at 06:56 PM

    Just go to any HMTL editor and copy paste the source code , you will see it once you open the label.

    The link is under a login interface so you wont be able to see it.

    adding a screenshot:


  • Profile Image
    Answered on December 20, 2013 at 09:12 PM


    Do you want it to be like this?


    If this is what you want to achieved, inject the following CSS codes to your form.

    .form-product-item {

    height: 54px; /*category box height*/


    #cid_100 > span:nth-child(44) {

    display: block; /*bring down the 2nd category to a new line*/



    Let us know if we can be of further assistance. Thanks!

  • Profile Image
    Answered on December 20, 2013 at 09:18 PM

    By the way, if you want the first category label not inlined with any products like the following image, add the following CSS code.

    #cid_100 > span:nth-child(2) {

    display: block;


    By the way, if you don't want the category boxes to be lengthy, just exclude form-product-item with height:54px property.


  • Profile Image
    Answered on December 23, 2013 at 03:20 PM

    Hi thx for your post, what i am actually looking for is to align the products inside the same form. because the products are coming left of the form. attaching screenshot:


  • Profile Image
    Answered on December 23, 2013 at 04:07 PM


    Can you please share to us the URL of the form you are working this on. It will be easier to do the test on the current version of the form.

    I checked this form  but it looks different base on the screenshot you provided earlier on the misaligned products on the collapse field.




  • Profile Image
    Answered on December 23, 2013 at 04:10 PM

    Hi this is the link, however as i mention before , you might not be able to see it. Its behind a login interface.

    Thats why i send you the source code.


  • Profile Image
    Answered on December 23, 2013 at 04:50 PM

    Thank you for giving us the link. However, as per your request I have pasted your source code to an HTML file. Upon loading that on my Chrome browser, seems like some proper CSS styles are missing as it is messed up. This is probably work on your server only


    Are you hosting this source code locally on your server or are you using embed codes taken from JotForm to embed this on your website?. We can not really tell that from our end as we can not access your internal site.

    The form is running fine on its own. However, you said that you have alignment issues with NUQLEO and FORZA on your webiste. If this form is hosted using the full source code of the form, I advise is to call the HTML file using an iframe and place it on rma-credit page

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src=",html" frameborder="0" style="width:100%; height:3710px; border:none;" scrolling="no"></iframe>

    As you can see, from that iframe embed code, I just link it to the HTML file that contains the form which is hosted on your server.

    As you mentioned before, you are having alignment issues. Probably because the Form is conflicting with your website's code. Isolating the form via iframe should fix conflicts.

    Please try it out let us know if this issue persists on your website. Thank you