【shopify】問い合わせフォームのカスタマイズ
今、製作しているshopifyの備忘録兼ねて。
今回紹介するコードの元になったサイトはこちらです。
ここまでオープンにしてくださると、カスタマイズが大変楽でした。本当にありがたいです！
今回の製作では、通常の問い合わせフォームの他、2つの見積フォームを作る必要が出てきたので、上記のサイトのコードを使わせていただき、それに少しだけブロックを追加してみました。
ページ下部に追加修正したコードを掲載しています。
{{ 'section-contact-form.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="contact page-width page-width--narrow section-{{ section.id }}-padding">
{%- comment -%} タイトル {%- endcomment -%}
<h2 class="title title-wrapper--no-top-margin">{{ section.settings.heading | escape }}</h2>
{%- form 'contact', id: 'ContactForm', class: 'isolate custom-form' -%}
{%- if form.posted_successfully? -%}
{%- comment -%} 成功した時のコメント {%- endcomment -%}
<div class="form-status form-status-list form__message" tabindex="-1" autofocus>{% render 'icon-success' %} {{ 'templates.contact.form.post_success' | t }}</div>
{%- elsif form.errors -%}
{%- comment -%} エラー表示 {%- endcomment -%}
<div class="form__message">
<h2 class="form-status caption-large text-body" role="alert" tabindex="-1" autofocus>{% render 'icon-error' %} {{ 'templates.contact.form.error_heading' | t }}</h2>
</div>
<ul class="form-status-list caption-large" role="list">
<li>
<a href="#ContactForm-email" class="link">
{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}
</a>
</li>
</ul>
{%- endif -%}
{% for block in section.blocks %}
{% case block.type %}
{%- comment -%} Eメール {%- endcomment -%}
{% when 'email' %}
<div class="field field--with-error" {{ block.shopify_attributes }}>
<input
autocomplete="email"
type="email"
id="Form-{{ section.id }}-{{ forloop.index0 }}"
class="field__input"
name="contact[email]"
spellcheck="false"
autocorrect="off"
autocapitalize="off"
value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
required="true"
{% if form.errors contains 'email' %}
aria-invalid="true"
aria-describedby="ContactForm-email-error"
{% endif %}
placeholder="{{ block.settings.title }}"
>
<label class="field__label" for="Form-{{ section.id }}-{{ forloop.index0 }}">
{{ block.settings.title }}
<span aria-hidden="true">*</span>
</label>
{%- if form.errors contains 'email' -%}
<small class="contact__field-error" id="ContactForm-email-error">
<span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
<span class="form__message">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</span>
</small>
{%- endif -%}
</div>
{%- comment -%} 本文 {%- endcomment -%}
{% when 'body' %}
<div class="field" {{ block.shopify_attributes }}>
<textarea
rows="10"
id="ContactForm-body"
class="text-area field__input"
required="true"
name="contact[{{ 'templates.contact.form.comment' | t }}]"
placeholder="{{ 'templates.contact.form.comment' | t }}"
>
{{- form.body -}}
</textarea>
<label class="form__label field__label" for="ContactForm-body">
{{ block.settings.title }}
<span aria-hidden="true">*</span>
</label>
</div>
{%- comment -%} 1行 テキスト{%- endcomment -%}
{% when 'text' %}
<div class="field" {{ block.shopify_attributes }}>
<input class="field__input"
type="text"
id="Form-{{ section.id }}-{{ forloop.index0 }}"
name="contact[{{ block.settings.title }}]"
value=""
placeholder="{{ block.settings.title }}"
{% if block.settings.check %} required="true" {% endif %}
>
<label class="field__label" for="Form-{{ section.id }}-{{ forloop.index0 }}">
{{ block.settings.title }}
{% if block.settings.check %}<span aria-hidden="true">*</span>{% endif %}
</label>
</div>
{%- comment -%} テキストエリア {%- endcomment -%}
{% when 'textarea' %}
<div class="field" {{ block.shopify_attributes }}>
<textarea
rows="10"
id="Form-{{ section.id }}-{{ forloop.index0 }}"
class="text-area field__input"
name="contact[{{ block.settings.title | handleize | default: 'textarea' }}]"
placeholder="{{ block.settings.title }}"
{% if block.settings.check %} required="true" {% endif %}
>
{{- form.body -}}
</textarea>
<label class="form__label field__label" for="Form-{{ section.id }}-{{ forloop.index0 }}">
{{ block.settings.title }}
{% if block.settings.check %}<span aria-hidden="true">*</span>{% endif %}
</label>
</div>
{%- comment -%} 電話番号 {%- endcomment -%}
{% when 'telephone' %}
<div class="field" {{ block.shopify_attributes }}>
<input type="tel"
id="ContactForm-phone" class="field__input"
autocomplete="tel"
name="contact[{{ block.settings.title }}]"
pattern="[0-9\-]*"
value=""
placeholder="{{ block.settings.title }}"
{% if block.settings.check %} required="true" {% endif %}
>
<label class="field__label" for="ContactForm-phone">
{{ block.settings.title }}
{% if block.settings.check %}<span aria-hidden="true">*</span>{% endif %}
</label>
</div>
{%- comment -%} 名前 {%- endcomment -%}
{% when 'name' %}
<div class="field" {{ block.shopify_attributes }}>
<input class="field__input"
autocomplete="name"
type="text"
id="ContactForm-name"
required="true"
name="contact[{{ 'templates.contact.form.name' | t }}]"
value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
placeholder="{{ block.settings.title }}">
<label class="field__label" for="ContactForm-name">
{{ block.settings.title }}
<span aria-hidden="true">*</span>
</label>
</div>
{%- comment -%} 見出し {%- endcomment -%}
{% when 'formHeading' %}
<div class="custom-form__block custom-form__block--heading form-item" {{ block.shopify_attributes }}>
<p class="strong">{{ block.settings.title }}</p>
</div>
{%- comment -%} 装飾 {%- endcomment -%}
{% when 'spacer' %}
{%- assign hr_class = 'hr--clear' -%}
{%- if block.settings.line -%}
{%- assign hr_class = '' -%}
{%- endif -%}
<div class="form-item" {{ block.shopify_attributes }}>
<hr class="{{ hr_class }}">
</div>
{%- comment -%} チェックボックス {%- endcomment -%}
{% when 'checkbox' %}
<div class="field no-border" {{ block.shopify_attributes }}>
<label for="Form-{{ section.id }}-{{ forloop.index0 }}">
<input type="checkbox"
id="Form-{{ section.id }}-{{ forloop.index0 }}"
class="contactFormCheckbox"
name="contact[{{ block.settings.title | handleize | default: 'checkbox' }}]"
value="{{ block.settings.title }}"
{% if block.settings.check %} required="true" {% endif %}
>
{{ block.settings.title }}
{% if block.settings.check %}<span aria-hidden="true">*</span>{% endif %}
</label>
</div>
{%- comment -%} ラジオボタン {%- endcomment -%}
{% when 'radio' %}
<div class="field no-border colum" {{ block.shopify_attributes }}>
{% if block.settings.title != blank %}
<legend class="custom-form__label">
{{ block.settings.title }}
{% if block.settings.check %}<span aria-hidden="true">*</span>{% endif %}
</legend>
{% endif %}
{% if block.settings.label-one != blank %}
<div>
<input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}-1" class="contactFormRadio" name="contact[{{ block.settings.title | handleize | default: 'radio' }}]" value="{{ block.settings.label-one }}"
{% if block.settings.check %} required="true" {% endif %}>
<label for="Form-{{ section.id }}-{{ forloop.index0 }}-1">{{ block.settings.label-one }}</label>
</div>
{% endif %}
{% if block.settings.label-two != blank %}
<div>
<input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}-2" class="contactFormRadio" name="contact[{{ block.settings.title | handleize | default: 'radio' }}]" value="{{ block.settings.label-two }}">
<label for="Form-{{ section.id }}-{{ forloop.index0 }}-2">{{ block.settings.label-two }}</label>
</div>
{% endif %}
{% if block.settings.label-three != blank %}
<div>
<input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}-3" class="contactFormRadio" name="contact[{{ block.settings.title | handleize | default: 'radio' }}]" value="{{ block.settings.label-three }}">
<label for="Form-{{ section.id }}-{{ forloop.index0 }}-3">{{ block.settings.label-three }}</label>
</div>
{% endif %}
{% if block.settings.label-four != blank %}
<div>
<input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}-4" class="contactFormRadio" name="contact[{{ block.settings.title | handleize | default: 'radio' }}]" value="{{ block.settings.label-four }}">
<label for="Form-{{ section.id }}-{{ forloop.index0 }}-4">{{ block.settings.label-four }}</label>
</div>
{% endif %}
{% if block.settings.label-five != blank %}
<div>
<input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}-5" class="contactFormRadio" name="contact[{{ block.settings.title | handleize | default: 'radio' }}]" value="{{ block.settings.label-five }}">
<label for="Form-{{ section.id }}-{{ forloop.index0 }}-5">{{ block.settings.label-five }}</label>
</div>
{% endif %}
{% if block.settings.label-six != blank %}
<div>
<input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}-6" class="contactFormRadio" name="contact[{{ block.settings.title | handleize | default: 'radio' }}]" value="{{ block.settings.label-six }}">
<label for="Form-{{ section.id }}-{{ forloop.index0 }}-6">{{ block.settings.label-six }}</label>
</div>
{% endif %}
</div>
{%- comment -%} セレクトボックス {%- endcomment -%}
{% when 'select' %}
<div class="field no-border colum" {{ block.shopify_attributes }}>
{% if block.settings.title != blank %}
<label for="Form-{{ section.id }}-{{ forloop.index0 }}"
class="custom-form__label label--block">
{{ block.settings.title }}
{% if block.settings.check %}<span aria-hidden="true">*</span>{% endif %}
</label>
{% endif %}
<select id="Form-{{ section.id }}-{{ forloop.index0 }}"
class="contactFormSelect"
name="contact[{{ block.settings.title | handleize | default: 'select' }}]"
{% if block.settings.check %} required="true" {% endif %}
>
<option value="">未選択</option>
{% if block.settings.label-one != blank %}
<option value="{{ block.settings.label-one }}">{{ block.settings.label-one }}</option>
{% endif %}
{% if block.settings.label-two != blank %}
<option value="{{ block.settings.label-two }}">{{ block.settings.label-two }}</option>
{% endif %}
{% if block.settings.label-three != blank %}
<option value="{{ block.settings.label-three }}">{{ block.settings.label-three }}</option>
{% endif %}
{% if block.settings.label-four != blank %}
<option value="{{ block.settings.label-four }}">{{ block.settings.label-four }}</option>
{% endif %}
{% if block.settings.label-five != blank %}
<option value="{{ block.settings.label-five }}">{{ block.settings.label-five }}</option>
{% endif %}
{% if block.settings.label-six != blank %}
<option value="{{ block.settings.label-six }}">{{ block.settings.label-six }}</option>
{% endif %}
</select>
</div>
{% endcase %}
{% endfor %}
{%- if section.settings.contact-text != blank -%}
<div class="form_text">
{{ section.settings.contact-text }}
</div>
{%- endif -%}
{%- comment -%} フォームボタン {%- endcomment -%}
<div class="contact__button">
<button type="submit" class="button">
{{ 'templates.contact.form.send' | t }}
</button>
</div>
{%- endform -%}
{%- if section.settings.contact-text-under != blank -%}
<div class="form_text_under">
{{ section.settings.contact-text-under }}
</div>
{%- endif -%}
</div>
</div>
{% schema %}
{
"name": "カスタムしたフォーム",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Contact form",
"label": "Heading"
},
{
"type": "html",
"id": "contact-text",
"label": "送信ボタン上のテキスト"
},
{
"type": "html",
"id": "contact-text-under",
"label": "送信ボタン下のテキスト"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"blocks": [
{
"type": "name",
"name": "お名前",
"limit": 1,
"settings": [
{
"type": "text",
"id": "title",
"label": "お名前",
"default": "フルネーム",
"info": "例：フルネーム"
}
]
},
{
"type": "email",
"name": "Eメール",
"limit": 1,
"settings": [
{
"type": "text",
"id": "title",
"label": "ラベル",
"default": "Eメール"
}
]
},
{
"type": "body",
"name": "本文",
"limit": 1,
"settings": [
{
"type": "textarea",
"id": "title",
"label": "ラベル",
"default": "本文"
}
]
},
{
"type": "text",
"name": "1行テキスト",
"settings": [
{
"type": "text",
"id": "title",
"label": "ラベル",
"default": "フルネーム",
"info": "例：フルネーム"
},
{
"type": "checkbox",
"id": "check",
"label": "必須にする",
"default": false,
"info": "チェックを入れると必須項目にできます。"
}
]
},
{
"type": "textarea",
"name": "テキストエリア",
"settings": [
{
"type": "textarea",
"id": "title",
"label": "ラベル",
"default": "メッセージを入力してください",
"info": "例：メッセージを入力してください"
},
{
"type": "checkbox",
"id": "check",
"label": "必須にする",
"default": false,
"info": "チェックを入れると必須項目にできます。"
}
]
},
{
"type": "telephone",
"name": "電話",
"settings": [
{
"type": "text",
"id": "title",
"label": "ラベル",
"default": "電話番号",
"info": "例：電話番号"
},
{
"type": "checkbox",
"id": "check",
"label": "必須にする",
"default": false,
"info": "チェックを入れると必須項目にできます。"
}
]
},
{
"type": "formHeading",
"name": "見出し",
"settings": [
{
"type": "text",
"id": "title",
"label": "見出し",
"default": "見出し",
"info": "より長いフォームを分割するために使用します"
}
]
},
{
"type": "spacer",
"name": "装飾",
"settings": [
{
"type": "checkbox",
"id": "line",
"label": "水平ライン",
"default": false
}
]
},
{
"type": "checkbox",
"name": "チェックボックス",
"settings": [
{
"type": "text",
"id": "title",
"label": "ラベル",
"default": "チェックボックスオプション",
"info": "例：ニュースレターを購読します"
},
{
"type": "checkbox",
"id": "check",
"label": "必須にする",
"default": false,
"info": "チェックを入れると必須項目にできます。"
}
]
},
{
"type": "select",
"name": "セレクト ドロップダウン",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "選択肢一つを選択してください",
"info": "例：配達場所を選択します"
},
{
"type": "checkbox",
"id": "check",
"label": "必須にする",
"default": false,
"info": "チェックを入れると必須項目にできます。"
},
{
"type": "header",
"content": "最大6つのオプションを含めます",
"info": "未入力のテキストのオプションは表示されません。"
},
{
"type": "text",
"id": "label-one",
"default": "オプション1",
"label": "オプション1"
},
{
"type": "text",
"id": "label-two",
"default": "オプション2",
"label": "オプション2"
},
{
"type": "text",
"id": "label-three",
"default": "オプション3",
"label": "オプション3"
},
{
"type": "text",
"id": "label-four",
"default": "オプション4",
"label": "オプション4"
},
{
"type": "text",
"id": "label-five",
"default": "オプション5",
"label": "オプション5"
},
{
"type": "text",
"id": "label-six",
"default": "オプション6",
"label": "オプション6"
}
]
},
{
"type": "radio",
"name": "ラジオボタン",
"settings": [
{
"type": "text",
"id": "title",
"label": "タイトル",
"default": "オプションを選択します"
},
{
"type": "checkbox",
"id": "check",
"label": "必須にする",
"default": false,
"info": "チェックを入れると必須項目にできます。"
},
{
"type": "header",
"content": "最大6つのオプションを含めます",
"info": "除外するにはオプションテキストを未入力にします"
},
{
"type": "text",
"id": "label-one",
"default": "オプション１",
"label": "オプション１"
},
{
"type": "text",
"id": "label-two",
"default": "オプション２",
"label": "オプション２"
},
{
"type": "text",
"id": "label-three",
"label": "オプション3"
},
{
"type": "text",
"id": "label-four",
"label": "オプション4"
},
{
"type": "text",
"id": "label-five",
"label": "オプション5"
},
{
"type": "text",
"id": "label-six",
"label": "オプション6"
}
]
}
],
"presets": [
{
"name": "カスタムしたフォーム"
}
]
}
{% endschema %}
このコードのほぼ9割は上記のサイトで紹介されているものなので、自分で書いたコードはほとんどないのですが、少し変更しています。
送信ボタンの上下にカスタムhtmlを挿入できるようにしています。
空白の時は何も表示されません。
チェックボックスとかではなく、送信ボタンの前後に注意文を書く必要があったので、このようにカスタマイズしたのですが、あまり需要はないかもです。
ちなみに「contact-form.liquid」をいきなり編集するより、セクションに新しいliquidを追加して編集した方が無難です。
トラブル発生時の対応とかアップデート時の対応とかで楽になるので。
私は「contact-form-custom.liquid」という名前で作りました。
作った後は、テンプレートの「page.contact.json」のformのtypeを新しく作ったセクション名に変更するか、新しくテンプレートを作って、書き換える必要があります。
このあたりの説明はあまり説明されていないので、慣れていない方はご注意ください。
上記はdawnにデフォルトで設定されているフォームのコードです。
赤で囲った箇所を新しく作ったセクション名に変更するだけでOKです。
できればここも新しくjsonファイル作って中身を書き換えた方が無難です。このやり方は他のサイトでもたくさん解説されているので、割愛します。
追加・補足
カスタマイズする上でもうちょっと簡単にいろいろやりたくなったので、上記のliquidも変更してみました。
毎回cssを調整するのも面倒なので、デフォルトのcssをそのまま使える方がアップデート時のトラブルも少ないような気がしたのでliquidの方で変更してみました。
こちらのコードは「チェックボックス」「ラジオボタン」「セレクトボックス」に枠線の表示有無ができるようにしてみました。
フォーム内容によっては表示を合わせた方がいいこともあるし、目立たせたい場合もあるかなと。
変更後のliquid
{{ 'section-contact-form.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="contact page-width page-width--narrow section-{{ section.id }}-padding">
{%- comment -%} タイトル {%- endcomment -%}
<h2 class="title title-wrapper--no-top-margin">{{ section.settings.heading | escape }}</h2>
{%- form 'contact', id: 'ContactForm', class: 'isolate custom-form' -%}
{%- if form.posted_successfully? -%}
{%- comment -%} 成功した時のコメント {%- endcomment -%}
<div class="form-status form-status-list form__message" tabindex="-1" autofocus>{% render 'icon-success' %} {{ 'templates.contact.form.post_success' | t }}</div>
{%- elsif form.errors -%}
{%- comment -%} エラー表示 {%- endcomment -%}
<div class="form__message">
<h2 class="form-status caption-large text-body" role="alert" tabindex="-1" autofocus>{% render 'icon-error' %} {{ 'templates.contact.form.error_heading' | t }}</h2>
</div>
<ul class="form-status-list caption-large" role="list">
<li>
<a href="#ContactForm-email" class="link">
{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}
</a>
</li>
</ul>
{%- endif -%}
{% for block in section.blocks %}
{% case block.type %}
{%- comment -%} Eメール {%- endcomment -%}
{% when 'email' %}
<div class="field field--with-error" {{ block.shopify_attributes }}>
<input
autocomplete="email"
type="email"
id="Form-{{ section.id }}-{{ forloop.index0 }}"
class="field__input"
name="contact[email]"
spellcheck="false"
autocorrect="off"
autocapitalize="off"
value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
required="true"
{% if form.errors contains 'email' %}
aria-invalid="true"
aria-describedby="ContactForm-email-error"
{% endif %}
placeholder="{{ block.settings.title }}"
>
<label class="field__label" for="Form-{{ section.id }}-{{ forloop.index0 }}">
{{ block.settings.title }}
<span aria-hidden="true">*</span>
</label>
{%- if form.errors contains 'email' -%}
<small class="contact__field-error" id="ContactForm-email-error">
<span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
<span class="form__message">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</span>
</small>
{%- endif -%}
</div>
{%- comment -%} 本文 {%- endcomment -%}
{% when 'body' %}
<div class="field" {{ block.shopify_attributes }}>
<textarea
rows="10"
id="ContactForm-body"
class="text-area field__input"
required="true"
name="contact[{{ 'templates.contact.form.comment' | t }}]"
placeholder="{{ 'templates.contact.form.comment' | t }}"
>
{{- form.body -}}
</textarea>
<label class="form__label field__label" for="ContactForm-body">
{{ block.settings.title }}
<span aria-hidden="true">*</span>
</label>
</div>
{%- comment -%} 1行 テキスト{%- endcomment -%}
{% when 'text' %}
<div class="field" {{ block.shopify_attributes }}>
<input class="field__input"
type="text"
id="Form-{{ section.id }}-{{ forloop.index0 }}"
name="contact[{{ block.settings.title }}]"
value=""
placeholder="{{ block.settings.title }}"
{% if block.settings.check %} required="true" {% endif %}
>
<label class="field__label" for="Form-{{ section.id }}-{{ forloop.index0 }}">
{{ block.settings.title }}
{% if block.settings.check %}<span aria-hidden="true">*</span>{% endif %}
</label>
</div>
{%- comment -%} テキストエリア {%- endcomment -%}
{% when 'textarea' %}
<div class="field" {{ block.shopify_attributes }}>
<textarea
rows="10"
id="Form-{{ section.id }}-{{ forloop.index0 }}"
class="text-area field__input"
name="contact[{{ block.settings.title | handleize | default: 'textarea' }}]"
placeholder="{{ block.settings.title }}"
{% if block.settings.check %} required="true" {% endif %}
>
{{- form.body -}}
</textarea>
<label class="form__label field__label" for="Form-{{ section.id }}-{{ forloop.index0 }}">
{{ block.settings.title }}
{% if block.settings.check %}<span aria-hidden="true">*</span>{% endif %}
</label>
</div>
{%- comment -%} 電話番号 {%- endcomment -%}
{% when 'telephone' %}
<div class="field" {{ block.shopify_attributes }}>
<input type="tel"
id="ContactForm-phone" class="field__input"
autocomplete="tel"
name="contact[{{ block.settings.title }}]"
pattern="[0-9\-]*"
value=""
placeholder="{{ block.settings.title }}"
{% if block.settings.check %} required="true" {% endif %}
>
<label class="field__label" for="ContactForm-phone">
{{ block.settings.title }}
{% if block.settings.check %}<span aria-hidden="true">*</span>{% endif %}
</label>
</div>
{%- comment -%} 名前 {%- endcomment -%}
{% when 'name' %}
<div class="field" {{ block.shopify_attributes }}>
<input class="field__input"
autocomplete="name"
type="text"
id="ContactForm-name"
required="true"
name="contact[{{ 'templates.contact.form.name' | t }}]"
value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
placeholder="{{ block.settings.title }}">
<label class="field__label" for="ContactForm-name">
{{ block.settings.title }}
<span aria-hidden="true">*</span>
</label>
</div>
{%- comment -%} 見出し {%- endcomment -%}
{% when 'formHeading' %}
<div class="custom-form__block custom-form__block--heading form-item" {{ block.shopify_attributes }}>
<p class="strong">{{ block.settings.title }}</p>
</div>
{%- comment -%} 装飾 {%- endcomment -%}
{% when 'spacer' %}
{%- assign hr_class = 'hr--clear' -%}
{%- if block.settings.line -%}
{%- assign hr_class = '' -%}
{%- endif -%}
<div class="form-item" {{ block.shopify_attributes }}>
<hr class="{{ hr_class }}">
</div>
{%- comment -%} チェックボックス {%- endcomment -%}
{% when 'checkbox' %}
<div class="{% if block.settings.check-border %}field {% else %}form-space {% endif %}custome_form" {{ block.shopify_attributes }}>
<label for="Form-{{ section.id }}-{{ forloop.index0 }}">
<input type="checkbox"
id="Form-{{ section.id }}-{{ forloop.index0 }}"
class="contactFormCheckbox"
name="contact[{{ block.settings.title | handleize | default: 'checkbox' }}]"
value="{{ block.settings.title }}"
{% if block.settings.check %} required="true" {% endif %}
>
{{ block.settings.title }}
{% if block.settings.check %}<span aria-hidden="true">*</span>{% endif %}
</label>
</div>
{%- comment -%} ラジオボタン {%- endcomment -%}
{% when 'radio' %}
<div class="{% if block.settings.check-border %}field {% else %}form-space {% endif %}custome_form" {{ block.shopify_attributes }}>
{% if block.settings.title != blank %}
<legend class="custom-form__label">
{{ block.settings.title }}
{% if block.settings.check %}<span aria-hidden="true">*</span>{% endif %}
</legend>
{% endif %}
{% if block.settings.label-one != blank %}
<div class="div_form_space">
<input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}-1" class="contactFormRadio" name="contact[{{ block.settings.title | handleize | default: 'radio' }}]" value="{{ block.settings.label-one }}"
{% if block.settings.check %} required="true" {% endif %}>
<label for="Form-{{ section.id }}-{{ forloop.index0 }}-1">{{ block.settings.label-one }}</label>
</div>
{% endif %}
{% if block.settings.label-two != blank %}
<div class="div_form_space">
<input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}-2" class="contactFormRadio" name="contact[{{ block.settings.title | handleize | default: 'radio' }}]" value="{{ block.settings.label-two }}">
<label for="Form-{{ section.id }}-{{ forloop.index0 }}-2">{{ block.settings.label-two }}</label>
</div>
{% endif %}
{% if block.settings.label-three != blank %}
<div class="div_form_space">
<input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}-3" class="contactFormRadio" name="contact[{{ block.settings.title | handleize | default: 'radio' }}]" value="{{ block.settings.label-three }}">
<label for="Form-{{ section.id }}-{{ forloop.index0 }}-3">{{ block.settings.label-three }}</label>
</div>
{% endif %}
{% if block.settings.label-four != blank %}
<div class="div_form_space">
<input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}-4" class="contactFormRadio" name="contact[{{ block.settings.title | handleize | default: 'radio' }}]" value="{{ block.settings.label-four }}">
<label for="Form-{{ section.id }}-{{ forloop.index0 }}-4">{{ block.settings.label-four }}</label>
</div>
{% endif %}
{% if block.settings.label-five != blank %}
<div class="div_form_space">
<input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}-5" class="contactFormRadio" name="contact[{{ block.settings.title | handleize | default: 'radio' }}]" value="{{ block.settings.label-five }}">
<label for="Form-{{ section.id }}-{{ forloop.index0 }}-5">{{ block.settings.label-five }}</label>
</div>
{% endif %}
{% if block.settings.label-six != blank %}
<div class="div_form_space">
<input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}-6" class="contactFormRadio" name="contact[{{ block.settings.title | handleize | default: 'radio' }}]" value="{{ block.settings.label-six }}">
<label for="Form-{{ section.id }}-{{ forloop.index0 }}-6">{{ block.settings.label-six }}</label>
</div>
{% endif %}
</div>
{%- comment -%} セレクトボックス {%- endcomment -%}
{% when 'select' %}
<div class="{% if block.settings.check-border %}field {% else %}form-space {% endif %}custome_form" {{ block.shopify_attributes }}>
{% if block.settings.title != blank %}
<label for="Form-{{ section.id }}-{{ forloop.index0 }}"
class="custom-form__label label--block">
{{ block.settings.title }}
{% if block.settings.check %}<span aria-hidden="true">*</span>{% endif %}
</label>
{% endif %}
<select id="Form-{{ section.id }}-{{ forloop.index0 }}"
class="contactFormSelect"
name="contact[{{ block.settings.title | handleize | default: 'select' }}]"
{% if block.settings.check %} required="true" {% endif %}
>
<option value="" hidden>選択してください</option>
{% if block.settings.label-one != blank %}
<option value="{{ block.settings.label-one }}">{{ block.settings.label-one }}</option>
{% endif %}
{% if block.settings.label-two != blank %}
<option value="{{ block.settings.label-two }}">{{ block.settings.label-two }}</option>
{% endif %}
{% if block.settings.label-three != blank %}
<option value="{{ block.settings.label-three }}">{{ block.settings.label-three }}</option>
{% endif %}
{% if block.settings.label-four != blank %}
<option value="{{ block.settings.label-four }}">{{ block.settings.label-four }}</option>
{% endif %}
{% if block.settings.label-five != blank %}
<option value="{{ block.settings.label-five }}">{{ block.settings.label-five }}</option>
{% endif %}
{% if block.settings.label-six != blank %}
<option value="{{ block.settings.label-six }}">{{ block.settings.label-six }}</option>
{% endif %}
</select>
</div>
{% endcase %}
{% endfor %}
{%- if section.settings.contact-text != blank -%}
<div class="form_text">
{{ section.settings.contact-text }}
</div>
{%- endif -%}
{%- comment -%} フォームボタン {%- endcomment -%}
<div class="contact__button">
<button type="submit" class="button">
{{ 'templates.contact.form.send' | t }}
</button>
</div>
{%- endform -%}
{%- if section.settings.contact-text-under != blank -%}
<div class="form_text_under">
{{ section.settings.contact-text-under }}
</div>
{%- endif -%}
</div>
</div>
{% schema %}
{
"name": "カスタムフォーム",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Contact form",
"label": "Heading"
},
{
"type": "html",
"id": "contact-text",
"label": "送信ボタン上のテキスト"
},
{
"type": "html",
"id": "contact-text-under",
"label": "送信ボタン下のテキスト"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"blocks": [
{
"type": "name",
"name": "お名前",
"limit": 1,
"settings": [
{
"type": "text",
"id": "title",
"label": "お名前",
"default": "フルネーム",
"info": "例：フルネーム"
}
]
},
{
"type": "email",
"name": "Eメール",
"limit": 1,
"settings": [
{
"type": "text",
"id": "title",
"label": "ラベル",
"default": "Eメール"
}
]
},
{
"type": "body",
"name": "本文",
"limit": 1,
"settings": [
{
"type": "textarea",
"id": "title",
"label": "ラベル",
"default": "本文"
}
]
},
{
"type": "text",
"name": "1行テキスト",
"settings": [
{
"type": "text",
"id": "title",
"label": "ラベル",
"default": "フルネーム",
"info": "例：フルネーム"
},
{
"type": "checkbox",
"id": "check",
"label": "必須にする",
"default": false,
"info": "チェックを入れると必須項目にできます。"
}
]
},
{
"type": "textarea",
"name": "テキストエリア",
"settings": [
{
"type": "textarea",
"id": "title",
"label": "ラベル",
"default": "メッセージを入力してください",
"info": "例：メッセージを入力してください"
},
{
"type": "checkbox",
"id": "check",
"label": "必須にする",
"default": false,
"info": "チェックを入れると必須項目にできます。"
}
]
},
{
"type": "telephone",
"name": "電話",
"settings": [
{
"type": "text",
"id": "title",
"label": "ラベル",
"default": "電話番号",
"info": "例：電話番号"
},
{
"type": "checkbox",
"id": "check",
"label": "必須にする",
"default": false,
"info": "チェックを入れると必須項目にできます。"
}
]
},
{
"type": "formHeading",
"name": "見出し",
"settings": [
{
"type": "text",
"id": "title",
"label": "見出し",
"default": "見出し",
"info": "より長いフォームを分割するために使用します"
}
]
},
{
"type": "spacer",
"name": "装飾",
"settings": [
{
"type": "checkbox",
"id": "line",
"label": "水平ライン",
"default": false
}
]
},
{
"type": "checkbox",
"name": "チェックボックス",
"settings": [
{
"type": "text",
"id": "title",
"label": "ラベル",
"default": "チェックボックスオプション",
"info": "例：ニュースレターを購読します"
},
{
"type": "checkbox",
"id": "check",
"label": "必須にする",
"default": false,
"info": "チェックを入れると必須項目にできます。"
},
{
"type": "checkbox",
"id": "check-border",
"label": "枠線の表示する",
"default": false,
"info": "枠線を表示させるかどうか。"
}
]
},
{
"type": "select",
"name": "セレクト ドロップダウン",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "選択肢一つを選択してください",
"info": "例：配達場所を選択します"
},
{
"type": "checkbox",
"id": "check",
"label": "必須にする",
"default": false,
"info": "チェックを入れると必須項目にできます。"
},
{
"type": "checkbox",
"id": "check-border",
"label": "枠線の表示する",
"default": false,
"info": "枠線を表示させるかどうか。"
},
{
"type": "header",
"content": "最大6つのオプションを含めます",
"info": "未入力のテキストのオプションは表示されません。"
},
{
"type": "text",
"id": "label-one",
"default": "オプション1",
"label": "オプション1"
},
{
"type": "text",
"id": "label-two",
"default": "オプション2",
"label": "オプション2"
},
{
"type": "text",
"id": "label-three",
"default": "オプション3",
"label": "オプション3"
},
{
"type": "text",
"id": "label-four",
"default": "オプション4",
"label": "オプション4"
},
{
"type": "text",
"id": "label-five",
"default": "オプション5",
"label": "オプション5"
},
{
"type": "text",
"id": "label-six",
"default": "オプション6",
"label": "オプション6"
}
]
},
{
"type": "radio",
"name": "ラジオボタン",
"settings": [
{
"type": "text",
"id": "title",
"label": "タイトル",
"default": "オプションを選択します"
},
{
"type": "checkbox",
"id": "check",
"label": "必須にする",
"default": false,
"info": "チェックを入れると必須項目にできます。"
},
{
"type": "checkbox",
"id": "check-border",
"label": "枠線の表示する",
"default": false,
"info": "枠線を表示させるかどうか。"
},
{
"type": "header",
"content": "最大6つのオプションを含めます",
"info": "除外するにはオプションテキストを未入力にします"
},
{
"type": "text",
"id": "label-one",
"default": "オプション1",
"label": "オプション1"
},
{
"type": "text",
"id": "label-two",
"default": "オプション2",
"label": "オプション2"
},
{
"type": "text",
"id": "label-three",
"label": "オプション3"
},
{
"type": "text",
"id": "label-four",
"label": "オプション4"
},
{
"type": "text",
"id": "label-five",
"label": "オプション5"
},
{
"type": "text",
"id": "label-six",
"label": "オプション6"
}
]
}
],
"presets": [
{
"name": "カスタムフォーム"
}
]
}
{% endschema %}調整したcss
.custome_form{
padding: 1rem 1.5rem;
}
.custome_form label{
text-indent: 0.5rem;
}
.custome_form select{
margin-left: 3em;
padding: 0.5rem 0 0.5rem 1rem;
border:.1rem solid rgba(var(--color-foreground),.5);
background: #fff ;
}
.form-space{
margin-bottom: 1rem;
}
.form-space label{
padding-left: 1rem;
}
.div_form_space{
margin-left: 3rem;
}※ご注意
このコードはshopifyのdawn7.0.0で検証しています。
サポートなどは一切しておりませんので、ご自身の責任下でお試しください。
すでにカスタマイズされている場合や環境、バージョンによっては崩れたり正常に動作しないこともありますので、ご注意ください。
子育てと両立しながらデザイナーやってます。 フリーランス歴9年、法人成してもうすぐ3期目。基本ノンプログラマーですが、wordpress、shopfyなどカスタマイズ好きでいろいろやってます。 この記事がみなさまのお役に立てますように！