- Shopifyでお問い合わせの項目にラジオボタンの項目を追加したい…
- 簡単にカスタマイズする方法はある？
こんな方のための記事です。
Shopifyで人気の無料テーマDawnでは、お問い合わせフォームをカスタマイズ画面から追加したりできないので、アプリを使用するか、コードを追加する必要があります。
今回はコードを修正する方法を解説します。
とても簡単で、コーディングをしたことが無い方でもできる内容なので、参考にしてみてください。
現状確認
デフォルトのお問い合わせフォームは以下のようになっていて、入力エリアの追加などは出来ません。
これに「お問い合わせの種類」という項目をラジオボタンで追加していきます。
手順
ラジオボタンのHTMLを追加
まずはラジオボタンのHTMLを追加していきます。
オンラインストアの3点リーダーから「コードを編集」をクリックして、コード編集に入ります。
「セクション」→「contact-form.liquid」を編集していきます。
今回は名前とメールの下にラジオボタンを追加したいので、100行目あたりにコードを追加していきます。
下記のコードをコピーして追加してください。
<div class="field radio-field">
<ul class="radio-list">
<li>
<input
type="radio"
id="productInquiry"
name="contact[お問い合わせの種類]"
value="商品に関するお問い合わせ">
<label for="productInquiry">商品に関するお問い合わせ</label>
</li>
<li>
<input
type="radio"
id="purchaseInquiry"
name="contact[お問い合わせの種類]"
value="ご購入商品に関するお問い合わせ">
<label for="purchaseInquiry">ご購入商品に関するお問い合わせ</label>
</li>
<li>
<input
type="radio"
id="serviceInquiry"
name="contact[お問い合わせの種類]"
value="サービスに関するお問い合わせ">
<label for="serviceInquiry">サービスに関するお問い合わせ</label>
</li>
<li>
<input
type="radio"
id="accountArtist"
name="contact[お問い合わせの種類]"
value="アーティストに関するお問い合わせ">
<label for="accountArtist">アーティストに関するお問い合わせ</label>
</li>
<li>
<input
type="radio"
id="otherInquiry"
name="contact[お問い合わせの種類]"
value="その他">
<label for="otherInquiry">その他</label>
</li>
</ul>
</div>追加後は下記のようになります。
これでラジオボタンのHTMLを追加できました！
見た目を整える
次にCSSで見た目を整えます。
アセットから「新しいアセットを追加する」をクリックし、任意の名前のCSSファイルを作成してください。
今回は「custom.css」としておきます。
追加されたCSSに以下のコードをコピペしてください。
.radio-list {
list-style: none;
padding-left: 0;
input[type='radio' i] {
margin-top: 0;
}
}次にCSSをテーマに読み込ませるために「theme.liquid」を編集します。
レイアウトから「theme.liquid」を選択して、「base」と検索してください。
すると254行目あたりに見つかります。
ここの254行目はbase.cssをテーマ全体に読み込んでいる記述なので、コレをコピーしてそのまま下に貼り付け、ファイル名の部分を先ほど追加したCSSのファイル名に書き換え、保存してください。
これで完成です！
項目の追加はできました！
見た目がかなりシンプルなので、先ほど使いしたcssファイルを使用して調整してみてください。
メール確認
最後に実際にメールが送信されて項目が反映されているのか確認してください。
しっかりと「お問い合わせの種類」が反映されたメールが届きました！
これで終了になります！お疲れ様でした！
まとめ
今回は、お問い合わせフォームにラジオボタンの追加する方法について解説しました。
お問い合わせの項目を追加したい！というお客様は非常に多いのでぜひ参考にしてみてください。
このブログでは、他にもShopifyに関する記事を書いていますので、あわせて参考にしてみてください。
