Help me Align my Contact Form

gemmategen
New Member
15 0 0

Hello, I am a coding beginner - I have a contact form which is currently showing up right-aligned and I would like to change it to left aligned please. THANK YOU in advance!

Here is the current code:

 

{% comment %}
** Contact form - homepage partial **
- Draggable section
- Uses blocks
{% endcomment %}

{% comment %} Assign object as block or section {% endcomment %}
{% if type == 'block' %}
{%- assign object = block -%}
{% else %}
{%- assign object = section -%}
{% endif %}
{%- assign id = object.id -%}

{% comment %} Content settings {% endcomment %}
{%- assign blocks = object.blocks -%}
{%- assign contact_image = object.settings.contact_image -%}
{%- assign contact_heading = object.settings.contact_heading -%}
{%- assign contact_subheading = object.settings.contact_subheading -%}
{%- assign contact_content = object.settings.contact_content -%}
{% comment %} End content settings {% endcomment %}

{% comment %} Advanced {% endcomment %}
{%- assign css_class = object.settings.css_class -%}
{%- assign custom_css = object.settings.custom_css -%}

{% comment %} Section specific CSS {% endcomment %}
{% style %}
{% render 'css-loop',
css: custom_css,
id: id
%}
{% endstyle %}
<section class="section {{ css_class }}">
<div class="container homepage_content custom-contact-form__position--{{ object.settings.contact_text_position }}">

<div class="one-whole column content">
{% if contact_heading != blank and object.settings.image == blank %}
<div class="custom-contact-form__heading">
<h2 class="title center">{{ contact_heading | escape }}</h2>
<div class="feature_divider"></div>
</div>
{% endif %}
</div>

<div class="
custom-contact-form
{% if object.settings.contact_text_position == 'left' %}
one-half column
{% elsif object.settings.contact_text_position == 'right' %}
one-half column
{% else %}
five-eighths offset-by-three columns
{% endif %}
is-hidden-offset-mobile-only medium-down--one-whole">
{% if contact_image != blank %}
<div class="custom-contact-form__image">
{% render 'image-element',
image: contact_image.src,
alt: contact_image.alt
%}
</div>
{% endif %}

<div class="custom-contact-form__text {% if object.settings.contact_text_alignment == "center" %}center{% elsif object.settings.contact_text_alignment == "left" %}align_left{% endif %}">
{% if contact_subheading != blank %}
<h3>{{ contact_subheading | escape }}</h3>
{% endif %}
{% if contact_content != blank %}
{{ contact_content }}
{% endif %}
{% if object.settings.contact_social_buttons %}
<div class="custom-contact-form__social">
{% render 'social-icons' %}
</div>
{% endif %}
</div>
</div>

<div class="
custom-contact-form
{% if object.settings.contact_text_position == 'left' %}
one-half column
{% elsif object.settings.contact_text_position == 'right' %}
one-half column
{% else %}
five-eighths offset-by-three columns
{% endif %}
is-hidden-offset-mobile-only medium-down--one-whole">
<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/tegenaccessories/personal-appointment?background_color=8c968d&text_color=ffffff..." style="min-width:320px;height:630px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Calendly inline widget end -->
{% if object.settings.contact_logo != blank %}
<div class="custom-contact-form__logo">
{% render 'image-element',
image: object.settings.contact_logo.src,
alt: object.settings.contact_logo.alt
%}
</div>
{% endif %}
{% form 'contact' %}
{% if form.posted_successfully? %}
<p class="quote">{{ 'contact.form.post_success' | t }}</p>
{% endif %}

{% if form.errors %}
<p class="quote">{{ 'general.forms.post_error' | t }}</p>

{%- assign message = 'contact.form.message' | t -%}
<ul class="center">
{% for field in form.errors %}
{% if field == 'form' %}
<li>
{{ form.errors.messages[field] }}
</li>
{% else %}
<li>
{%- assign field_name = field | replace: 'body', message -%}
{{ 'general.forms.post_field_error_html' | t: field: field_name, error: form.errors.messages[field] }}
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}

