Add Categories, hide elements , align products closer on Purchase Order

  • Profile Image
    kimremme
    Asked on July 12, 2012 at 06:16 AM

    Hi,

    I tryed a solution i found on the forum but it did not work, it was to add a product that cost 0.00 and then add this code inn the injected CSS:

    /* Drops list of products below "Products" label */
    .form-input {
    padding-top:30px;
    }

    /* moves products closer to each other */
    .form-product-item {
    padding-top:0;
    padding-bottom:0;
    }

    /* positions the product selector */
    .form-product-item .form-sub-label-container {
    top:-4px;
    left:200px;
    position:absolute;
    }

    /* hides the word "Quantity" */
    select.form-dropdown + label {
    display:none;
    }

    /* styles categories */
    label[for="input_3_1008"],
    label[for="input_3_1007"] {
    margin-left:-30px;
    color:#777;
    font-weight:bold;
    }

    /* hides all elements of the categories except label */
    #input_3_1008,
    #input_3_1007,
    label[for="input_3_1008"] span,
    label[for="input_3_1007"] span,
    select#input_3_quantity_1008_0,
    select#input_3_quantity_1007_0 {
    display:none;
    }

     

    Is there a other way to do this, and can a Purchase Order go over several pages?

  • Profile Image
    NeilVicente
    Answered on July 12, 2012 at 02:21 PM

    Can you please specify what exactly it is that you want to achieve with your form?

    Do you want to add some sort of a 'heading' to categorize the products you're selling?

    can a Purchase Order go over several pages?

    No, I don't think a purchase order field can have several pages.

  • Profile Image
    NeilVicente
    Answered on July 12, 2012 at 06:56 PM

    Is this form what you had in mind?

    http://form.jotform.me/form/21936166933460?

  • Profile Image
    kimremme
    Answered on July 13, 2012 at 02:54 AM

    Hi,
    Yes its like that i need, so how can i do that?

  • Profile Image
    NeilVicente
    Answered on July 13, 2012 at 11:57 AM

    To achieve the same effect:

    1.  Add items with a price of "0" (Free) to your Purchase Order. These will serve as the product category titles.

    2.  Preview your form (Open in new tab) then view the form's source [Right-click > View Source]

    3.  While viewing the page source, find the title of the 'Free' items you have added

    4.  Get the numbers in the for value of the label tag above the title text

    For example:

    In my sample form, the numbers are 1008, 1009 and 1010.

    5. Copy those numbers then use it in the CSS guide below (to be injected to your form):

    input[id*="input number"]
    {
    display:none;
    }
    input[id*="input number"] + label > .form-product-details
    {
    display:none;
    }
    label[for*="input number"]
    {
    font-weight: bold;
    text-decoration: underline;
    }

    If you have multiple product titles, simply duplicate the selectors above (in bold), then separate each with a comma.

    For example:

    input[id*="1008"], input[id*="1009"], input[id*="1010"]
    {
    display:none;
    }
    input[id*="1008"] + label > .form-product-details, input[id*="1009"] + label > .form-product-details, input[id*="1010"] + label > .form-product-details
    {
    display:none;
    }
    label[for*="1008"],label[for*="1009"],label[for*="1010"]
    {
    font-weight: bold;
    text-decoration: underline;
    }

    6.  Copy your finalized CSS code then inject it to your form.

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

  • Profile Image
    kimremme
    Answered on July 17, 2012 at 05:02 AM

    Thank you so mutch, i now got it to work :)

  • Profile Image
    pinoytech
    Answered on July 17, 2012 at 08:55 AM

    On behalf of my colleague Neil, you are welcome! If you need our assistance again, please don't hesitate to contact us anytime.

    Have a great day!

  • Profile Image
    alan
    Answered on July 29, 2012 at 02:10 PM

    this is an excellent tutorial. i would like to take this one step further and have catagories & sub Catagories.

     

    therefor i would like to make the main catagories font larger. what would i add add to the end to increase font size?

     

    also what would i require to inject or add to make only the main catagories displayed and sub catagories etc hidden like a drop down menu when main is selected

  • Profile Image
    abajan
    Answered on July 29, 2012 at 05:40 PM

    Alan

    Please see my response in the other thread.


    Wayne

  • Profile Image
    jonathan
    Answered on July 29, 2012 at 06:22 PM

    Hi,

    I also made some expanded version of categorizing (sub-categorizing) the pruchase order form of NeilVicente by using form source code embed and adding the collapsable field.

    You can check the demo form here. Feel free to view how the source code was 'move' to make the effects.

    Hope this help in anyway.

    Thanks.

     

  • Profile Image
    alanjellyjaw
    Answered on July 30, 2012 at 03:05 PM

    This is totaly golden info guys.

     

    I cant get into other thread to see response. i just get stuck in a login screen loop.

    perhaps someone can copy and paste it her (would all be in 1 place then)

     

    the form you posted Jonathan is exactly what i am looking for. i will take a look at the code but do you have a tutorial like the one above to inject into forms to make it work?

    think it would be faster if you gave some pointers as to how to add it and what code to add or "move".

     

    great forum though guys. keep up te good work

  • Profile Image
    jonathan
    Answered on July 30, 2012 at 06:29 PM

    @alanjellyjaw

    Hi, sorry I have not created a "tutorial" yet included in our JotForm Guides. But I will, when I have the chance.

    For the meantime, for easy disection of the page source code, I included some "html comments" in between that explains where I 'move' the codes/fields to have the effect of categorize purchase order form.

    You can try copying everything on to your end for your own use. Try this steps:

    1. This the original form http://jotform.me/form/22107154894454

    2. Clone it and adjust according to your needs (change email alert, product type and so on...)

    3. After you have the form, you can get its "source code" embed. (see image below on how to) 

    My form source code embed look like this http://pastie.org/4361681

    You can paste you own code to any editor (notepad will also do) if you wanted to review it handily later on.

     

    3. Because you may want to compare the original form source code vs. the now 'move' code in the demo page/form .

    4. Using Chrome browser, I can view the demo form source code by righ-clicking on the page and select view page source.

    5. If you view the page source of the demo page/form, you will notice the html comments included in the code that explains what were 'move' to have the product categorize effect.

     

    6. You can practice this in your own website page using the source code embed of the form.

     

    I hope I am able to convey the details understandable enough for you. I will try to come up with a proper tutorial also in our JotForm guides.

    Please feel free to contact us anytime should you need further assistance.

    Thanks.

  • Profile Image
    alanjellyjaw
    Answered on August 03, 2012 at 01:46 PM

    Great info and im sure i can do what i need to do with what you have said.

     

    what about making the sub catagories collapsable also? can this be done? collapsable field within a collapsable field? now that would be something which would tidy the form even further.

     

    anyway back to another question or two

     

    1. how do i inject the css when i finish altering it. do i just copy whole form html and inject?

     

    2. how do i add more than 1 payment type to end of form, ie pay cash on delivery and also option to pay via paypal etc

     

    3. is it possible to make the quantity option for an item be displayed next to the item instead of under it.

     

    if i get answers to all these then i am sure i can create the perfect form.

     

    thanks in advance.

  • Profile Image
    alanjellyjaw
    Answered on August 03, 2012 at 02:50 PM

    Ok been playing around with code and it great, just one other question.

     

    how do increse the size of the checkbox?

     

    thanks again and hope for answers to these questions and i will be rockin!

  • Profile Image
    NeilVicente
    Answered on August 03, 2012 at 05:52 PM

    @alanjellyjaw

    Sadly, size of checkboxes cannot be increased with simple CSS.

    You can probably use this JavaScript and CSS solution, but it works in a way that the check box and its state (checked/unchecked) are replaced with different images.

    Since you are using my colleague's solution (modifying the form source codes), the above solution would probably be applicable to your form.

  • Profile Image
    alanjellyjaw
    Answered on August 15, 2012 at 05:11 PM

    hink i have all the pieces now to create the form i am looking for.

     

    just another quick question or 2.

    1. how do i add more than 1 payment type to end of form, ie pay cash on delivery and also option to pay via paypal etc.

     

    2. Is it possible to make the make the sub catagories collapsable too? that would be awesome!

     

    3. Is it possible to make the quantity option hidden untill an item is selected.

     

    If above is possible then It will be PERFECT!

     

    Thanks in advance

  • Profile Image
    jeanettebmz
    Answered on August 15, 2012 at 08:13 PM

    To answer in the same order

    1. You can find out how to have more than one payment integration into a single form following this guide Jonathan made some time ago. It is based in the multiple payment form (or Purchase Order Form ) that you can find in our Form Templates Gallery

    2. I think it is possible, but it might be accomplished by modifying the source code , as Jonathan suggested above. His example might be a good guide

    3. Unfortunately , Conditional logics cannot be applied to elements of a Payment integration

  • Profile Image
    abajan
    Answered on August 15, 2012 at 08:32 PM

    Hi Alan

    RE: No. 3

    Since you are embedding a copy of the form's full source, I think a script can be added to control the visibility of the quantity selectors. I'll run some tests on my end and get back to you.


    Wayne

  • Profile Image
    jeanettebmz
    Answered on August 15, 2012 at 08:37 PM

    Good point Wayne, I  did not have in mind the source code embed option

     

    Cheers!


  • Profile Image
    abajan
    Answered on August 16, 2012 at 12:36 AM

    Alan,

    Here's a demo of a form that shows the quantity selectors only when the relevant items are selected. I believe that just a few adjustments to my script and your code would be required to make this solution work with your form but I'll need to view your web page's source so that I can properly advise you on what to do.

    As to the second query in your last post,, my colleagues are probably better able to advise you on those.

    Incidentally, my form doesn't submit anywhere because that functionality is irrelevant to the demo. 


    Wayne

  • Profile Image
    alanjellyjaw
    Answered on August 21, 2012 at 05:02 PM

    Thanks for the replies. can i ask if its possible as im using the embed source code to add the items with different prices to a dropdown box rather than have them all sat beside checkboxes.

    eg in the sample form there is sub-meals and under that there is fried chicken and salisbury steak.

    is it possible to put these 2 items inside a dropdown and what ever is selected then gets added to the bill instead of having them beside checkboxes

     

    thanks this would be great.

  • Profile Image
    jonathan
    Answered on August 21, 2012 at 07:21 PM

    @alanjellyjaw

    Hi, I am sorry, but it seems this is not possible anymore by just using the 'hack' form. As it is already, we have almost totally disconfigured the form using the source code just to achieve the previous goal.

    Unfortunatelly, we could not use the Show/Hide condition on the purchase order field. It could have been ideal to use it to give the illusion of show and hide the sub-meals every time a main category is clicked on.

    What I can suggest though if you need total customization of the form's code is to check on JotForm License Application itself. The application will provide the full freedom to design and use the full source code.

    Hope this help. Please inform us if you have further inquiry.

    Thanks.

  • Profile Image
    alanjellyjaw
    Answered on August 22, 2012 at 09:07 AM

    hi and thanks for all the help but it seems that what i want to acheive is not possible using the payment wizard, however upon some further thinking i have decided to come at this from a different angle.

     

    I dont require payment integration with paypal etc as its a cash on delivery form i was trying to build anyway so i guess i can just create the form with all the catagories in the normal way with custom options dropdowns containing the different options, prices etc.

    The only thing that will be different is there will be no running total displayed at the bottom.

    So 1 question regarding this. is it possible to add something to grab the prices and display the running total at the bottom as this would be fine for what i need it for

  • Profile Image
    abajan
    Answered on August 22, 2012 at 10:28 AM

    @alanjellyjaw

    Yes, that can be done but since the inclusion of a script would be required to perform the calculation of the total and population of the element that would contain that total, you would once again need to use the full source code option.

    This form demonstrates somewhat similar functionality, except that multiplication is involved instead of addition. However, the basic concept is the same.

    Here's what to do:

    Edit your form to include the drop downs and let me know when it's done. I'll then provide the script necessary to perform the aforementioned tasks.

  • Profile Image
    alanjellyjaw
    Answered on August 22, 2012 at 12:19 PM

    @Wayne, thanks so much for your kind offer.

     

    I will get to work on the form, it may take me a while as will contain whole takeaway menu.

    Once i get it done i will get back in touch. do i just post again on here?

     

    I wont be embedding the form anywhere. i will be hosting the complete html form code in dropbox and calling it from there so it will work straight out the box if you add the running total to it.

     

    This is a great forum and i will be happy to buy you a beer for your help.

     

    Just to confirm the only restrictions on a jotform are the amount of submissions right. this will allow me to add everything and test. i will be upgrading to a paid account once i get this form up and running anyway.

     

    Once again thanks for your support!

  • Profile Image
    abajan
    Answered on August 22, 2012 at 08:04 PM

    @alanjellyjaw

    To address your queries:

    I will get to work on the form, it may take me a while as will contain whole takeaway menu.

    That's quite alright. We'll be ready to help whenever you've completed the form. 

    Once i get it done i will get back in touch. do i just post again on here?

    Yes, that would be fine. If you don't want to expose the form's ID to the general forum, you can just provide its name and we'll know which it is by looking at the list of forms in your account.

    This is a great forum and i will be happy to buy you a beer for your help.

    Well, if you insist. Just post a photo of a mug full of beer and we'll stare at it and imagine what it would taste like. :)

    Just to confirm the only restrictions on a JotForm are the amount of submissions, right?

    Yes, pretty much. As per our Pricing Page, besides the restrictions on the number of submissions received per month, the amount of space availble for storage of uploaded files varies according to account type but that has become less of an issue with our recent addition of Filepicker.io integration. (If you have additional queries about account limits and Filepicker.io integration, please open a separate thread on each.)

    I will be upgrading to a paid account once I get this form up and running anyway.

    That would be super!

    Once again thanks for your support!

    On behalf of our Support Team, you're most welcome. It's always wonderful to receive appreciation for one's efforts.

  • Profile Image
    KerriOutFood544
    Answered on September 03, 2012 at 04:29 PM

    I find this very informative, but I am really confused!  @jonathan, if you do get a tutorial done I will definitely use it!  This is the exact form I want... I just can't figure all of this out.

  • Profile Image
    KerriOutFood544
    Answered on September 03, 2012 at 04:36 PM

    I find this very informative, but I am really confused!  @jonathan, if you do get a tutorial done I will definitely use it!  This is the exact form I want... I just can't figure all of this out.

  • Profile Image
    jeanettebmz
    Answered on September 03, 2012 at 06:22 PM

    @KerriOutFood544

    Can you please open a new thread so we can assist you better?


  • Profile Image
    alanjellyjaw
    Answered on September 11, 2012 at 05:30 PM

    HI.

    is there a guide to moving the html collapse fields yet?

     

    If not can someone maybe write a quick guide as to exactly what sections of the html to Move.

     

    eg.

    1. copy this section of html and move it here

    2. delete this part etc etc

     

    once i know exactly what sections to copy/paste/delete etc im sure i will have no problems in creating a useable form. not quite getting it from the comments in the view source.

     

    thanks

  • Profile Image
    jonathan
    Answered on September 11, 2012 at 05:40 PM

    @alanjellyjaw

    Hi, our apology on the delay of the 'guide', I am in the process of preparing to upload it now. Please give me maximum 3hours to post it. I will update the thread when I have it setup and available in our JotForm user's guide page.

    Thanks.

  • Profile Image
    alanjellyjaw
    Answered on September 12, 2012 at 02:41 PM

    Hi, been waiting but still no update.

     

    could really use a guide asap.

     

    how much longer will it be?

  • Profile Image
    NeilVicente
    Answered on September 12, 2012 at 04:12 PM

    @alanjellyjaw

    We're sorry for the delay. We're currently short on support manpower, and due to the increasing number of support tickets, our colleague Jonathan might have not found the time to finish the guide.

    In any case, I will notify him about your request.

  • Profile Image
    alanjellyjaw
    Answered on September 12, 2012 at 04:30 PM

    Cool. no problem, will have another go myself. i will wait for the guide if i cant crack it myself

  • Profile Image
    alanjellyjaw
    Answered on September 12, 2012 at 06:52 PM

    Had a good try tonight and think i have cracked it. thanks for all your help although i have javascript i will need to add to hide quantity options as per demo provided by Wayne above. also will require to hide custom option dropdown but this should just be a case of adapting Waynes script for quantity options to acheive this.

     

    will get form set out with html changes and get back in touch when done to obtain info to apply javascripts

     

    thanks again!!!!!!

  • Profile Image
    jonathan
    Answered on September 12, 2012 at 08:07 PM

    @alanjellyjaw

    Hi, my apology for the latency.

    Here are the guides:

    How-to-Have-a-Sub-Category-Groups-or-Sub-Labels-on-a-Purchase-Order-Form

    Using-Form-s-Source-Code-Collapse-Field-Add-Sub-Category-to-a-Purchase-Order-Form

    Please inform us should you require further assistance.

    Thanks.

  • Profile Image
    kelleherk
    Answered on February 15, 2017 at 01:19 PM

    How do I remove the price from the category label?  It is still showing as "Free".

     

  • Profile Image
    Kiran
    Answered on February 15, 2017 at 03:07 PM

    @kelleherk,

    Your question is moved to a separate thread and shall be addressed there shortly. Please follow the link below:

    https://www.jotform.com/answers/1067401

    Thank you!