How to combine text field and checkbox

  • Profile Image
    Community_Coops
    Asked on August 01, 2017 at 11:29 PM

    Hi, one of the questions in my contact form requires to combine TEXT FIELDS and CHECKBOXES like this:

    So users can select the amount of Gallons, or request a total fill for each product.

    ¿How can I do that?

    Thanks in advance!

    Juan

  • Profile Image
    liyam
    Answered on August 02, 2017 at 03:29 AM

    Hello Juan,

    I suggest using a Configurable list widget to handle this. This way, you have control on the columns of your form whether you wish to use a checkbox, radio button, textbox, or text area. Here is a sample screenshot of having a similar mix:

    Please check this guide to know more about this widget and how to configure it: https://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget

    If you need assistance, please let us know.

  • Profile Image
    Community_Coops
    Answered on August 02, 2017 at 01:30 PM

    Here it is:

    https://form.jotformz.com/72127910266656

    1. How to add one line per entry? I have 7 lines:

    #1 FUEL OIL
    #2 FUEL OIL
    FIELD MASTER B10
    ROAD MASTER B10
    N/L FARM GAS
    N/L GASOLINE (87 Octane)
    PREMIUM GASOLINE (91 Octane)

    2. How to add more space between columns?

    3. If you mark a checkbox, the info of the submitted form that I get in my email does not show any checkbox selection.

    I'd appreciate any help on this!

    Juan

  • Profile Image
    Community_Coops
    Answered on August 02, 2017 at 02:51 PM

    Hi, I did a sample of what I need:

    <form name="form1" method="post" action="">
      <p>Required Quantity</p>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="280">&nbsp;</td>
          <td width="200" align="center">GALLONS</td>
          <td width="100" align="center">FILL</td>
        </tr>
        <tr>
          <td>#1 FUEL OIL</td>
          <td align="center"><input type="text" name="textfield"></td>
          <td align="center"><input type="checkbox" name="checkbox" value="checkbox"></td>
        </tr>
        <tr>
          <td>#2 FUEL OIL</td>
          <td align="center"><input type="text" name="textfield2"></td>
          <td align="center"><input type="checkbox" name="checkbox2" value="checkbox"></td>
        </tr>
        <tr>
          <td>FIELD MASTER B10</td>
          <td align="center"><input type="text" name="textfield3"></td>
          <td align="center"><input type="checkbox" name="checkbox3" value="checkbox"></td>
        </tr>
        <tr>
          <td>ROAD MASTER B10</td>
          <td align="center"><input type="text" name="textfield4"></td>
          <td align="center"><input type="checkbox" name="checkbox4" value="checkbox"></td>
        </tr>
        <tr>
          <td>N/L FARM GAS</td>
          <td align="center"><input type="text" name="textfield5"></td>
          <td align="center"><input type="checkbox" name="checkbox5" value="checkbox"></td>
        </tr>
        <tr>
          <td>N/L GASOLINE (87 Octane)</td>
          <td align="center"><input type="text" name="textfield6"></td>
          <td align="center"><input type="checkbox" name="checkbox6" value="checkbox"></td>
        </tr>
        <tr>
          <td>PREMIUM GASOLINE (91 Octane)</td>
          <td align="center"><input type="text" name="textfield7"></td>
          <td align="center"><input type="checkbox" name="checkbox7" value="checkbox"></td>
        </tr>
      </table>
    </form>

    And this is the way it looks:

    Again, thanks for any help!

    Juan

  • Profile Image
    Community_Coops
    Answered on August 02, 2017 at 04:43 PM

    Hi, I found a solution... The code for all is:

    Gallons : text :
    Fill : checkbox :

    Since I couldn't find how to BREAK LINES, I did 7 entries. All are the same as the above, except for the title, so each question has the same code but different title. It looks this way:

    https://form.jotformz.com/72127910266656

    But as I mentioned before, when you mark checkboxes, they don't as marked in the email. See:

    WHY?

    Juan

  • Profile Image
    Mike_G
    Answered on August 02, 2017 at 05:17 PM

    Thank you for the information you provided above. The reason why the checkbox appears to be blank in the email and I believe also on the submission page, is because you have not set an option label for the checkbox.

    Fill : checkbox :

    As indicated in this guide — How-to-Set-Up-the-Configurable-List-Widget, options for checkboxes in the Configurable List widget should be declared.

    What I suggest is set a field label option, but hide it using CSS codes that can be added in the widget itself — How-to-Inject-CSS-Codes-to-Widgets

    Here's an example:

    https://form.jotformpro.com/72136995800966

    I have added the following CSS codes below to each of the Configurable List widgets in the form.

    .checkbox input {

        visibility: visible;

    }

    .checkbox label {

        visibility: hidden;

    }

    You can either use the word "checked" or just the symbol for "check" as a checkbox option label.

    Fill : checkbox : Checked

    Fill : checkbox : 

    As for the result:

    I hope this helps. If you have other questions or concerns, please feel free to contact us again anytime.

  • Profile Image
     
    Answered on August 02, 2017 at 11:44 PM

    IT WORKS!!!  :)

    ...After having been trying for several hours, I was starting to lose hope!

    Thank you very much!!!

    Juan

  • Profile Image
    liyam
    Answered on August 03, 2017 at 02:06 AM

    I'm glad Mike_G's answer resolved your concern, Juan. Thanks for keeping us posted :)

    If you have other questions, please do not hesitate to get back to us. 

    All the best!