{% if blocks.size > 0 %}
<div class="custom-contact-form__blocks">
{% for block in blocks %}
{% comment %} Content settings {% endcomment %}
{%- assign field_type = block.settings.field_type -%}
{% comment %} End content settings {% endcomment %}

<div class="contact-block contact-block--{{ block.id }} contact-block--{{ block.type }} contact-block--{{ block.type }}" {{ block.shopify_attributes }}>
{% comment %} Assign label {% endcomment %}
{% if block.settings.label != blank %}
{%- assign label = block.settings.label -%}
{% endif %}

{% if block.type == 'richtext' %}
{% if field_type == 'text' %}
{% comment %} Textfield {% endcomment %}
{% if block.settings.label != blank %}
<label for="{{ label | replace: ' ', '_' }}">{{ label }} {% if block.settings.required %}<span class="red">*</span>{% endif %}</label>
{% endif %}
<input type="text" name="contact[{% if label != blank %}{{ label | strip_html }}{% elsif block.settings.placeholder != blank %}{{ block.settings.placeholder | strip_html }}{% else %}name{% endif %}]" id="{{ label | replace: ' ', '_' }}" placeholder="{% if block.settings.placeholder != blank %}{{ block.settings.placeholder }}{% if block.settings.label == blank and block.settings.required %}*{% endif %}{% else %}Name{% if block.settings.label == blank and block.settings.required %}*{% endif %}{% endif %}" {% if block.settings.required %}required="required"{% endif %} />

{% elsif field_type == 'textarea' %}
{% comment %} Textarea {% endcomment %}
{% if block.settings.label != blank %}
<label for="textarea{{ forloop.index }}">{{ label }} {% if block.settings.required %}<span class="red">*</span>{% endif %}</label>
{% endif %}
<textarea placeholder="{% if block.settings.placeholder != blank %}{{ block.settings.placeholder }}{% if block.settings.label == blank and block.settings.required %}*{% endif %}{% else %}Message{% if block.settings.label == blank and block.settings.required %}*{% endif %}{% endif %}" rows="7" id="textarea{{ forloop.index }}" name="contact[body]" {% if block.settings.required %}required="required"{% endif %}></textarea>

{% elsif field_type == 'email' %}
{% comment %} Email {% endcomment %}
{% if block.settings.label != blank %}
<label for="contactFormEmail">{{ label }} <span class="red">*</span></label>
{% endif %}
<input type="email" id="contactFormEmail" name="contact[email]" placeholder="{% if block.settings.placeholder != blank %}{{ block.settings.placeholder }}{% if block.settings.label == blank %}*{% endif %}{% else %}Email{% if block.settings.label == blank %}*{% endif %}{% endif %}" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}" required="required">
{% endif %}

{% elsif block.type == 'image' %}
<style>
.contact-block--{{ block.id }}.contact-block--image .custom-contact-form__image {
max-width: {{ block.settings.logo_display_width }}px;
}
</style>

{% comment %} Image {% endcomment %}
{% comment %} Updated in new editor {% endcomment %}
{% if block.settings.image != blank %}
{% render 'image-element',
image: block.settings.image,
alt: block.settings.image.alt,
stretch_width: true,
additional_classes: 'custom-contact-form__image'
%}
{% endif %}
{% comment %} Updated in new editor {% endcomment %}

{% comment %} Text {% endcomment %}
{{ block.settings.text }}

{% elsif block.type == 'custom' %}
{% if field_type == 'drop_down' %}
{% comment %} Drop-down {% endcomment %}
{% if block.settings.label != blank %}
<label for="{{ label | replace: ' ', '_' }}">{{ label }} {% if block.settings.required %}<span class="red">*</span>{% endif %}</label>
{% endif %}
<select id="contactFormQuestionType" name="contact[{{ label | replace: ' ', '_' }}]" {% if block.settings.required %}required="required"{% endif %}>
{% for index in (0..10) %}
{%- capture option -%}options_{{ index }}{%- endcapture -%}
{% if forloop.index0 == 0 %}
{% if block.settings.placeholder != blank %}
<option value="">
{{ block.settings.placeholder }}{% if block.settings.label == blank and block.settings.required %}*{% endif %}
</option>
{% endif %}
{% else %}
{% if block.settings[option] != blank %}
<option value="{{ block.settings[option] }}">
{{ block.settings[option] }}
</option>
{% endif %}
{% endif %}
{% endfor %}
</select>

