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

Solved
 

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.

 
Luis Cardoso
Web Developer at CraftChocolatier.co.uk
KetanKumar
Shopify Partner
14248 1657 5131

@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 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes

here is the link for my page 

password mutsam

 
Luis Cardoso
Web Developer at CraftChocolatier.co.uk
0 Likes
KetanKumar
Shopify Partner
14248 1657 5131

@CraftChoco 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes

 

<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 %}
​

 

 

 

 
Luis Cardoso
Web Developer at CraftChocolatier.co.uk
0 Likes
 

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

 
 
Luis Cardoso
Web Developer at CraftChocolatier.co.uk
0 Likes
KetanKumar
Shopify Partner
14248 1657 5131

@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 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
 
 
 

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.

 
 
Luis Cardoso
Web Developer at CraftChocolatier.co.uk
0 Likes
KetanKumar
Shopify Partner
14248 1657 5131

@CraftChoco 

what do you mean?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
 
 

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

Web capture_7-2-2021_124145_chocolate-business.myshopify.com.jpeg

 
 
Luis Cardoso
Web Developer at CraftChocolatier.co.uk
0 Likes