EC-CUBEのお問い合わせフォームにラジオボタンを追加する方法

EC-CUBEのお問い合わせフォームにラジオボタンを追加することで、ユーザーに選択肢を提示し、より具体的な問い合わせ内容を把握できるようになります。
ここでは、EC-CUBE 4.xと3.xのバージョンに分けて手順を説明します。

EC-CUBE 4.x での追加手順

EC-CUBE 4.xでは、Symfonyのフォーム機能とTwigテンプレートを使用します。

1.テンプレートファイルの編集

通常、src/Eccube/Resource/template/default/Entry/contact.twigまたは使用中のテーマのapp/template/テーマ名/Entry/contact.twigを編集します。 ラジオボタンを表示したい箇所に以下のHTMLコードを追加します。

<div class="ec-form-radio"> <label> <input type="radio" name="your_radio_button_name" value="value1"> 選択肢1 </label></div><div class="ec-form-radio"> <label> <input type="radio" name="your_radio_button_name" value="value2"> 選択肢2 </label></div>
Twig

2.フォームタイプの編集

src/Eccube/Form/Type/ContactType.phpファイルを編集します。buildFormメソッド内にChoiceType::classを使ってラジオボタンのフィールドを定義します。

use Symfony\Component\Form\Extension\Core\Type\ChoiceType;// ...public function buildForm(FormBuilderInterface $builder, array $options){ $builder ->add('your_radio_button_name', ChoiceType::class, [ 'choices' => [ '選択肢1' => 'value1', '選択肢2' => 'value2', ], 'expanded' => true, // ラジオボタンとして表示 'multiple' => false, // 単一選択 'label' => 'お問い合わせの種類', 'required' => false, ]);}
PHP

3.コントローラーの編集

src/Eccube/Controller/Entry/ContactController.phpを編集し、フォームから送信されたラジオボタンの値を取得します。

// ...if ($form->isSubmitted() && $form->isValid()) { $contactData = $form->getData(); $selectedRadioButtonValue = $contactData['your_radio_button_name']; // 取得した値を処理}// ...
PHP

4.テンプレートでの表示

contact.twigで追加したフォーム要素を表示するため、{{ form_row(form.your_radio_button_name) }}を追加します。

5.キャッシュのクリア

管理画面の「設定」＞「システム」＞「キャッシュ管理」からキャッシュをクリアしてください。

EC-CUBE 3.x での追加手順

EC-CUBE 3.xでは、Smartyテンプレートと独自のフォーム機能を使用します。

1.テンプレートファイルの編集

html/template/default/contact.tplまたは使用中のテーマのhtml/template/テーマ名/contact.tplを編集します。ラジオボタンを表示したい箇所に以下のHTMLコードを追加します。

<div class="form-group"> <label class="control-label">お問い合わせの種類</label> <div> <label class="radio-inline"> <input type="radio" name="your_radio_button_name" value="value1"> 選択肢1 </label> <label class="radio-inline"> <input type="radio" name="your_radio_button_name" value="value2"> 選択肢2 </label> </div></div>
HTML

2.PHPファイルの編集

data/class/pages/LC_Page_Contact.phpファイルを編集します。initメソッド内でarrFormにラジオボタンの定義を追加します。

function init() { parent::init(); $this->arrForm = array_merge($this->arrForm, array( 'your_radio_button_name' => array( 'type' => 'radio', 'options' => array( 'value1' => '選択肢1', 'value2' => '選択肢2', ), 'label' => 'お問い合わせの種類', 'required' => false, ), ));}
PHP

3.コントローラーでの値の取得

processメソッドなどで、フォームから送信されたラジオボタンの値を取得します。

function action() { if ($this->oForm->validate()) { $your_radio_button_value = $this->oForm->get('your_radio_button_name'); // 取得した値を処理 }}
PHP

4.テンプレートでの表示

contact.tplでフォーム要素を表示するため、{foreach}ループを使ってラジオボタンを生成します。

<div class="form-group"> <label class="control-label">{$arrForm.your_radio_button_name.label}</label> <div> {foreach from=$arrForm.your_radio_button_name.options key=key item=value} <label class="radio-inline"> <input type="radio" name="{$arrForm.your_radio_button_name.name}" value="{$key}" {if $arrForm.your_radio_button_name.value == $key}checked{/if}> {$value} </label> {/foreach} </div></div>
HTML

5.キャッシュのクリア

管理画面の「設定」＞「システム」＞「キャッシュ管理」からキャッシュをクリアしてください。

注意点

バックアップの取得: カスタマイズを行う前に、必ず関連ファイルのバックアップを取得してください。

子テーマの利用: デフォルトテーマを直接編集するのではなく、子テーマを作成してカスタマイズすることをおすすめします。これにより、EC-CUBEのアップデート時にカスタマイズ内容が失われるリスクを減らせます。

セキュリティ対策: フォームから送信されるデータは、適切にバリデーションし、サニタイジングを行うなど、セキュリティ対策を十分に行ってください。

read next