Shopify Contact Section – Professional Contact Form & Info Display
Add a comprehensive contact section to your Shopify store with customizable contact form, address blocks, and contact information. Features responsive grid layout and stylish info cards with icons.
Liquid Code
<!--
========================================
Section Name: Contact Section
Tech Stack: Liquid, HTML, CSS, JavaScript
What This Section Does:
- Displays a complete contact solution with customizable introduction area and grid layout.
- Features multiple block types including address cards, contact info cards, image display, and form.
- Includes form validation with custom error/success messages and terms acceptance option.
- Fully responsive design that adapts from mobile to desktop with elegant styling.
Promotion:
Make it easy for customers to reach you with this professional contact section. Combine contact form and information in a visually appealing layout. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
<section class="contact-us-section" style="background-color: {{ section.settings.bg_color }}; padding: {{ section.settings.pad_top }}px 0 {{ section.settings.pad_bot }}px;">
<div class="contact-us-container page-width">
<!-- Main Introduction Area -->
{% if section.settings.show_intro %}
<div class="contact-us-intro">
<h4 class="contact-us-subtitle">{{ section.settings.subtitle | default: 'CONTACT US' }}</h4>
<h2 class="contact-us-title">{{ section.settings.title | default: 'Lorem ipsum dolor sit' }}</h2>
<div class="contact-us-text">
{{ section.settings.intro_text | default: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' }}
</div>
</div>
{% endif %}
<!-- Contact Info Blocks Grid -->
<div class="contact-us-blocks-grid">
{% for block in section.blocks %}
{% case block.type %}
{% when 'address_block' %}
<div class="contact-us-info-card" {{ block.shopify_attributes }}>
<div class="contact-us-info-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z" fill="currentColor"/>
</svg>
</div>
<div class="contact-us-info-content">
<h3 class="contact-us-info-title">{{ block.settings.info_title | default: 'Lorem ipsum' }}</h3>
<div class="contact-us-info-text">{{ block.settings.info_text | default: 'Lorem ipsum dolor sit amet' }}</div>
</div>
</div>
{% when 'contact_block' %}
<div class="contact-us-info-card" {{ block.shopify_attributes }}>
<div class="contact-us-info-icon">
{% if block.settings.icon_type == 'email' %}
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 4H4C2.9 4 2.01 4.9 2.01 6L2 18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4ZM20 8L12 13L4 8V6L12 11L20 6V8Z" fill="currentColor"/>
</svg>
{% else %}
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.62 10.79C8.06 13.62 10.38 15.94 13.21 17.38L15.41 15.18C15.69 14.9 16.08 14.82 16.43 14.93C17.55 15.3 18.75 15.5 20 15.5C20.55 15.5 21 15.95 21 16.5V20C21 20.55 20.55 21 20 21C10.61 21 3 13.39 3 4C3 3.45 3.45 3 4 3H7.5C8.05 3 8.5 3.45 8.5 4C8.5 5.25 8.7 6.45 9.07 7.57C9.18 7.92 9.1 8.31 8.82 8.59L6.62 10.79Z" fill="currentColor"/>
</svg>
{% endif %}
</div>
<div class="contact-us-info-content">
<h3 class="contact-us-info-title">{{ block.settings.info_title | default: 'Lorem ipsum' }}</h3>
<div class="contact-us-info-text">{{ block.settings.info_text | default: 'Lorem ipsum dolor sit amet' }}</div>
</div>
</div>
{% when 'image_block' %}
<div class="contact-us-image-wrapper" {{ block.shopify_attributes }}>
{% if block.settings.contact_image != blank %}
<img src="{{ block.settings.contact_image | img_url: '800x' }}"
alt="Lorem ipsum dolor sit amet"
class="contact-us-image">
{% else %}
{{ 'image' | placeholder_svg_tag: 'contact-us-image placeholder' }}
{% endif %}
</div>
{% when 'form_block' %}
<div class="contact-us-form-wrapper" {{ block.shopify_attributes }}>
<h3 class="contact-us-form-title">{{ block.settings.form_title | default: 'Lorem ipsum dolor sit' }}</h3>
{%- form 'contact', id: 'ContactForm', class: 'contact-us-form' -%}
{% if form.posted_successfully? %}
<div class="contact-us-form-success">
{{ block.settings.success_message | default: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }}
</div>
{% endif %}
{% if form.errors %}
<div class="contact-us-form-error">
{{ block.settings.error_message | default: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }}
</div>
{% endif %}
<div class="contact-us-form-field">
<input type="text" id="ContactFormName" name="contact[name]"
placeholder="{{ block.settings.name_placeholder | default: 'Lorem ipsum' }}"
class="contact-us-form-input">
</div>
<div class="contact-us-form-field">
<input type="email" id="ContactFormEmail" name="contact[email]"
placeholder="{{ block.settings.email_placeholder | default: 'Lorem ipsum' }}"
class="contact-us-form-input"
required>
</div>
<div class="contact-us-form-field">
<textarea id="ContactFormMessage" name="contact[body]"
placeholder="{{ block.settings.message_placeholder | default: 'Lorem ipsum' }}"
class="contact-us-form-textarea"></textarea>
</div>
{% if block.settings.show_terms %}
<div class="contact-us-form-field contact-us-form-checkbox">
<input type="checkbox" id="ContactFormTerms" name="contact[terms]" required>
<label for="ContactFormTerms">{{ block.settings.terms_text | default: 'Lorem ipsum dolor sit amet' }}</label>
</div>
{% endif %}
<div class="contact-us-form-submit">
<button type="submit" class="contact-us-form-button" style="background-color: {{ block.settings.button_bg_color }}; color: {{ block.settings.button_text_color }};">
{{ block.settings.button_text | default: 'Lorem ipsum' }}
</button>
</div>
{%- endform -%}
</div>
{% endcase %}
{% endfor %}
</div>
</div>
</section>
{% schema %}
{
"name": "Contact Section",
"settings": [
{
"type": "range",
"id": "pad_top",
"label": "Padding Top",
"min": 0,
"max": 200,
"step": 5,
"default": 40
},
{
"type": "range",
"id": "pad_bot",
"label": "Padding Bottom",
"min": 0,
"max": 200,
"step": 5,
"default": 40
},
{
"type": "color",
"id": "bg_color",
"label": "Background Color",
"default": "#FFFFFF"
},
{
"type": "checkbox",
"id": "show_intro",
"label": "Show Introduction",
"default": true
},
{
"type": "text",
"id": "subtitle",
"label": "Subtitle",
"default": "CONTACT US"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Get in touch"
},
{
"type": "richtext",
"id": "intro_text",
"label": "Introduction Text",
"default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Give us a call or drop by anytime, we endeavour to answer all enquiries within 24 hours on business days.</p>"
}
],
"blocks": [
{
"type": "address_block",
"name": "Address Block",
"limit": 2,
"settings": [
{
"type": "text",
"id": "info_title",
"label": "Title",
"default": "Address"
},
{
"type": "richtext",
"id": "info_text",
"label": "Content",
"default": "<p>Lorem ipsum dolor sit amet<br>789 Lorem Street, Office 123<br>Lorem, 10001</p>"
},
{
"type": "color",
"id": "card_bg_color",
"label": "Card Background",
"default": "#F8F8F8"
}
]
},
{
"type": "contact_block",
"name": "Contact Block",
"limit": 2,
"settings": [
{
"type": "select",
"id": "icon_type",
"label": "Icon Type",
"options": [
{
"value": "email",
"label": "Email"
},
{
"value": "phone",
"label": "Phone"
}
],
"default": "email"
},
{
"type": "text",
"id": "info_title",
"label": "Title",
"default": "Contact"
},
{
"type": "richtext",
"id": "info_text",
"label": "Content",
"default": "<p>Lorem ipsum dolor sit amet<br>+1 555 123 45 67</p>"
},
{
"type": "color",
"id": "card_bg_color",
"label": "Card Background",
"default": "#F8F8F8"
}
]
},
{
"type": "image_block",
"name": "Image Block",
"limit": 1,
"settings": [
{
"type": "image_picker",
"id": "contact_image",
"label": "Contact Image"
},
{
"type": "select",
"id": "image_ratio",
"label": "Image Ratio",
"options": [
{
"value": "square",
"label": "Square (1:1)"
},
{
"value": "portrait",
"label": "Portrait (3:4)"
},
{
"value": "landscape",
"label": "Landscape (4:3)"
}
],
"default": "portrait"
}
]
},
{
"type": "form_block",
"name": "Contact Form",
"limit": 1,
"settings": [
{
"type": "text",
"id": "form_title",
"label": "Form Title",
"default": "Confirm Your Information"
},
{
"type": "text",
"id": "name_placeholder",
"label": "Name Placeholder",
"default": "Name"
},
{
"type": "text",
"id": "email_placeholder",
"label": "Email Placeholder",
"default": "Email"
},
{
"type": "text",
"id": "message_placeholder",
"label": "Message Placeholder",
"default": "Message"
},
{
"type": "checkbox",
"id": "show_terms",
"label": "Show Terms Checkbox",
"default": true
},
{
"type": "text",
"id": "terms_text",
"label": "Terms Text",
"default": "I accept the Terms of Service"
},
{
"type": "text",
"id": "button_text",
"label": "Button Text",
"default": "Submit Now!"
},
{
"type": "color",
"id": "button_bg_color",
"label": "Button Background",
"default": "#000000"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button Text Color",
"default": "#FFFFFF"
},
{
"type": "textarea",
"id": "success_message",
"label": "Success Message",
"default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
"type": "textarea",
"id": "error_message",
"label": "Error Message",
"default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
"type": "color",
"id": "form_bg_color",
"label": "Form Background",
"default": "#F8F8F8"
}
]
}
],
"presets": [
{
"name": "Contact Section",
"blocks": [
{
"type": "address_block"
},
{
"type": "contact_block"
},
{
"type": "form_block"
}
]
}
]
}
{% endschema %}
{% stylesheet %}
.contact-us-section {
overflow: hidden;
}
.contact-us-section .contact-us-container {
max-width: 1200px;
margin: 0 auto;
}
.contact-us-section .contact-us-intro {
text-align: left;
margin-bottom: 40px;
}
.contact-us-section .contact-us-subtitle {
font-size: 14px;
font-weight: 600;
color: #555;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.contact-us-section .contact-us-title {
font-size: 32px;
font-weight: 700;
color: #222;
margin-bottom: 20px;
}
.contact-us-section .contact-us-text {
font-size: 16px;
line-height: 1.6;
color: #666;
}
.contact-us-section .contact-us-blocks-grid {
display: grid;
grid-template-columns: 1fr;
gap: 25px;
}
.contact-us-section .contact-us-info-card {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 25px;
background-color: #f8f8f8;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.contact-us-section .contact-us-info-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #f0f0f0;
color: #333;
}
.contact-us-section .contact-us-info-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 10px;
}
.contact-us-section .contact-us-info-text {
font-size: 15px;
line-height: 1.5;
color: #555;
}
.contact-us-section .contact-us-image-wrapper {
width: 100%;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.contact-us-section .contact-us-image-wrapper.square {
aspect-ratio: 1/1;
}
.contact-us-section .contact-us-image-wrapper.portrait {
aspect-ratio: 3/4;
}
.contact-us-section .contact-us-image-wrapper.landscape {
aspect-ratio: 4/3;
}
.contact-us-section .contact-us-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.contact-us-section .contact-us-image:hover {
transform: scale(1.02);
}
.contact-us-section .contact-us-form-wrapper {
padding: 30px;
background-color: #f8f8f8;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.contact-us-section .contact-us-form-title {
font-size: 22px;
font-weight: 600;
color: #333;
margin-bottom: 25px;
text-align: center;
}
.contact-us-section .contact-us-form-success,
.contact-us-section .contact-us-form-error {
padding: 12px 15px;
margin-bottom: 20px;
border-radius: 6px;
font-size: 14px;
}
.contact-us-section .contact-us-form-success {
background-color: #e8f5e9;
color: #2e7d32;
}
.contact-us-section .contact-us-form-error {
background-color: #ffebee;
color: #c62828;
}
.contact-us-section .contact-us-form-field {
margin-bottom: 18px;
}
.contact-us-section .contact-us-form-input,
.contact-us-section .contact-us-form-textarea {
width: 100%;
padding: 12px 15px;
font-size: 15px;
border: 1px solid #ddd;
border-radius: 6px;
background-color: #fff;
transition: border-color 0.3s ease;
}
.contact-us-section .contact-us-form-textarea {
min-height: 120px;
resize: vertical;
}
.contact-us-section .contact-us-form-input:focus,
.contact-us-section .contact-us-form-textarea:focus {
border-color: #888;
outline: none;
box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}
.contact-us-section .contact-us-form-checkbox {
display: flex;
align-items: center;
gap: 10px;
}
.contact-us-section .contact-us-form-checkbox input {
width: 18px;
height: 18px;
}
.contact-us-section .contact-us-form-checkbox label {
font-size: 14px;
color: #555;
}
.contact-us-section .contact-us-form-submit {
margin-top: 25px;
text-align: center;
}
.contact-us-section .contact-us-form-button {
padding: 12px 30px;
font-size: 16px;
font-weight: 600;
border: none;
border-radius: 6px;
cursor: pointer;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.contact-us-section .contact-us-form-button:hover {
opacity: 0.9;
transform: translateY(-2px);
}
/* Responsive Styles */
@media (min-width: 768px) {
.contact-us-section .contact-us-blocks-grid {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.contact-us-section .contact-us-form-wrapper {
grid-column: span 2;
}
}
@media (min-width: 992px) {
.contact-us-section .contact-us-title {
font-size: 36px;
}
.contact-us-section .contact-us-blocks-grid {
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.contact-us-section .contact-us-form-wrapper {
grid-column: span 3;
}
}
@media (max-width: 767px) {
.contact-us-section .contact-us-container {
padding: 0 15px;
}
.contact-us-section .contact-us-title {
font-size: 28px;
}
.contact-us-section .contact-us-form-wrapper {
padding: 25px 20px;
}
}
{% endstylesheet %}
{% javascript %}
document.addEventListener('DOMContentLoaded', function() {
const contactForm = document.getElementById('ContactForm');
if(contactForm) {
// Apply dynamic aspect ratio to image if present
const imageWrapper = document.querySelector('.contact-us-image-wrapper');
if(imageWrapper) {
const ratioClass = '{{ block.settings.image_ratio }}';
if(ratioClass) {
imageWrapper.classList.add(ratioClass);
}
}
// Form validation
contactForm.addEventListener('submit', function(e) {
const emailInput = document.getElementById('ContactFormEmail');
if(emailInput && !isValidEmail(emailInput.value)) {
e.preventDefault();
// Create error message
const errorDiv = document.createElement('div');
errorDiv.classList.add('contact-us-form-error');
errorDiv.textContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
// Remove existing error messages
const existingErrors = contactForm.querySelectorAll('.contact-us-form-error');
existingErrors.forEach(error => error.remove());
// Add new error message at the top
contactForm.prepend(errorDiv);
// Scroll to error
errorDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
}
// Email validation helper
function isValidEmail(email) {
const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
});
{% endjavascript %}