(Brookly Theme) editint my contact form and my checkbox / radio inputs not showing properly!?

[CraftChoco]

So i'm doing a new contact form and adding a checkbox (or a radio for this matter, tried both) and instead of showing inline like all the rest is just showing the selector no text.

my code is from the example from shopify to add them. here the sample

      <div class="grid__item large--one-half">
          <label for="ContactFormKitten">pick one</label>
          <input type="checkbox" id="ContactFormKitten" name="contact[Kitten]" value="value1" placeholder="oh yeh1"/>
          <input type="checkbox" id="ContactFormKitten" name="contact[Kitten]" value="value2" placeholder="oh yeh2"/>
      </div>
      <div class="grid__item large--one-half">
          <label for="ContactFormDog">pick one</label>
          <input type="radio" id="ContactFormDog" name="contact[Dog]" value="value1" placeholder="oh yeh1"/>
          <input type="radio" id="ContactFormDog" name="contact[Dog]" value="value2" placeholder="oh yeh2"/>
      </div>

this is supposed to be working but something is not compatible or I'm miss reading the problem.

here is the link for my page code mutsam

Thanks in advance.

[KetanKumar]

@CraftChoco 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

sorry your store is password protect cab you please share us 

[CraftChoco]

here is the link for my page 

password mutsam

[KetanKumar]

@CraftChoco 

thanks for details can you please share the full contact us page so i will update code

[CraftChoco]

<div class="form-vertical">

  {% form 'contact' %}
    {% comment %}Successful message{% endcomment %}

    {% if form.posted_successfully? %}
    <p class="note form-success">{{ 'contact.form.post_success' | t }}</p>
    {% endif %}

    {{ form.errors | default_errors }}

    <div class="grid grid--small">
    {% for block in section.blocks %}
      {% assign blocktype = block.type %}
      {% assign set = block.settings %}
		
      {% case blocktype %}
      
	{%comment%}
		Needed options for contact form
    {%endcomment%}
      
      {% when 'name' %}
        {% if set.show == true %}    
          <div class="grid__item {% if set.size == "half" %}large--one-half{% endif %}">
            <label for="ContactFormName" class="hidden-label">{{ 'contact.form.name' | t }}</label>
            <input type="text" id="ContactFormName" class="input-full" name="contact[Costumer Name]"
                   placeholder="Full Name {% if set.req == true %}(required){% endif %}" autocapitalize="words"
                   value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
                   {% if set.req == true %}required{% endif %}>
          </div>
        {% endif %}
      {% when 'mobile' %}
        {% if set.show == true %}
          <div class="grid__item {% if set.size == "half" %}large--one-half{% endif %}">
            <label for="ContactFormPhone" class="hidden-label">{{ 'contact.form.phone' | t }}</label>
            <input type="tel" id="ContactFormPhone" class="input-full" name="contact[{{ 'contact.form.phone' | t }}]"
                   placeholder="{{ 'contact.form.phone' | t }} {% if set.req == true %}(Required){% endif %}" pattern="[0-9\-]*"
                   value="{% if form.phone %}{{ form.phone }}{% elsif customer %}{{ customer.phone }}{% endif %}"
                   {% if set.req == true %}required{% endif %}>
          </div>
        {% endif %}
      {% when 'email' %}
        {% if set.show == true %}
          <div class="grid__item {% if set.size == "half" %}large--one-half{% endif %}">
            <label for="ContactFormEmail" class="hidden-label">{{ 'contact.form.email' | t }}</label>
            <input type="email" id="ContactFormEmail" class="input-full" name="contact[email]"
                   placeholder="{{ 'contact.form.email' | t }} {% if set.req == true %}(Required){% endif %}" autocorrect="off"
                   autocapitalize="off"
                   value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% elsif set.show == false %}contact@shopify.form{% endif %}"
                   required>
          </div>
      	{% else %}
          <div class="grid__item ">
            <label for="ContactFormEmail" class="hidden-label">{{ 'contact.form.email' | t }}</label>
            <input type="hidden" id="ContactFormEmail" class="input-full" name="contact[email]"
                   value="contact.form@shopify.shop"
                   >
          </div>
        {% endif %}
      {% when 'motive' %}
        {% if set.show == true %}
          <div class="grid__item {% if set.size == "half" %}large--one-half{% endif %}">
            <label for="ContactFormmotive" class="hidden-label">{{ 'contact.form.motive' | t }}</label>
              <select id="ContactFormmotive" name="contact[Motive to contact]">
                <optgroup label="Need help with">
                {% for link in linklists[set.options].links %}

                  <option>{{ link.title | escape }}</option>

                {% endfor %}
                </optgroup>
              </select>
          </div>
        {% endif %}
      
	{%comment%}
		Special options
    {%endcomment%}
      
      {% when 'text' %}

      	  {% if set.show == true %}    
            <div class="grid__item {% if set.size == "half" %}large--one-half{% endif %}">
              <label for="ContactForm{{set.title}}" class="hidden-label">{{ 'set.title' }}</label>
              <input type="text" id="ContactForm{{set.title}}" class="input-full" name="contact[{{ set.title }}]"
                     placeholder="{{ set.title }} {% if set.req == true %}(required){% endif %}" autocapitalize="words"
                     {% if set.req == true %}required{% endif %}>
            </div>
          {% endif %}
      
      {% when 'check' %}
      
      		<div class="grid__item large--one-half">
              <label for="ContactForm{{set.title}}">{{ set.title }}</label>
               <input type="radio" id="ContactForm{{set.title}}" class="input-full" name="contact[{{ set.title }}]"
                      value="{{ set.title }}" style="width:20px;">
			  
      		</div>

      {% endcase %}
    {% endfor %}

      
      <div class="grid__item large--one-half">
          <label for="ContactFormKitten">pick one</label>
          <input type="checkbox" id="ContactFormKitten" name="contact[Kitten]" value="value1" placeholder="oh yeh"/>
          <input type="checkbox" id="ContactFormKitten" name="contact[Kitten]" value="value2" placeholder="oh yeh2"/>
      </div>
      <div class="grid__item large--one-half">
          <label for="ContactFormKitten">pick one</label>
          <input type="radio" id="ContactFormKitten" name="contact[Kitten]" value="value1" placeholder="oh yeh1"/>
          <input type="radio" id="ContactFormKitten" name="contact[Kitten]" value="value2" placeholder="oh yeh2"/>
      </div>

    <label for="ContactFormMessage" class="hidden-label">{{ 'contact.form.message' | t }}</label>
    <textarea rows="6" id="ContactFormMessage" class="input-full" name="contact[This is my Message]" placeholder="{{ 'contact.form.message' | t }}">{% if form.body %}{{ form.body }}{% endif %}</textarea>
    <input type="submit" class="btn right" value="{{ 'contact.form.send' | t }}">
  </div>

  {% endform %}