{% elsif field_type == 'radio' %}
{% comment %} Radio {% endcomment %}
{% if block.settings.label != blank %}
<label>{{ label }} {% if block.settings.required %}<span class="red">*</span>{% endif %}</label>
{% endif %}
<ul>
{% for index in (1..10) %}
{%- capture option -%}options_{{index}}{%- endcapture -%}
{% if block.settings[option] != blank %}
<li>
<input type="radio" id="radio{{ forloop.index }}" name="contact[{{ label }}]" value="{{ block.settings[option] }}" {% if forloop.first %}checked{% endif %}/>
<label for="radio{{ forloop.index }}">
{{ block.settings[option] }}
</label>
</li>
{% endif %}
{% endfor %}
</ul>

{% elsif field_type == 'checkbox' %}
{% comment %} Checkbox {% endcomment %}
{%- assign options = block.settings.options | split: ';' -%}
{% if block.settings.label != blank %}
<label>{{ label }} {% if block.settings.required %}<span class="red">*</span>{% endif %}</label>
{% endif %}
<ul {% if block.settings.required %}data-is-required{% endif %}>
{% for index in (1..10) %}
{%- capture option -%}options_{{index}}{%- endcapture -%}
{% if block.settings[option] != blank %}
<li>
<input type="checkbox" id="checkbox{{ forloop.index }}" name="contact[{{ block.settings[option] }}]" value="true" />
<label for="checkbox{{ forloop.index }}">
{{ block.settings[option] }}
</label>
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
<input type="submit" class="global-button global-button--primary" value="{{ 'contact.form.send' | t }}" />
{% endform %}
</div>
</div>
</section>

0 Likes
Pallavi
Shopify Expert
2383 397 515

Hello There,

Please share your store URL and Screenshot.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
gemmategen
New Member
15 0 0

Hello - this is now the code on that page: 

{% comment %}
** Contact form - homepage partial **
- Draggable section
- Uses blocks
{% endcomment %}

{% comment %} Assign object as block or section {% endcomment %}
{% if type == 'block' %}
{%- assign object = block -%}
{% else %}
{%- assign object = section -%}
{% endif %}
{%- assign id = object.id -%}

{% comment %} Content settings {% endcomment %}
{%- assign blocks = object.blocks -%}
{%- assign contact_image = object.settings.contact_image -%}
{%- assign contact_heading = object.settings.contact_heading -%}
{%- assign contact_subheading = object.settings.contact_subheading -%}
{%- assign contact_content = object.settings.contact_content -%}
{% comment %} End content settings {% endcomment %}

{% comment %} Advanced {% endcomment %}
{%- assign css_class = object.settings.css_class -%}
{%- assign custom_css = object.settings.custom_css -%}

{% comment %} Section specific CSS {% endcomment %}
{% style %}
{% render 'css-loop',
css: custom_css,
id: id
%}
{% endstyle %}
<section class="section {{ css_class }}">
<div class="container homepage_content custom-contact-form__position--{{ object.settings.contact_text_position }}">

<div class="one-whole column content">
{% if contact_heading != blank and object.settings.image == blank %}
<div class="custom-contact-form__heading">
<h2 class="title center">{{ contact_heading | escape }}</h2>
<div class="feature_divider"></div>
</div>
{% endif %}
</div>

<div class="
custom-contact-form
{% if object.settings.contact_text_position == 'left' %}
one-fourth column
{% elsif object.settings.contact_text_position == 'right' %}
three-fourths column
{% else %}
five-eighths offset-by-three columns
{% endif %}
is-hidden-offset-mobile-only medium-down--one-whole">
{% if contact_image != blank %}
<div class="custom-contact-form__image">
{% render 'image-element',
image: contact_image.src,
alt: contact_image.alt
%}
</div>
{% endif %}

