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

    CSS modifications of the jotform

    Asked by dbcarr34 on December 25, 2014 at 02:42 PM

    P.S.  I don't know CSS and your awesome team helped me out with building this page.  I have some modifications that need to be done and will need to do so in the future.  I there is someone on your team that I could hire to make changes when I need to, I'd sure be interested in discussing this.  Attached is the latest draft of changes I need done.  I just put an add on Elance for this purpose, yet I'd prefer to work with your team.

    CSS payment processing
  • Profile Image

    Answered by Ben on December 25, 2014 at 03:12 PM

    Hi Dennis,

    We can help you set it up properly, or you can decide to hire someone.

    Looking at the screenshot I believe that most of the CSS code would be removed if not all, so it might be best to have them removed completely, so that you can easily make the changes in the future as well.

    Here are few guides that would help with that, also we are here to assist along the way :)

    How to clone an existing form from your account?

    Setting Up Your First Order Form

    How to pass a calculation to a payment field

    As mentioned, this would help you to make the future updates without the use of CSS, but only relaying on our Form Builder tools.

    Do let us know if you have any further questions.

    Best Regards,
    Ben

  • Profile Image

    Answered by dbcarr34 on December 25, 2014 at 11:41 PM

    Hello Ben,

    I was able to clear CSS and make the current modifications needed.  I am wondering if you might be able to get rid of the check boxes on the items with "*" .

    http://www.jotform.com//?formID=43453806581862

    I did see a forum on this and understand that it can be done with CSS.  I also know where the css code goes (the box).  However, with lack of css skill I don't know how to determine which line the string of code goes onto for each entry.  Maybe if you send a detailed screen shot I could figure it out.  

    Here is the link to the question in the forum that discussed this, yet I still am stuck.

    http://www.jotform.com/answers/407232-How-do-I-delete-the-checkboxes-from-a-product-order-form

  • Profile Image
    JotForm Support

    Answered by ashwin_d on December 26, 2014 at 12:23 AM

    Hello dbcarr34,

    Please inject the following custom css code in your form to hide the specific check boxes of your payment question:

    input#input_48_1018, #input_48_1021, #input_48_1039, #input_48_1019, #input_48_1027, #input_48_1025, #input_48_1028 {

    display: none;

    }

    The following guide should help you inject custom css code in your form:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    I will suggest you to take a look at the following guide as well on how to apply a custom css to a particular form field:  http://www.jotform.com/help/176-How-to-apply-custom-CSS-to-a-particular-field 

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by dbcarr34 on December 26, 2014 at 04:38 PM

    Hello Ben and Ashwin,

    Thanks so much for the help.  I noticed someone took care of many of the check mark boxes for me. Based on your instruction, I was able to get rid of the 'free' notations at the end of the sentences.

    Not knowing any better way, you'll notice I put asteriks " * " as bullet points on the items of interest underneath the purchase options.  I am not too convinces this looks very appealing; thoughts?  My guess is that there might be a better way . . . bullets points?  Let me know what you think and any advise on this.

    Thanks,

    Dennis 

  • Profile Image

    Answered by Ben on December 26, 2014 at 05:10 PM

    Hi Dennis,

    You are welcome.

    Now in regards to the * as a bullet point

    I went to your website https://www.mobilewirx.com/form/ and I am not quite sure, but I think that that is an older version of the jotform?

    In either case you would be able change the items by for example creating checkboxes

    .form-product-item.hover-product-item > label {
        display: list-item;
        list-style: square inside none;
    }

    or bullets

    .form-product-item.hover-product-item > label {
        display: list-item;
        list-style: disc inside none;
    }

    I think that checkboxes look a nit nicer, but you should take a look at what feels more like you and go with it.

    Do let us know if you have any further questions.

    Best Regards,
    Ben

  • Profile Image

    Answered by dbcarr34 on December 26, 2014 at 06:31 PM

    I injected the css for square checkboxes (btw, I like these).  As expected, all items--even the ones I don't want these checkboxes associated with have them.  How do I assign the lower items and not the higher ones that already have checkboxes?  

    Using Ashwin's example above and your code string, here is how I think I might do this:

    label#label_48_1018, #label_48_1021, #label_48_1039, #label_48_1019, #label_48_1027, #label_48_1025, #label_48_1028 {

    display: list-item;
    list-style: square inside none;
    }

    Thank you,

    Dennis

  • Profile Image
    JotForm Support

    Answered by Charlie on December 26, 2014 at 08:57 PM

    Hi,

    You're on the right idea, you just need to properly assign them. I think this is the code that your looking for:

    Before:

    .form-product-item.hover-product-item > label{

        display : list-item;

        list-style : square inside none;

    }

    After:

    .form-product-item.hover-product-item > label[for=input_48_1011], label[for=input_48_1012], label[for=input_48_1018], label[for=input_48_1021], label[for=input_48_1039], label[for=input_48_1019], label[for=input_48_1027], label[for=input_48_1025], label[for=input_48_1028] {

        display : list-item;

        list-style : square inside none;

    }

    What you want is to change the bullet style of the items (those that do not have checkboxes), right? Please check if this is what it should look like: http://www.jotform.com/form/43598272638973. As mentioned, you could clone the form and see the settings there. Or just add or edit the code in the Form Designer.

    Just a quick tip on how I identify the selected labels.

    Let us know if the code works. We'll wait for your response.

    Thank you.