Can Statamic forms have checkboxes that are clickable?

[IcreatedThisForMyGame]

Hello; I would like to be able to check a box instead of only having text fields in my Form. Is that possible? My YAML form looks like this (IDK if this code is relevant to the answer but I include it just in case)

sections:
main:
display: Main
fields:

handle: company
field:
input_type: text
antlers: false
display: Unternehmen
type: text
icon: text
listable: hidden
validate:

• required

...

And my HTML looks like this:

E-Mail-Adresse *

[duncanmcclean]

Yes, you can use more than just text inputs with forms. It should give you the option of others when editing your form's blueprint:

FYI: Please add three backticks (`) at the start & end of any code blocks you post - that'll give you code formatting.

[IcreatedThisForMyGame]

I have a follow-up Issue. When I create a new Form Field (Tested both radio + Text preset) and save it; the form on the website doesnt change at all (regardless of browser/cache). Do I also have to edit the HTML file or something?

[IcreatedThisForMyGame]

My company uses Statamic 3.2.18 by the way if that matters. I dont dare click update in fear of breaking everthing

[duncanmcclean]

It depends - what does your HTML file for the form currently look like? (remember about the backticks or it won't show)

[IcreatedThisForMyGame]

This is the resources/views/partials/shared/form.antlers.html ; But I think I see another Issue. I saved the Blueprint with new Fields in the Statamic Dashboard (its there if I reload), but the Forms file (resources/blueprints/forms/applications.yaml) does not update/change at all; which I assume it should? I guess its back to editing the Form via gitlab only; Now I would just need to know how Checkboxes look in the Form .yaml file I suppose.

Do you also maybe have any comment on how safe updating to a new Statamic version is and if that may Fix this Issue? I am just an Admin on the site; the Initial setup was done by someone else so I am no expert in this unfortunately. Thanks for your time!!

    <div class="relative max-w-xl mx-auto">
        <div class="text-center">
            <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
                {{ form_heading }}
            </h2>
            <p class="mt-4 text-lg leading-6 text-white">
                {{ form_subheading }}
            </p>
        </div>
        <div class="mt-12">
            {{ form:applications class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8"}}

            {{ if success }}
            <div class="bg-green-300 text-white p-2 text-center sm:col-span-2">
                Das Anmeldeformular wurde erfolgreich abgeschickt!
            </div>
            {{ else }}

            {{ if errors }}
            <div class="bg-red-300 text-white p-2 text-center sm:col-span-2">
                {{ errors }}
                Es ist ein Fehler aufgetreten<br>
                {{ /errors }}
            </div>
            {{ /if }}

            <div class="sm:col-span-2">
                <label for="company" class="block text-sm font-medium text-white">Name *</label>
                <div class="mt-1">
                    <input
                        class="py-3 px-4 block w-full shadow-sm focus:ring-bavarian-blue focus:border-bavarian-blue border-gray-300 rounded-md"
                        type="text" name="company" required>
                </div>

            </div>

            <div class="sm:col-span-2">
                <label for="employees" class="block text-sm font-medium text-white">Kommen Sie in Begleitung? *</label>
                <div class="mt-1">
                    <input
                        class="py-3 px-4 block w-full shadow-sm focus:ring-bavarian-blue focus:border-bavarian-blue border-gray-300 rounded-md"
                        type="text" name="employees">
                </div>

            </div>

            <div class="sm:col-span-2">
                <label for="email-address" class="block text-sm font-medium text-white">E-Mail-Adresse *</label>
                <div class="mt-1">
                    <input
                        class="py-3 px-4 block w-full shadow-sm focus:ring-bavarian-blue focus:border-bavarian-blue border-gray-300 rounded-md"
                        type="email" name="email-address" required>
                </div>

            </div>

            <div class="sm:col-span-2">
                <label for="phone-number" class="block text-sm font-medium text-white">Telefonnummer</label>
                <div class="mt-1">
                    <input
                        class="py-3 px-4 block w-full shadow-sm focus:ring-bavarian-blue focus:border-bavarian-blue border-gray-300 rounded-md"
                        type="tel" name="phone-number" >
                </div>

            </div>


            <div class="sm:col-span-2">
                <label for="description" class="block text-sm font-medium text-white">Gibt es noch etwas weiteres, dass Sie uns mitteilen möchten?</label>
                <div class="mt-1">
                    <textarea
                        class="py-3 px-4 block w-full shadow-sm focus:ring-bavarian-blue focus:border-bavarian-blue border-gray-300 rounded-md"
                        type="textarea" name="description" rows="3"></textarea>
                </div>

            </div>

            <div class="sm:col-span-2">
                <label for="question" class="block text-sm font-medium text-white">Nehmen Sie am gesamten Jubiläum Teil? *</label>
                <div class="mt-1">
                    <input
                        class="py-3 px-4 block w-full shadow-sm focus:ring-bavarian-blue focus:border-bavarian-blue border-gray-300 rounded-md"
                        type="text" name="question">
                </div>

            </div>
        

            <!-- file upload alt-->
            <!--
          <div class="sm:col-span-2">
            <label for="cover-photo" class="block text-sm font-medium text-white">
              Hier können Sie uns Dateien zur Projekt- oder Unternehmensbeschreibung zukommen lassen
            </label>
            <div class="mt-1 flex justify-center px-6 pt-5 pb-6 rounded-md bg-white">
              <div class="space-y-1 text-center">
                <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                  <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                <div class="flex text-sm text-gray-600">
                  <label for="file" class="relative cursor-pointer bg-white rounded-md font-medium text-black hover:text-black focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-bavarian-blue">
                    <span>Datei hochladen</span>
                    <input id="file" name="file" type="file" class="sr-only">
                  </label>
                  <p class="pl-1">oder hineinziehen</p>
                </div>
              </div>
            </div>
          </div>-->
            <!-- file upload alt-->

            <div class="sm:col-span-2 mt-10">
                <button type="submit"
                    class="w-full inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-extrabold text-white focus:outline-none focus:ring-2 focus:ring-offset-2 bg-yellow-400">
                    {{ form_button_text }}
                </button>
            </div>

            {{ /if }}

            {{ /form:applications }}
        </div>
    </div>
</div>
`

[IcreatedThisForMyGame]

I found this snippet online and I suppose I will just copy paste something like this into the yaml file + create a html section for it and pray :

  validation: strict
  fields:
    enabled:
        type: toggle
        label: Plugin status
        highlight: 1
        default: 1
        options:
            1: Enabled
            0: Disabled
        validate:
            type: bool

[duncanmcclean]

I'm not sure why your form blueprint's file isn't being saved (are you viewing in GitLab - are any changes making their way there?)

As you're hard coding all of the fields in the HTML, you'll need to add the HTML for the checkbox input, like this:

<input type="checkbox" id="checkboxField" name="handle_of_your_checkbox_field_here">
<label for="checkboxField">
  Some text about the checkbox field that users will see & be able to click on to check the box
</label>

[IcreatedThisForMyGame]

Hey thanks for the reply; There was a merge conflict that the Site hosting guy was fortunately able to fix.

I managed to get a (too long looking) checkbox to display on the website with this code:

<div class="sm:col-span-2">
                <label for="checkbox" class="block text-sm font-medium text-white">Ich nehme am gesamten Programm teil</label>
                <div class="mt-1">
                    <input
                        class="py-3 px-4 block w-full shadow-sm focus:ring-bavarian-blue focus:border-bavarian-blue border-gray-300 rounded-md"
                        type="checkbox" name="checkbox">
                </div>
            </div>`

And it is clickable; works fine.

EDIT: The following part is resolved by code that looks like this (I thought I tried it but third times the carm)

        handle: checkbox
        field:
          antlers: false
          display: checkbox
          type: text
          icon: text
          listable: hidden
          validate:
            - required

However, when I try to add the code for the checkbox into the .yaml file; the entire Website is just "500 Server error".

This is the .yaml code (I added checkbox at the bottom):

  main:
    display: Main
    fields:
      -
        handle: company
        field:
          input_type: text
          antlers: false
          display: Unternehmen
          type: text
          icon: text
          listable: hidden
          validate:
            - required
      -
        handle: employees
        field:
          display: Mitarbeiterzahl
          type: text
          icon: text
          listable: hidden
          validate:
            - required
      -
        handle: email-address
        field:
          input_type: email
          antlers: false
          display: E-Mail-Adresse
          type: text
          icon: text
          listable: hidden
          validate:
            - required
      -
        handle: phone-number
        field:
          input_type: number
          antlers: false
          display: Telefonnummer
          type: text
          icon: text
          listable: hidden
      -
        handle: question
        field:
          antlers: false
          display: question
          type: text
          icon: text
          listable: hidden
          validate:
            - required
      -
        handle: checkbox
        field:
          type: checkbox
          label: "Agree to the terms and conditions"

I tried a few different versions of that last checkbox handle part; like giving it "name: checkbox" or "antlers: false" but I still get the Error Message. Any Idea how that part of code is Supposed to look would be very helpful.

[IcreatedThisForMyGame]

IDK what the hell changed but its broken. I have some Forms in Statamic that contain the field; then I tested some other things; now when I try to send a formular I get "an error occured". Even though I reverted all changes in both files back to the version I posted here which worked.. oh man

[IcreatedThisForMyGame]

It works again. I think maybe I needed to add one empty line at the end of the yaml file; didnt change anything else..