Configurable List - Pre-populated fields

  • Profile Image
    sstrawbridge
    Asked on January 30, 2018 at 12:31 PM

    Hello,

    I want to use the Configurable List widget but I need to have several rows already pre-populated with different information.

    For example:

    Row 1: Name1     name1@email.com    123-456-7890

    Row 2: Name2     name2@email.com    234-567-8901

    + Click to add more

     

    Is there a way to do this?

    https://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget

    Thanks in advance.

  • Profile Image
    Marvih
    Answered on January 30, 2018 at 01:15 PM

    Let me do some test first, I will get back to you in a moment.

  • Profile Image
    Marvih
    Answered on January 30, 2018 at 02:00 PM

    I think this is possible using the "Static" field on your Configurable list.

    Name1 : static : name@name.com

    Phone: static : 1234-5678

    Name2 : static : name2@name.com

    Phone: static : 1313-2414

    But if you click the "+" sign or add button.

    those static fields will also be added. so the best way would be to add another configurable list for the inputs and remove the "+" button from the configurable list with Static value.


  • Profile Image
    sstrawbridge
    Answered on January 30, 2018 at 02:34 PM

    Thanks for looking into this.

    When I follow the above, I don't get the desired result (see image attached). Instead of Name 2 being in a separate row below, it is added as a new column, and repeats all the way down. 

    1517340500Screen Shot 2018-01-30 at 2.27

    I used names + emails as an example for this forum question, but ideally, I actually want each pre-populated item to have a checkbox, static text, and dropdown, because I need this functionality:


    [] ItemA 0-5 (dropdown indicated quantity)

    [] ItemB 0-2 (dropdown indicated quantity)

    [] ItemC 0-8 (dropdown indicated quantity)


    The user would check an item and then select the quantity. I didn't know if it was possible to fill in these values ahead of time in a Configurable list?

    I chose the Configurable list and not the input table because it has mixed input fields...

  • Profile Image
    Marvih
    Answered on January 30, 2018 at 03:37 PM

    Can you please tell us the complete sample format so we can try customizing a CSS code for it?

    What I think is you are looking for like.

    Name (static) Email (static)  Phone(static) Checkbox(item A user select) Dropdown(0-5)

    Name2 (static) Email (static)  Phone(static) Checkbox(item B user select) Dropdown(0-2)

    Name3 (static) Email (static)  Phone(static) Checkbox(item C user select) Dropdown(0-8)


    Please let us know if I misunderstood your request.

    Thank you.

  • Profile Image
    sstrawbridge
    Answered on January 30, 2018 at 04:05 PM

    Custom css? If you could, that would be amazing!

    Sorry to confuse you, but Name, Email, and Phone aren't needed. I am hoping to create one of the options below:

    1517346289Screen Shot 2018-01-30 at 3.50

    1517345830Screen Shot 2018-01-30 at 3.49

    Unfortunately, I can't share my form URL with you because of sensitive client information. Really appreciate the help though.

  • Profile Image
    Marvih
    Answered on January 30, 2018 at 04:27 PM

    Thank you for the cooperation, I understand if you can't share more information with us.

    But I can suggest that you use Purchase Order instead. This would be perfect and will be easier to configure based on what you need.

    Please check this form using the Purchase Orderhttps://form.jotform.com/80296346044962.

    If that's good for you I can teach you how I did it, or you can also clone that form so you can personally inspect it.
    https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL


    Looking forward to your reply.

    Thank you.

  • Profile Image
    sstrawbridge
    Answered on January 30, 2018 at 04:32 PM

    Yes! That is exactly what I need! Do you mind briefly explaining your logic behind that sample form you built?

  • Profile Image
    Marvih
    Answered on January 30, 2018 at 04:48 PM

    No problem, here is how you set it up.

    First is you need to add the Purchase Order widget to your form (found in the Payments tab).

    1517348374787.png

    After that go to the Payment Settings and under Additional Settings set "Show Total Price on The Form" to NO.

    1517348469788.png

    Hit CONTINUE button and Add your products/items.

    1517348590789.png

    In the Quantity Selector select Dropdown in the "Show Quantity on the form as" and set your Desired "Range" in the Dropdown.

    1517348613790.png

    Be sure to hit SAVE QUANTITY and SAVE PRODUCT to add it correctly.

    Lastly, inject this custom CSS code to your custom CSS Fieldhttps://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    .form-label.form-label-auto {

                  display: block;

          float: none;

          text-align: left;

          width: 100%;

              }

    .form-product-item .form-sub-label-container {

    margin: 3px 9px 1px 6px !important;

    position: absolute;

    top: 0px;

      }

    .form-product-item .form-checkbox {vertical-align: middle !important;margin-top: -3px !important;}

    .form-product-item br {display: none !important;}

    .form-product-item {width: 316px !important;margin-bottom: 1px !important;

    height: 25px !important;

    }

    .form-payment-total b > span > span > span, .form-product-details b > span > span{

    visibility: hidden;  

      }

    And that's it. Please let me know if you need some clarification or have some problem.

     

  • Profile Image
    sstrawbridge
    Answered on January 31, 2018 at 11:22 AM

    Thank you so much! This is exactly what I need.

  • Profile Image
    Marvih
    Answered on January 31, 2018 at 12:24 PM

    No worries, let us know anytime you need help or have issues with your form.

  • Profile Image
    sstrawbridge
    Answered on March 26, 2018 at 02:45 PM

    Hi again,


    Purchase Order worked perfectly. Since our last discussion, I have added preview images and pre-set quantity amounts as per the customer's request. So far it looks like this:


    1522089834Screen Shot 2018-03-26 at 2.43


    However after further review, it was requested to have this question format in more than one page of my form. Right now, Jotform only lets me use "Purchase Order" once in my form.

    1522089729Screen Shot 2018-03-26 at 2.34

    Is there a way I can add another Purchase Order field?

  • Profile Image
    Richie_P
    Answered on March 26, 2018 at 04:14 PM

    Unfortunately, only 1 payment integration per form is allowed. However, you can use IFrame code to call a form with another payment method.

    Here is a guide -How-to-Create-a-Basic-Multiple-Payment-Form


    Please let us know if we can be of further assistance.

  • Profile Image
    sstrawbridge
    Answered on April 03, 2018 at 01:28 PM

    Thank you for your reply. I've embedded a second form and am now just looking to expand the width and height of the iframe so no scroll bars appear. Is this possible? I'd appreciate the help.
  • Profile Image
    Jim_R
    Answered on April 03, 2018 at 02:30 PM

    Hello @sstrawbridge - To avoid confusion, I moved your last post to a separate thread:

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

    I'll reply to you there shortly.