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

    Is there a way to place Sub-Heading above category selections and center it, in Payment Wizard?

    Asked by AATR on April 03, 2015 at 03:04 PM

     

     

    My form has multiple selections and options, in order to make it look pleasing to the eye and shorten the form I’ve had to inject some code that I have researched.  Still needs tweaking because it looks a bit off.  What I’m trying to accomplish is attached in upload.  Below is the code I already have injected.  Thanks in advance for looking into it.

     

    .form-product-item {

    border: 1px solid #EFEFEF;

    margin: 1px;

    float: center;

    width: 293px;

    }

    .form-product-item + br {

    display:none;

    }

    br + b {

    float: left;

    padding-top: 20px;

    }

    .form-payment-total {

    line-height: 50px;

    margin: 1px;

    border: 0px solid #EFEFEF;

    border-radius: 4px;

    padding: 15px;

    padding-right: 193px;

    padding-left: 6px;

    }

     

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

    width: 609px;

    }

    #cid_36 > span:nth-child(10), 

    #cid_36 > span:nth-child(24),

    #cid_36 > span:nth-child(28),

    #cid_36 > span:nth-child(30) {

    width: 609px;

    margin-top: 20px;

    }

     

     

    Screenshot
    products styling form source
  • Profile Image
    JotForm Support

    Answered by Mike on April 03, 2015 at 03:44 PM

    It is not likely that we can style the product field in this way. If you need a custom layout form, you can download the form source code, and modify it with your own html and css.

    How to get the Full Source Code of your Form

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

  • Profile Image

    Answered by AATR on April 03, 2015 at 04:49 PM

    http://form.jotformpro.com/form/40165831084956

     

    Can i get it to do this at least?

  • Profile Image
    JotForm Support

    Answered by Mike on April 03, 2015 at 05:29 PM

    You can try the next CSS to get a similar layout.

    http://code.re/7EA

    Since the 'Additional T-Shirt Purchase' section is currently missing, you will need to add it as a free product and update the CSS.

  • Profile Image

    Answered by AATR on April 04, 2015 at 11:07 PM

    Well you got it perfect, but for whatever reason it's not working when I input it.  And I did add the additional T-shirt.  I keep getting the same issue so there must be something else I'm missing.  I appreciate the help, but at this point I have to move on...need to get this form active.  Thanks for trying.

  • Profile Image
    JotForm Support

    Answered by Welvin on April 05, 2015 at 09:27 AM

    For this form: http://www.jotform.us/form/50898944664171.

    You have to copy/paste the full codes given by my colleague. I've fixed it for you. Kindly check now.

    Thanks

  • Profile Image

    Answered by AATR on April 05, 2015 at 02:58 PM

    Wow okay I'm impressed.  I thought I tired that, but obviously not because that looks great.  Only one question, how do I get the "Separate T-Shirt Available for Purchase" to line up in the middle like the other 4?

    I've honestly been trying to figure it out, but I don't want to mess up what already looks beautiful.  Thanks by the way.

  • Profile Image
    JotForm Support

    Answered by jonathan on April 05, 2015 at 04:26 PM

    You meant like this...

     

    I made the necessary adjustment on your jotform http://www.jotform.us/form/50898944664171

    Please check if this how you meant it.

    Let us know if you need further assistance.

    Thanks.

  • Profile Image

    Answered by AATR on April 06, 2015 at 01:10 AM

    Perfect!  Love it, y'all rock!  Thanks to everyone that has helped.

  • Profile Image
    JotForm Support

    Answered by Charlie on April 06, 2015 at 03:05 AM

    In behalf of all my colleagues that helped you, you're most welcome.

    If you needed any assistance again, please do not hesitate to contact us here in the forum.

    Kindest regards.

  • Profile Image

    Answered by AATR on April 10, 2015 at 06:21 PM

    Thought I was going to be okay, but I had to add some items for purchase which of course messed up the alignment.  I did try and fix it, but have been unsuccessful in doing so.  I put the form back to its original state and it does have my added items saved.  If you could help me out one more time and see what I'm doing wrong that would be greatly appreciated because the form is going live tonight on our website.  Thanks again 

  • Profile Image
    JotForm Support

    Answered by Mike on April 10, 2015 at 06:58 PM

    You form #50997157233159 (Clone of Appalachian Toyota Round-Up Event Registration) has some styling errors, it shows the whole Form Designer's CSS.

    I would like to recommend you to create a new clone of the form #50898944664171 (Appalachian Toyota Round-Up Event Registration). Then, add your new products, so we will be able to look into the CSS.

  • Profile Image

    Answered by AATR on April 10, 2015 at 07:30 PM

    http://form.jotform.us/form/50998002668161

    Here is the cloned form with added products.  Thank you.

  • Profile Image

    Answered by AATR on April 10, 2015 at 09:43 PM

    Running out of time, so I'm going back in and trying to fix it.  I'm not too familiar with using part of this code which is why I needed the help.

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

    width: 609px;

    }

    #cid_36 > span:nth-child(10), 

    #cid_36 > span:nth-child(24),

    #cid_36 > span:nth-child(28),

    #cid_36 > span:nth-child(30) {

  • Profile Image

    Answered by AATR on April 10, 2015 at 10:53 PM

    If someone could please help I'm in a bit of bind and need a quick solution, if I need to pay for the form I'll do it.  We're paying for it soon anyway.  Had plans to go live on the website tonight, but because this is taking so long, looks like an all righter or my worse fear not happening.

    I've all but figured my above problem which I have yet to see a response for.  So, if someone could double check my coding it would be greatly appreciated. Thank you

     

    For whatever reason, I can't get the "free" to go away on my products.  Please please please help.

    This is the form I'm using

    http://www.jotform.us/AATR/regis

     

     

  • Profile Image

    Answered by AATR on April 10, 2015 at 11:31 PM

    Never-mind I got it, thanks anyway.