<div class="custom-contact-form__text {% if object.settings.contact_text_alignment == "center" %}center{% elsif object.settings.contact_text_alignment == "left" %}align_left{% endif %}">
{% if contact_subheading != blank %}
<h3>{{ contact_subheading | escape }}</h3>
{% endif %}
{% if contact_content != blank %}
{{ contact_content }}
{% endif %}
{% if object.settings.contact_social_buttons %}
<div class="custom-contact-form__social">
{% render 'social-icons' %}
</div>
{% endif %}
</div>
</div>

<div class="
custom-contact-form
{% if object.settings.contact_text_position == 'left' %}
one-half column
{% elsif object.settings.contact_text_position == 'right' %}
one-half column
{% else %}
five-eighths offset-by-three columns
{% endif %}
is-hidden-offset-mobile-only medium-down--one-whole">
<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/tegenaccessories/personal-appointment?background_color=8c968d&text_color=ffffff..." style="min-width:320px;height:630px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Calendly inline widget end -->
{% if object.settings.contact_logo != blank %}
<div class="custom-contact-form__logo">
{% render 'image-element',
image: object.settings.contact_logo.src,
alt: object.settings.contact_logo.alt
%}
</div>
{% endif %}
{% form 'contact' %}
{% if form.posted_successfully? %}
<p class="quote">{{ 'contact.form.post_success' | t }}</p>
{% endif %}

{% if form.errors %}
<p class="quote">{{ 'general.forms.post_error' | t }}</p>

{%- assign message = 'contact.form.message' | t -%}
<ul class="center">
{% for field in form.errors %}
{% if field == 'form' %}
<li>
{{ form.errors.messages[field] }}
</li>
{% else %}
<li>
{%- assign field_name = field | replace: 'body', message -%}
{{ 'general.forms.post_field_error_html' | t: field: field_name, error: form.errors.messages[field] }}
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}

{% if blocks.size > 0 %}
<div class="custom-contact-form__blocks">
{% for block in blocks %}
{% comment %} Content settings {% endcomment %}
{%- assign field_type = block.settings.field_type -%}
{% comment %} End content settings {% endcomment %}

<div class="contact-block contact-block--{{ block.id }} contact-block--{{ block.type }} contact-block--{{ block.type }}" {{ block.shopify_attributes }}>
{% comment %} Assign label {% endcomment %}
{% if block.settings.label != blank %}
{%- assign label = block.settings.label -%}
{% endif %}

{% if block.type == 'richtext' %}
{% if field_type == 'text' %}
{% comment %} Textfield {% endcomment %}
{% if block.settings.label != blank %}
<label for="{{ label | replace: ' ', '_' }}">{{ label }} {% if block.settings.required %}<span class="red">*</span>{% endif %}</label>
{% endif %}
<input type="text" name="contact[{% if label != blank %}{{ label | strip_html }}{% elsif block.settings.placeholder != blank %}{{ block.settings.placeholder | strip_html }}{% else %}name{% endif %}]" id="{{ label | replace: ' ', '_' }}" placeholder="{% if block.settings.placeholder != blank %}{{ block.settings.placeholder }}{% if block.settings.label == blank and block.settings.required %}*{% endif %}{% else %}Name{% if block.settings.label == blank and block.settings.required %}*{% endif %}{% endif %}" {% if block.settings.required %}required="required"{% endif %} />

{% elsif field_type == 'textarea' %}
{% comment %} Textarea {% endcomment %}
{% if block.settings.label != blank %}
<label for="textarea{{ forloop.index }}">{{ label }} {% if block.settings.required %}<span class="red">*</span>{% endif %}</label>
{% endif %}
<textarea placeholder="{% if block.settings.placeholder != blank %}{{ block.settings.placeholder }}{% if block.settings.label == blank and block.settings.required %}*{% endif %}{% else %}Message{% if block.settings.label == blank and block.settings.required %}*{% endif %}{% endif %}" rows="7" id="textarea{{ forloop.index }}" name="contact[body]" {% if block.settings.required %}required="required"{% endif %}></textarea>

