checkbox description not alignment in contact form

New Member
2 0 0

Hi, I am adding checkbox in the custom contact form but the text descriptions are not alignment next to the checkbox.

Can anyone help, please!

Below is the my coding of custom contact form.


<!-- /templates/page.liquid -->
<h1 class="small--text-center">{{ page.title }}</h1>
<div class="rte">
  {{ page.content }}
<div class="contact-form form-vertical">
  {% form 'contact' %}
    {% if form.posted_successfully? %}
      <p class="form--success">
        {{ 'contact.form.post_success' | t }}
    {% endif %}
    {{ form.errors | default_errors }}
    <label for="ContactFormName" class="label--hidden">{{ '' | t }}</label>
    <input type="text" id="ContactFormName" name="contact[name]" placeholder="{{ '' | t }}" autocapitalize="words" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ }}{% endif %}">
    <label for="ContactFormEmail" class="label--hidden">{{ '' | t }}</label>
    <input type="email" id="ContactFormEmail" name="contact[email]" placeholder="{{ '' | t }}" autocorrect="off" autocapitalize="off" value="{% if %}{{ }}{% elsif customer %}{{ }}{% endif %}">
    <label for="ContactFormPhone" class="label--hidden">{{ '' | t }}</label>
    <input type="tel" id="ContactFormPhone" name="contact[phone]" placeholder="{{ '' | t }}" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ }}{% endif %}">
    <label for="ContactFormProduct">Which Low Dermatitis Potential / Fentanyl Resistance gloves do you like to try?</label><br>
<input type="checkbox" id="ContactFormProduct" name="contact[Prod1]" value="EnSure370 Series" />
EnSure370 Series, 4Mil, Violet Blue <br>
<input type="checkbox" id="ContactFormProduct" name="contact[Prod2]" value="EnSure500 Series" />
EnSure500 Series, 5Mil, Black, Extended Cuff <br>
    <label for="ContactFormSize">Pick your size</label><br>
<input type="checkbox" id="ContactFormSize" name="contact[XS]" value="X-Small" />X-Small<br>
<input type="checkbox" id="ContactFormSize" name="contact[S]" value="Small" />Small<br>
<input type="checkbox" id="ContactFormSize" name="contact[M]" value="Medium" />Medium<br>
<input type="checkbox" id="ContactFormSize" name="contact[L]" value="Large" />Large<br>
<input type="checkbox" id="ContactFormSize" name="contact[XL]" value="X-Large" />X-Large<br>
    <label for="ContactFormMessage" class="label--hidden">{{ 'contact.form.message' | t }}</label>
    <textarea rows="10" id="ContactFormMessage" name="contact[body]" placeholder="Delivery Address">{% if form.body %}{{ form.body }}{% endif %}</textarea>
    <input type="submit" class="btn" value="{{ 'contact.form.send' | t }}">
  {% endform %}

Hello eds,


Please share your site URL rather than the code so that  can take a look and will let you know the css. 

Likes are appreciated, If it solved your problem please mark it as accepted solution.

Thanks & Regards
Aumento Infoway Pvt Ltd.


Hi Eds,

It's quite simple and small, just add below CSS to your stylesheet and it will looks like this :

Likes are appreciated, If it solved your problem please mark it as accepted solution.

Thanks & Regards
Aumento Infoway Pvt Ltd.
1 Like
New Member
5 0 0

Im having the same issue where my contact info is on the right but i need it all aligned. is the url.


any help on this matter would be great.