contact_form¶
The contact_form macro allows rendering a form used to contact a merchant.
Definition¶
Input parameters¶
options¶
options parameter represents an object of input attributes described in the table below. If some of the settings are not specified or the object is not passed default settings will be used.
| Option key | Type | Default | Required | Description |
|---|---|---|---|---|
| options.title | string |
Contact form | no | A title of the module |
| options.shouldDisplayDescription | number |
0 | no | If set to 1 the description will appear below the title |
| options.description | string |
"" | no | A description of the module |
| options.shouldDisplayNameField | number |
1 | no | If set to 1 a name field will be displayed in the contact form |
| options.shouldDisplayEmailField | number |
1 | no | If set to 1 an email field will be displayed in the contact form |
| options.shouldDisplaySubjectField | number |
1 | no | If set to 1 a subject field will be displayed in the contact form |
| options.shouldDisplayContentField | number |
1 | no | If set to 1 a content field will be displayed in the contact form |
| options.shouldDisplayAdditionalFields | number |
1 | no | If set to 1 additional fields will be displayed in the contact form |
| options.instanceId | number |
- | no | Represents an id of a contact form. If not specified it will be automatically generated |
Example¶
Display a contact form with default values. In such case you do not pass any options.
Example¶
Display a contact form with custom title, name field and email field. Such form would be rendered without description since by default it is not present and also without subject field, content field or additional fields as their default values are overwritten by custom options.
{% from "@macros/contact_form.twig" import contact_form %}
{%
set options = {
title: 'My contact form',
shouldDisplaySubjectField: 0
shouldDisplayContentField: 0,
shouldDisplayAdditionalFields: 0,
instanceId: 8
}
%}
{% contact_form(options) %}
Macro source code¶
{% macro contact_form(options = {}) %}
{% from "@macros/control_checkbox.twig" import control_checkbox %}
{% from "@macros/control_input.twig" import control_input %}
{% from "@macros/control_textarea.twig" import control_textarea %}
{% from "@macros/control_select.twig" import control_select %}
{% set additionalFields = ObjectApi.getContactAdditionalFields() %}
{%
set contactFormOptions = ({
title: "Formularz kontaktowy",
shouldDisplayNameField: 1,
shouldDisplaySubjectField: 1,
shouldDisplayAdditionalFields: 1
})|merge(options)
%}
<div class="contact-form">
<h2 class="module__header contact-form__header">
<div class="module__header-title">
<span class="module__header_highlight">{{ contactFormOptions.title }}</span>
</div>
</h2>
{% if contactFormOptions.shouldDisplayDescription %}
<div class="contact-form__description">{{ contactFormOptions.description }}</div>
{% endif %}
<div class="form__additional-info">
<i>
{{ translate('Required fields are marked with') }} -
<span class="form__additional-info_secondary">*</span>
</i>
</div>
<contact-form module-instance-id="{{ options.instanceId }}">
<div slot="form">
{% if contactFormOptions.shouldDisplayNameField %}
{{
control_input({
name: 'name',
label: translate('First and last name'),
id: 'contact-name'
})
}}
{% endif %}
{{
control_input({
name: 'email',
label: translate('E-mail address'),
id: 'contact-email',
controlValidators: {
required: true,
email: true
},
type: 'email'
})
}}
{% if contactFormOptions.shouldDisplaySubjectField %}
{{
control_input({
name: 'subject',
label: translate('Subject'),
id: 'contact-subject'
})
}}
{% endif %}
{{
control_textarea({
name: 'content',
label: translate('Message'),
id: 'contact-content',
placeholder: translate("Enter your message"),
controlValidators: {
required: true
}
})
}}
{% if additionalFields.count > 0 and contactFormOptions.shouldDisplayAdditionalFields %}
{% for field in additionalFields %}
{% if field.isInfo %}
<p>{{ field.name|raw }}</p>
{% elseif field.isCheckbox %}
{{
control_checkbox({
id: field.id,
name: "additional_#{ field.id }",
label: field.name,
checked: field.isChecked,
required: field.isRequired,
hidden: field.isHidden,
value: '1'
})
}}
{% elseif field.isText or field.isHidden %}
{{
control_input({
name: "additional_#{ field.id }",
label: field.name,
id: field.id,
controlValidators: {
required: field.isRequired,
hidden: field.isHidden,
},
type: field.isHidden ? 'hidden' : 'text'
})
}}
{% elseif field.isSelect %}
{{
control_select({
name: "additional_#{ field.id }",
label: field.name,
id: field.id,
required: field.isRequired,
hidden: field.isHidden,
options: field.options
})
}}
{% endif %}
{% endfor %}
{% endif %}
<flash-messenger class="flash-messenger control" name="contact-form-{{ options.instanceId }}"></flash-messenger>
<div class="grid__row grid__row_xs-hright mb-xs-4">
<div class="grid__col grid__col_xs-12">
<button type="submit" class="btn btn_primary">{{ translate('Send') }}</button>
</div>
</div>
</div>
</contact-form>
</div>
{% endmacro %}