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

    UPDATE (June 11, 2019): The input table field has a new type called Multi-Type Columns. You will now be able to set different type for each column such as Single Choice, Checkbox, Textbox, and Dropdown.

     
     
    There are many features when you use the Multi-Type Columns:

    1. You can change the row and column names.
     
     
    Additionally, you can set the row and column names by clicking on the gear icon.
     
     
    2. You can add rows and any type of columns by clicking on the add row and add column.
     
    3. You can set options for dropdown type by clicking on the downwards arrow.
     
     
    Enter your dropdown options.Click on the Save Changes.
     
     
    4. You can delete the rows by clicking on the cross (X) that exists for each row and you can delete the rows by clicking on the downwards arrow that exists for each column.
     
     
    5. You can change the types of each column to Single Choice, Checkbox, Textbox, and Dropdown by clicking on the downwards arrow that exists for each column.
     
     
    You can clone this demo form to your account: https://form.jotform.com/nelly/multitype-input-table-form
     
    You can look at this guide to understand how to clone an existing form from a URL: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL
     
     
    If you have any question, please let us know below.

     

     

    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
    Michael
    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
    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!

  • Profile Image
    nelly
    Answered on June 11, 2019 at 04:12 AM

    UPDATE: The input table field has a new type called Multi-Type Columns. You will now be able to set different type for each column such as Single Choice, Checkbox, Textbox, and Dropdown.

     
     
    There are many features when you use the Multi-Type Columns:

    1. You can change the row and column names.
     
     
    Additionally, you can set the row and column names by clicking on the gear icon.
     
     
    2. You can add rows and any type of columns by clicking on the add row and add column.
     
    3. You can set options for dropdown type by clicking on the downwards arrow.
     
     
    Enter your dropdown options.Click on the Save Changes.
     
     
    4. You can delete the rows by clicking on the cross (X) that exists for each row and you can delete the rows by clicking on the downwards arrow that exists for each column.
     
     
    5. You can change the types of each column to Single Choice, Checkbox, Textbox, and Dropdown by clicking on the downwards arrow that exists for each column.
     
     
    You can clone this demo form to your account: https://form.jotform.com/nelly/multitype-input-table-form
     
    You can look at this guide to understand how to clone an existing form from a URL: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL
     
     
    If you have any question, please let us know below.