CSS modifications of the jotform

  • dbcarr34
    Asked on December 25, 2014 at 2: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 modifications of the jotform Image 1 Screenshot 20

  • Ben
    Replied on December 25, 2014 at 3: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

  • dbcarr34
    Replied 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

  • Ashwin JotForm Support
    Replied 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!

  • dbcarr34
    Replied on December 26, 2014 at 4: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 

  • Ben
    Replied on December 26, 2014 at 5: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

  • dbcarr34
    Replied on December 26, 2014 at 6: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

  • Charlie
    Replied on December 26, 2014 at 8: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.

    CSS modifications of the jotform Image 1 Screenshot 20

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

    Thank you.