How to combine text field and checkbox

  • Community_Coops
    Asked on August 1, 2017 at 11:29 PM

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

    How to combine text field and checkbox Image 1 Screenshot 20

    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

  • liyam
    Replied on August 2, 2017 at 3: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.

     
    How to combine text field and checkbox Image 1 Screenshot 100
     
    There are many features when you use the Multi-Type Columns:

    1. You can change the row and column names.
     
    How to combine text field and checkbox Image 2 Screenshot 111
     
    Additionally, you can set the row and column names by clicking on the gear icon.
     
    How to combine text field and checkbox Image 3 Screenshot 122
     
    2. You can add rows and any type of columns by clicking on the add row and add column.
     
    How to combine text field and checkbox Image 4 Screenshot 133
    3. You can set options for dropdown type by clicking on the downwards arrow.
     
    How to combine text field and checkbox Image 5 Screenshot 144
     
    Enter your dropdown options.Click on the Save Changes.
     
    How to combine text field and checkbox Image 6 Screenshot 155
     
    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.
     
    How to combine text field and checkbox Image 7 Screenshot 166
     
    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.
     
    How to combine text field and checkbox Image 8 Screenshot 177
     
    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:

    How to combine text field and checkbox Image 9 Screenshot 188

    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.

  • Community_Coops
    Replied on August 2, 2017 at 1:13 PM

    Actually that's the one I'm using currently, but I have some problems:

    1. COLUMN 1 (Item 1, Item 2, Item 3): Could not find how to add TEXT only (without a field). The only way I found was using a dropdown, but my client didn't like it. So, how to add text only in that column?

    2. COLUMN 3: Initially I used checkboxes, but for any reason if you place a check mark, the email I receive does not show checkmarked selections. So I had to use a dropdown with a yes/no question, but my client didn't like that option. Why the email does not show selected checkmarks? I still don't know!

    Could you help me with that please? Here is my current form:

    http://www.communitycoops.com/bulk-fuels-order-form.html

    Thanks!

    Juan

  • Community_Coops
    Replied on August 2, 2017 at 1: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

  • Community_Coops
    Replied on August 2, 2017 at 2: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:

    How to combine text field and checkbox Image 1 Screenshot 20

    Again, thanks for any help!

    Juan

  • Community_Coops
    Replied on August 2, 2017 at 4: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:

    How to combine text field and checkbox Image 1 Screenshot 20

    WHY?

    Juan

  • Mike_G JotForm Support
    Replied on August 2, 2017 at 5: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.

    How to combine text field and checkbox Image 1 Screenshot 30

    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:

    How to combine text field and checkbox Image 2 Screenshot 41

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

  • liyam
    Replied on August 3, 2017 at 2: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!

  • Nur Karabağ JotForm Developer
    Replied on June 11, 2019 at 4: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.

     
    How to combine text field and checkbox Image 1 Screenshot 90
     
    There are many features when you use the Multi-Type Columns:

    1. You can change the row and column names.
     
    How to combine text field and checkbox Image 2 Screenshot 101
     
    Additionally, you can set the row and column names by clicking on the gear icon.
     
    How to combine text field and checkbox Image 3 Screenshot 112
     
    2. You can add rows and any type of columns by clicking on the add row and add column.
     
    How to combine text field and checkbox Image 4 Screenshot 123
    3. You can set options for dropdown type by clicking on the downwards arrow.
     
    How to combine text field and checkbox Image 5 Screenshot 134
     
    Enter your dropdown options.Click on the Save Changes.
     
    How to combine text field and checkbox Image 6 Screenshot 145
     
    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.
     
    How to combine text field and checkbox Image 7 Screenshot 156
     
    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.
     
    How to combine text field and checkbox Image 8 Screenshot 167
     
    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.