checkbox description not alignment in contact form

Solved
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>
 
<div class="contact-form form-vertical">
  {% form 'contact' %}
 
    {% if form.posted_successfully? %}
      <p class="form--success">
        {{ 'contact.form.post_success' | t }}
      </p>
    {% endif %}
 
    {{ form.errors | default_errors }}
 
    <label for="ContactFormName" class="label--hidden">{{ 'contact.form.name' | t }}</label>
    <input type="text" id="ContactFormName" name="contact[name]" placeholder="{{ 'contact.form.name' | t }}" autocapitalize="words" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
 
    <label for="ContactFormEmail" class="label--hidden">{{ 'contact.form.email' | t }}</label>
    <input type="email" id="ContactFormEmail" name="contact[email]" placeholder="{{ 'contact.form.email' | t }}" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">
 
    <label for="ContactFormPhone" class="label--hidden">{{ 'contact.form.phone' | t }}</label>
    <input type="tel" id="ContactFormPhone" name="contact[phone]" placeholder="{{ 'contact.form.phone' | t }}" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% 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 %}
</div>
0 Likes

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.
0 Likes

Success.

Hi Eds,

It's quite simple and small, just add below CSS to your stylesheet and it will looks like this : https://pasteboard.co/IuT42rQ.png

 
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.

 

https://www.oashobby.com/pages/oas-repair-service is the url.

 

any help on this matter would be great.

 

Thanks,

0 Likes