{% elsif field_type == 'email' %}
{% comment %} Email {% endcomment %}
{% if block.settings.label != blank %}
<label for="contactFormEmail">{{ label }} <span class="red">*</span></label>
{% endif %}
<input type="email" id="contactFormEmail" name="contact[email]" placeholder="{% if block.settings.placeholder != blank %}{{ block.settings.placeholder }}{% if block.settings.label == blank %}*{% endif %}{% else %}Email{% if block.settings.label == blank %}*{% endif %}{% endif %}" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}" required="required">
{% endif %}

{% elsif block.type == 'image' %}
<style>
.contact-block--{{ block.id }}.contact-block--image .custom-contact-form__image {
max-width: {{ block.settings.logo_display_width }}px;
}
</style>

{% comment %} Image {% endcomment %}
{% comment %} Updated in new editor {% endcomment %}
{% if block.settings.image != blank %}
{% render 'image-element',
image: block.settings.image,
alt: block.settings.image.alt,
stretch_width: true,
additional_classes: 'custom-contact-form__image'
%}
{% endif %}
{% comment %} Updated in new editor {% endcomment %}

{% comment %} Text {% endcomment %}
{{ block.settings.text }}

{% elsif block.type == 'custom' %}
{% if field_type == 'drop_down' %}
{% comment %} Drop-down {% endcomment %}
{% if block.settings.label != blank %}
<label for="{{ label | replace: ' ', '_' }}">{{ label }} {% if block.settings.required %}<span class="red">*</span>{% endif %}</label>
{% endif %}
<select id="contactFormQuestionType" name="contact[{{ label | replace: ' ', '_' }}]" {% if block.settings.required %}required="required"{% endif %}>
{% for index in (0..10) %}
{%- capture option -%}options_{{ index }}{%- endcapture -%}
{% if forloop.index0 == 0 %}
{% if block.settings.placeholder != blank %}
<option value="">
{{ block.settings.placeholder }}{% if block.settings.label == blank and block.settings.required %}*{% endif %}
</option>
{% endif %}
{% else %}
{% if block.settings[option] != blank %}
<option value="{{ block.settings[option] }}">
{{ block.settings[option] }}
</option>
{% endif %}
{% endif %}
{% endfor %}
</select>

{% elsif field_type == 'radio' %}
{% comment %} Radio {% endcomment %}
{% if block.settings.label != blank %}
<label>{{ label }} {% if block.settings.required %}<span class="red">*</span>{% endif %}</label>
{% endif %}
<ul>
{% for index in (1..10) %}
{%- capture option -%}options_{{index}}{%- endcapture -%}
{% if block.settings[option] != blank %}
<li>
<input type="radio" id="radio{{ forloop.index }}" name="contact[{{ label }}]" value="{{ block.settings[option] }}" {% if forloop.first %}checked{% endif %}/>
<label for="radio{{ forloop.index }}">
{{ block.settings[option] }}
</label>
</li>
{% endif %}
{% endfor %}
</ul>

{% elsif field_type == 'checkbox' %}
{% comment %} Checkbox {% endcomment %}
{%- assign options = block.settings.options | split: ';' -%}
{% if block.settings.label != blank %}
<label>{{ label }} {% if block.settings.required %}<span class="red">*</span>{% endif %}</label>
{% endif %}
<ul {% if block.settings.required %}data-is-required{% endif %}>
{% for index in (1..10) %}
{%- capture option -%}options_{{index}}{%- endcapture -%}
{% if block.settings[option] != blank %}
<li>
<input type="checkbox" id="checkbox{{ forloop.index }}" name="contact[{{ block.settings[option] }}]" value="true" />
<label for="checkbox{{ forloop.index }}">
{{ block.settings[option] }}
</label>
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
<input type="submit" class="global-button global-button--primary" value="{{ 'contact.form.send' | t }}" />
{% endform %}
</div>
</div>
</section>

 

I am working on an older version so the URL may not pick it up but here is a screenshot of what it looks like and I have now aligned it but I would like the form to stretch longer at the bottom or better yet, move it to the right side of the calendar please so that it shows writing - calendar - contact form please

Screenshot 2021-07-14 at 10.12.24.png

Here is the preview link" - https://81104t1wzp3svk5i-6006397.shopifypreview.com

Website URL - https://tegenaccessories.co.uk/

 

I look forward to your reply, thank you very much for your help!

0 Likes