Demonstrate Contact Form with Thank You Message.
View this pattern on the live demo site
Visit Us page: banner, contact block with form, then a map.
{% comment %}
Renders a super simple contact page
{% endcomment -%}
{%- include "/_header.liquid" no_header_title: true -%}
{%- include "/sections/_generic_banner.liquid" -%}
{%- include "/sections/_breadcrumbs.liquid" -%}
{%- include "/sections/_contact_info_with_form.liquid" %}{% comment %}For a simpler layout, use /sections/_form_section.liquid{% endcomment -%}
{%- include "/sections/_map.liquid" section_class:'mt-3' -%}
{%- include "/_footer.liquid" -%}Address, hours, and the contact form used on the live page.
{% comment %}
Displays a contact info section with rich text to the left (or right) of a contact form. When the form is submitted, the provided thank_you_message will be displayed unless the form already has a redirect URL
Inputs:
section_class - an optional classname to apply to the section
section_id - an optional id to apply to the section
Custom Fields:
contact_title
contact_intro_text
contact_items (type, label, text, link, icon)
contact_social_media (type, link),
contact_form_title,
contact_form,
thank_you_message,
contact_section_orientation
Outputs:
section_rendered - true when this section outputs markup, false otherwise
{% endcomment -%}
<section{% if section_class %} class="{{ section_class }}"{% endif %}{% if section_id %} id="{{ section_id }}"{% endif %}>
<div class="container py-5 py-lg-7">
{%- var headinglevel = headinglevel %}{% comment %}Copy to current scope{% endcomment -%}
{%- include '/common/_title_with_subtitle.liquid' title:entity.contact_title title_classname:'h2 mb-4' subtitle:entity.contact_intro_text subtitle_classname:'text-muted mb-5' postincrement_headinglevel:true -%}
<div class="row g-5 align-items-start">
<div class="col-lg-6{% if entity.contact_section_orientation.value == 'left' %} order-2{% endif %}">
{%- if entity.contact_items.is_valid -%}
<div class="mb-4">
{%- for item in entity.contact_items -%}
{%- capture icon -%}
{%- if item.icon.is_valid %}{{item.icon.value|escape}}
{%- else -%}
{%- case item.type.value -%}
{%- when 'email' %}bi bi-envelope-fill
{%- when 'phone' %}bi bi-telephone-fill
{%- when 'address' %}bi bi-geo-alt-fill
{%- else %}bi bi-person-vcard-fill
{%- endcase -%}
{%- endif %}
{%- endcapture -%}
{%- var link = item.link.value -%}
{%- if item.type.value == 'address' -%}
{%- unless link is_valid -%}
{%- set link = item.text.value | url_encode | prepend: 'https://www.google.com/maps/search/?api=1&query=' -%}
{%- endunless -%}
{%- endif -%}
<div class="position-relative d-flex align-items-start gap-3 p-4 bg-white border rounded-3 mb-3 shadow-sm">
<div class="flex-shrink-0 rounded-circle d-flex align-items-center justify-content-center text-bg-primary" style="width: 48px; height: 48px; min-width: 48px;">
<i class="{{icon}} fs-5"></i>
</div>
<div class="flex-grow-1">
{%- if item.label.is_valid -%}
<p class="h6 fw-bold text-primary mb-1">{{item.label}}</p>
{%- endif -%}
<p class="mb-0 text-body">
{%- if link is_valid -%}
<a href="{{link}}" target="_blank" class="text-body text-decoration-none stretched-link">{{item.text}}</a>
{%- else -%}
{{ item.text }}
{%- endif -%}
</p>
</div>
</div>
{%- endfor -%}
</div>
{%- endif -%}
{%- if entity.contact_social_media.is_valid -%}
<div>
<p class="h6 fw-bold text-primary mb-3">{{entity.contact_social_media_title}}</p>
<div class="d-flex gap-3">
{%- for soc in entity.contact_social_media -%}
<a href="{{ soc.link.value }}" target="_blank" rel="noopener noreferrer" class="text-secondary" style="font-size: 2rem;" aria-label="{{soc.type.values | first}}"><i class="{{soc.type.selected | first}}"></i></a>
{%- endfor -%}
</div>
</div>
{%- endif -%}
</div>
<div class="col-lg-6{% if entity.contact_section_orientation.value == 'left' %} order-1{% endif %}">
<div class="text-bg-primary p-4 p-lg-5 rounded-3">
{%- if entity.contact_form_title.is_valid -%}
{%- include '/common/_title.liquid' title:entity.contact_form_title title_classname:'h4 fw-bold mb-4' -%}
{%- endif -%}
{%- include "/partials/_form_with_thankyou.liquid" form:entity.contact_form thank_you_message:entity.thank_you_message -%}
</div>
</div>
</div>
</div>
</section>
{%- set section_rendered = true -%}Custom fields for the combined contact + form section.
[
{
"Type": "group",
"Fields": [
{
"Type": "text",
"FieldID": "contact_title",
"Label": "Section Title"
},
{
"Type": "textarea",
"FieldID": "contact_intro_text",
"Label": "Intro Text"
},
{
"Type": "fieldset",
"Fields": [
{
"Type": "select",
"AllowMultiple": false,
"Options": "email:Email;phone:Phone Number;address:Address;custom:Custom",
"Delimiter": ";",
"ValueDelimiter": ":",
"IsRequired": true,
"FieldID": "type",
"Label": "Type"
},
{
"Type": "text",
"FieldID": "label",
"Label": "Label"
},
{
"Type": "text",
"IsRequired": true,
"FieldID": "text",
"Label": "Text"
},
{
"Type": "url",
"FieldID": "link",
"Label": "Link"
},
{
"Type": "text",
"Placeholder": "bi bi-envelope-fill",
"FieldID": "icon",
"Label": "Icon",
"Subtext": "leave blank to use the default icon for the selected type"
}
],
"AllowMultiple": true,
"InitCollapsed": false,
"FieldID": "contact_items",
"Label": "Contact Information"
},
{
"Type": "text",
"DefaultValue": "Social Media:",
"IsRequired": true,
"FieldID": "contact_social_media_title",
"Label": "Social Media Title"
},
{
"Type": "fieldset",
"Fields": [
{
"Type": "select",
"Options": "bi bi-facebook:Facebook;bi bi-instagram:Instagram;bi bi-twitter-x:X;bi bi-linkedin:LinkedIn;bi bi-envelope-fill:Email;bi bi-telephone-fill:Phone",
"Delimiter": ";",
"ValueDelimiter": ":",
"IsRequired": true,
"FieldID": "type",
"Label": "Type"
},
{
"Type": "url",
"IsRequired": true,
"FieldID": "link",
"Label": "Link"
}
],
"AllowMultiple": true,
"InitCollapsed": false,
"Noun": "social",
"FieldID": "contact_social_media",
"Label": "Social Media"
},
{
"Type": "group",
"Fields": [
{
"Type": "text",
"FieldID": "contact_form_title",
"Label": "Contact Form Title"
},
{
"Type": "form",
"IsRequired": true,
"FieldID": "contact_form",
"Label": "Contact Form"
},
{
"Type": "html",
"FieldID": "thank_you_message",
"Label": "Thank You Message",
"Subtext": "This message will be displayed in place of the form after a successful form submission. This will be ignored if the form has a redirect URL configured."
},
{
"Type": "select",
"AllowMultiple": false,
"Options": "left:Form on the left;right:Form on the right",
"Delimiter": ";",
"ValueDelimiter": ":",
"DefaultValue": "right",
"FieldID": "contact_section_orientation",
"Label": "Orientation"
}
],
"Label": "Contact Form"
}
],
"Label": "Contact Section Settings"
}
]
Simpler form-only section you can swap in when you do not need the info column.
{% comment %}
Displays the given form. When the form is submitted, the provided thank_you_message will be displayed
Inputs:
section_class - an optional classname to apply to the section
section_id - an optional id to apply to the section
output_header_element - true to output the title of the form as a header
header_class - the classname for the form title (if applicable)
Custom Fields:
contact_form - the form to display
thank_you_message - the message to display on successful form submission
Outputs:
section_rendered - true when this section outputs markup, false otherwise
{% endcomment -%}
{%- if entity.contact_form.is_valid -%}
<section{% if section_class %} class="{{ section_class }}"{% endif %}{% if section_id %} id="{{ section_id }}"{% endif %}>
<div class="container">
{%- if output_header_element and entity.contact_form.title.is_valid -%}
{%- include '/common/_title.liquid' title:entity.contact_form.title title_classname:header_class -%}
{%- endif -%}
{%- include "/partials/_form_with_thankyou.liquid" form:entity.contact_form thank_you_message:entity.thank_you_message -%}
</div>
</section>
{%- set section_rendered = true -%}
{%- else -%}
{%- set section_rendered = false -%}
{%- endif -%}Custom fields owned by the simpler form section.
[
{
"Type": "group",
"Fields": [
{
"Type": "form",
"IsRequired": true,
"FieldID": "contact_form",
"Label": "Contact Form"
},
{
"Type": "html",
"FieldID": "thank_you_message",
"Label": "Thank You Message"
}
],
"Label": "Form Section"
}
]
Renders the form and swaps in the thank-you message after submit.
{% comment %}
Renders a form. If the form does not have a template override we will use the bootstrap5 form (from the "Basic Bootstrap 5 Form" package). If the form has a redirect URL configured, then the default behavior will be used after form submission (redirecting to the configured URL). Otherwise, the thank_you_message will be displayed in place of the form.
Inputs:
form - the form to display
thank_you_message - the thank you message to display after the form submission
{% endcomment -%}
{%- if form.is_valid -%}
{%- if form.redirect_url.is_valid -%}
{{form}}
{%- else -%}
{%- var old_form_id = form_id %}{% comment %}so that we can validate that it changed{% endcomment -%}
<div id="{% id output_to_template outer_container_id = prefix:'formouter_' %}">
{%- if form.template_override.is_valid -%}
{{ form }}
{%- else -%}
{%- include '/marketpath/form-bootstrap5/v2/bootstrap5-form.liquid' -%}
{%- endif -%}
</div>
{%- if thank_you_message is_valid and form_id is_valid and form_id != old_form_id -%}
<div id="{% id output_to_template thankyou_container_id = prefix:'ty_' %}" style="display:none" aria-hidden="true">
{{ thank_you_message }}
</div>
{%- add_javascript inline = position:'body' -%}
window.addEventListener('DOMContentLoaded', function() {
var thankyouelem = document.getElementById('{{thankyou_container_id}}');
thankyouelem.remove();
MPForms('{{ form_id }}').config('successHandler', function() {
var form_container = document.getElementById('{{outer_container_id}}');
form_container.style.display = 'none';
form_container.ariaHidden = "true";
form_container.after(thankyouelem);
thankyouelem.style.removeProperty('display');
thankyouelem.ariaHidden = "false";
});
});
{%- end_javascript -%}
{%- endif -%}
{%- endif -%}
{%- endif -%}