- Get link
- X
- Other Apps
Tech Easy Solutions
Shopify fully custom contact section block on home page
you need any help contact me
Shopify fully custom contact section block on home page
<section class="contact-information" >
<!--<div class="left-shape">
<img src="images/left-shape.png" class="img-fluid">
</div>-->
<div class="container c-container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
<div class=" contact-us">
{% form 'contact' %}
{% if form.posted_successfully? %}
<center> <p class="note form-success">
{{ 'contact.form.post_success' | t }}
</p></center>
{% endif %}
{{ form.errors | default_errors }}
<form>
<div class="form-group position-relative">
<input type="text" class="form-control" id="ContactFormName" name="contact[name]" placeholder="{{ 'contact.form.name' | t }}" value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}" class="input-full">
</div>
<div class="form-group position-relative">
<input type="tel" class="form-control" id="ContactFormPhone" name="contact[phone]" placeholder="{{ 'contact.form.phone' | t }}" pattern="[0-9\-]*" value="{% if form.phone %}{{ form.phone }}{% elsif customer %}{{ customer.phone }}{% endif %}" class="input-full">
</div>
<div class="form-group position-relative">
<input type="email" class="form-control" id="ContactFormEmail" name="contact[email]" placeholder="Email Address" autocorrect="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}" class="input-full">
</div>
{%comment%}
<div class="form-group position-relative">
<input
type="text"
id="ContactFormBirthday"
name="contact[Birthday]"
placeholder="Birthday"
/>
</div>{%endcomment%}
<div class="form-group position-relative">
<textarea id="ContactFormMessage"class="form-control" rows="3" name="contact[body]" placeholder="{{ 'contact.form.message' | t }}" class="input-full">{% if form.body %}{{ form.body }}{% endif %}</textarea>
</div>
<button type="submit" class="btn btn-submit">
SUBMIT
</button>
</form>
{% endform %}
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-12">
<div class="contact-information-right">
<div class="contact-us-head">
<h4>CONTACT INFORMATION</h4>
</div>
<div class="contact-info-us">
<span>
<img src="{{ section.settings.adr_img | img_url: 'master' }}" class="img-fluid" alt="Address">
</span>
<p>{{section.settings.adr_content}}</p>
</div>
<div class="contact-info-us">
<span>
<img src="{{ section.settings.phone_img | img_url: 'master' }}" class="img-fluid" alt="phone">
</span>
<p>{{section.settings.ph_content}}</p>
</div>
<div class="contact-info-us">
<span>
<img src="{{ section.settings.toll_free_img | img_url: 'master' }}" class="img-fluid" alt="phone">
</span>
<p>{{section.settings.toll_content}}</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-12">
<div class="contact-us-head hour">
<h4>{{section.settings.hour_title}}</h4>
</div>
<div class="contact-us-show-room">
{{section.settings.hour_content}}
</div>
<div class="contact-us-head connect">
<h4>CONNECT WITH US</h4>
</div>
<div class="contact-social-icon">
{% if settings.social_facebook_link != blank %}
<a href="{{ settings.social_facebook_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Facebook' }}">
<i class="fab fa-facebook-f" aria-hidden="true"></i>
</a>
{% endif %}
{% if settings.social_twitter_link != blank %}
<a href="{{ settings.social_twitter_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Twitter' }}">
<i class="fab fa-twitter" aria-hidden="true"></i>
</a>
{% endif %}
</div>
</div>
</div>
</div>
</section>
{% schema %}
{
"name": {
"en": "Contact US Form"
},
"settings": [
{
"type": "image_picker",
"id": "background_img",
"label": {
"en": "Background image"
}
},
{
"type": "text",
"id": "contact_title",
"default": "CONTACT INFORMATION",
"label": {
"en": "Title"
}
},
{
"type": "image_picker",
"id": "adr_img",
"label": {
"en": "Address icon"
}
},
{
"type": "html",
"id": "adr_content",
"default": "<p>6161 Philips Highway<br>Jacksonville, FL 32216</p>",
"label": {
"en": "Content"
}
}
,
{
"type": "image_picker",
"id": "phone_img",
"label": {
"en": "Phone icon"
}
},
{
"type": "html",
"id": "ph_content",
"default": "<p>904-731-3401<br>1-800-872-3401 (Toll Free)</p>",
"label": {
"en": "Phone Content"
}
}
,
{
"type": "image_picker",
"id": "toll_free_img",
"label": {
"en": "Toll free icon"
}
},
{
"type": "html",
"id": "toll_content",
"default": "<p>1-888-340-3401</p>",
"label": {
"en": "Toll Content"
}
},
{
"type": "html",
"id": "hour_title",
"default": "SHOWROOM HOURS",
"label": {
"en": "Opning hours html"
}
},
{
"type": "html",
"id": "hour_content",
"default": "<p>Monday - Friday<span>8am - 5pm</span></p>",
"label": {
"en": "Opning hours html"
}
}
],
"presets": [
{
"name": "Contact US form",
"category": "Advanced"
}
]
}
{% endschema %}
you need any help contact me
Comments
Post a Comment