# お問い合わせフォームの名前入力を必須にしたい

**URL:** <https://community.shopify.com/t/topic/160702>\
**Category:** 技術的なQ＆A\
**Created:** [October 18, 2022, 7:19am UTC](https://community.shopify.com/t/topic/160702 "2022-10-18T07:19:12Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

Dawnの問い合わせフォームに「名前」入力欄を設けて必須化したいが、メール欄の必須コードを流用しても未入力で送信されてしまうという相談。

提案・対処:
- 名前用のinput要素に required 属性を付与するだけで必須化できる（メール欄のコードをコピーする必要なし）。
- 例: <input ... required>

挙動と注意点:
- required はブラウザのネイティブバリデーションが働くため、送信時にページ遷移せず未入力メッセージが表示される。メール欄の未入力時の挙動とは異なる可能性がある。
- メッセージの文言・スタイルはブラウザ（Chrome/Firefox）ごとに異なり、基本的にスタイル調整はできないとされる。参考リンクが提示。

補足情報:
- 各ブラウザでの表示例のスクリーンショットが添付され、コード断片（input例）が重要。

現状・結論:
- required追加による「一応」の解決策が提示されたが、投稿者からの動作確認・解決報告はまだなく、議論は未確定。

<div class="post-metadata">

**Author:** ![Fukudesign](https://avatars.discourse-cdn.com/v4/letter/f/9d8465/32.png) [@Fukudesign](https://community.shopify.com/u/Fukudesign)\
**Post date:** [October 18, 2022, 7:19am UTC](https://community.shopify.com/t/topic/160702/1 "2022-10-18T07:19:12Z")

</div>

Dawnのお問い合わせフォームに名前入力欄をつくり入力必須にしたいのですが方法がわからずに困っております。

デフォルトで入力必須のメールアドレスのコードをコピペして任意の部分をカスタマイズしましたが、入力せずにそのまま送信してもエラー表示も出ず、送信されてしまいます。

ご教授いただければ幸いです。

* * *

{{ ‘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 -%}

{%- if section.settings.heading != blank -%}
## {{ section.settings.heading | escape }}
{%- else -%}
## {{ 'templates.contact.form.title' | t }}
{%- endif -%} {%- form 'contact', id: 'ContactForm', class: 'isolate' -%} {%- if form.posted\_successfully? -%}
## {% render 'icon-success' %} {{ 'templates.contact.form.post\_success' | t }}
{%- elsif form.errors -%}

## {% render 'icon-error' %} {{ 'templates.contact.form.error\_heading' | t }}

- [{{ form.errors.translated\_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}](#ContactForm-email)

{%- endif -%}

会社名

{{ 'templates.contact.form.name' | t }} \* {%- if form.errors contains 'name' -%} {{ 'accessibility.error' | t }} {% render 'icon-error' %}{{ form.errors }} {{ form.errors.messages }} {%- endif -%}

{{ 'templates.contact.form.email' | t }} \* {%- if form.errors contains 'email' -%} {{ 'accessibility.error' | t }} {% render 'icon-error' %}{{ form.errors.translated\_fields['email'] | capitalize }} {{ form.errors.messages['email'] }} {%- endif -%}

{{ 'templates.contact.form.phone' | t }}

{{- form.body -}} お問い合わせ内容

{{ 'templates.contact.form.send' | t }}
{%- endform -%}

{% schema %}  
{  
“name”: “t:sections.contact-form.name”,  
“tag”: “section”,  
“class”: “section”,  
“settings”: [  
{  
“type”: “text”,  
“id”: “heading”,  
“default”: “Contact form”,  
“label”: “Heading”  
},  
{  
“type”: “select”,  
“id”: “heading\_size”,  
“options”: [  
{  
“value”: “h2”,  
“label”: “t:sections.all.heading\_size.options\_\_1.label”  
},  
{  
“value”: “h1”,  
“label”: “t:sections.all.heading\_size.options\_\_2.label”  
},  
{  
“value”: “h0”,  
“label”: “t:sections.all.heading\_size.options\_\_3.label”  
}  
],  
“default”: “h1”,  
“label”: “t:sections.all.heading\_size.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  
}  
],  
“presets”: [  
{  
“name”: “t:sections.contact-form.presets.name”  
}  
]  
}  
{% endschema %}

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [October 21, 2022, 11:15am UTC](https://community.shopify.com/t/topic/160702/2 "2022-10-21T11:15:55Z")

</div>

emailのinputをコピーして作られたコードは下記でしょうか？

```markup

```

こちらで合っているようでしたら、

おそらく、下記のようにすることで、

一応(※)、必須扱いにできるのではないと思いますが、

いかがでしょうか？

```markup

```

最後に"required"を追加しただけです。

もっと言いますと、inputに"required"がついているだけで、

入力必須扱いになりますので、

メールアドレスのコードをコピーしなくても大丈夫です。

「一応」というのは、

こうした場合、

「送信する」をクリックした際に、

ページ遷移をせずに、

入力必須であることを促すメッセージが表示される(下図)ため、

メールアドレスに入力がない場合の挙動とは異なってしまいます。

 ![screenshot_20221021_01.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/f/1/f1eb6dd8c0f1f0085684ef523d16db8287feda5a.png)

参考: [http://www.htmq.com/html5/input\_required.shtml](http://www.htmq.com/html5/input_required.shtml)

なお、上図のスクリーンショットは、Google Chromeのものですが、

FireFoxですと下記のように表示されます。

 ![screenshot_20221021_02.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/8/a/8aad5c73a85d1df0e19faf5fa1b3589c69e0c2cc.png)

このように、

ブラウザによって、

未入力時のメッセージのスタイルが異なる点もご留意ください。

詳しく調べていませんが、

このメッセージのスタイルの調整はできなかったように記憶しています。

ご希望の回答になっていないかと思いますが、

参考になるようでしたら幸いです。

(キュー田辺)