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

    Payement Form products Alignment

    Asked by ricksgonz on December 20, 2013 at 04:45 PM

    Hi, 

    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.

     

    http://justpaste.it/dvp0

    Page URL:
    33505416214849

    alignment payment form align left and
  • Profile Image

    Answered by jedcadorna on December 20, 2013 at 05:17 PM

    Hello,

    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 http://www.jotform.co/form/33505416214849?

    You can upload some screenshot to point where the problem is. Please follow this guide on how to upload images http://www.jotform.com/answers/277033.

  • Profile Image

    Answered by ricksgonz 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.

    http://www.onlinehtmleditor.net/

    http://justpaste.it/dvp0

    adding a screenshot: http://prntscr.com/2cqe1f

    Thx

  • Profile Image
    JotForm Support

    Answered by EltonCris on December 20, 2013 at 09:12 PM

    @ricksgonz

    Do you want it to be like this?

    and

    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*/

    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

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

  • Profile Image
    JotForm Support

    Answered by EltonCris 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.

    Thanks!

  • Profile Image

    Answered by ricksgonz 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:

     

    http://prntscr.com/2dgaoy

  • Profile Image
    JotForm Support

    Answered by jonathan on December 23, 2013 at 04:07 PM

    Hi,

    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 https://www.jotform.com/33505416214849  but it looks different base on the screenshot you provided earlier on the misaligned products on the collapse field.

     

     

    Thanks.

  • Profile Image

    Answered by ricksgonz 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. 

    http://www.nuqleo.com/us/rma-credit/

    Thats why i send you the source code.

    Regards

  • Profile Image
    JotForm Support

    Answered by ardy0689 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="http://www.nugleo.com/us/somepage/Formulario-de-Credito-Marcas-Exclusivas,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