</div>

{% schema %}
  
  {
    "name":"Contact form",
    "class":"contact-form",
    "settings": [
		{
          "type": "header",
          "content": "What you want to see?"
      	}
      ],
    "blocks":[
      {
        "name": "Full Name",
        "type":"name",
        "limit": 1,
        "settings":[
            {
              "type": "checkbox",
              "id": "show",
              "default": true,
              "label": "Is visible?"
            },
            {
              "type": "checkbox",
              "id": "req",
              "default": false,
              "label": "Is required?"
            },
            {
              "type": "radio",
              "id": "size",
              "options": [
                  { "value": "full", "label": "Full"},
                  { "value": "half", "label": "Half"}
                ],
              "default": "half",
              "label": "Width"
            }
          ]
      },
      {
        "name": "Mobile Contact",
        "type": "mobile",
        "limit": 1,
        "settings":[
          {
            "type": "checkbox",
            "id": "show",
            "default": true,
            "label": "Is visible?"
          },
          {
            "type": "checkbox",
            "id": "req",
            "default": false,
            "label": "Is required?"
          },
          {
            "type": "radio",
            "id": "size",
            "options": [
                { "value": "full", "label": "Full"},
                { "value": "half", "label": "Half"}
              ],
            "default": "half",
            "label": "Width"
          }
        ]
      },
      {
        "name": "Email",
        "type": "email",
        "limit": 1,
        "settings":[
          {
            "type": "checkbox",
            "id": "show",
            "default": true,
            "label": "Is visible?"
          },
          {
            "type": "radio",
            "id": "size",
            "options": [
                { "value": "full", "label": "Full"},
                { "value": "half", "label": "Half"}
              ],
            "default": "half",
            "label": "Width"
          }
        ]
      },
      {
        "name": "Motive to contact Us",
        "type": "motive",
        "limit": 1,
        "settings":[
          {
            "type": "checkbox",
            "id": "show",
            "default": true,
            "label": "Is Visible?"
          },
          {
            "type": "paragraph",
            "content": "Create a menu and edit the options as a link with the direction to '#'"
          },
          {
            "type": "link_list",
            "id": "options",
            "label": "Options"
          },
          {
            "type": "radio",
            "id": "size",
            "options": [
                { "value": "full", "label": "Full"},
                { "value": "half", "label": "Half"}
              ],
            "default": "half",
            "label": "Width"
          }
        ]
      },
	  {
        "name": "Checkbox Based",
        "type": "check",
        "limit": 4,
        "settings": [
          {
            "id": "title",
            "type": "text",
            "label": "Checkbox Label",
            "info": "Example: Subscribe to newsletter"
          },
          {
            "type": "checkbox",
            "id": "active",
            "default": true,
            "label": "Is it pre-Selected?"
          }
        ]
      },
      {
        "name": "Text Based",
        "type": "text",
        "limit": 4,
        "settings":[
          {
            "id": "title",
            "type": "text",
            "label": "What would be the criterion?",
            "default":"What would be the criterion?"
          },
          {
            "type": "checkbox",
            "id": "show",
            "default": true,
            "label": "Is visible?"
          },
          {
            "type": "checkbox",
            "id": "req",
            "default": false,
            "label": "Is required?"
          },
          {
            "type": "radio",
            "id": "size",
            "options": [
                { "value": "full", "label": "Full"},
                { "value": "half", "label": "Half"}
              ],
            "default": "half",
            "label": "Full width or half width"
          }
        ]
	  }
    ]
  }
{% endschema %}
​

[CraftChoco]

Everything else is working, except for the checkbox and radio button

[KetanKumar]

@CraftChoco 

you have fix this issue?

if not so please add me to the staff account so i will check the backend proper condition this code are something is missing 

[CraftChoco]

HI, just sent you the Invite for the shop,

The files i changed for the contact form are page.customizer_contact.liquid (template); customizer_contact.liquid (section)

like i said before, this is on Brooklyn theme and all the other inputs are working properly.

but when i add an input[type="checkbox"] or input[type="radio"] is like nothing exists, all the css is gone and only a box/ball shows.

I can do it with out Brooklyn css but would like to keep it,

Thanks for this.

[KetanKumar]

@CraftChoco 

what do you mean?

[CraftChoco]

i get the checkbox and radio items to show and a label for the general options, like the question, but the actual checkbox and radio doesn't show anything

like this, with the code i shared before