お問い合わせフォームにテキストエリアを追加することで、ユーザーが自由な形式で詳細な情報を入力できるようになります。ここでは、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または使用中のテーマのテンプレートファイルを編集します。テキストエリアを追加したい箇所に以下のHTMLコードを追加します。
<div class="ec-form-textarea"> <label class="ec-form-label" for="your_textarea_name">詳細内容</label> <textarea id="your_textarea_name" name="your_textarea_name" rows="5" class="ec-form-control"></textarea></div>2.フォームタイプの編集
src/Eccube/Form/Type/ContactType.phpファイルを編集し、TextareaType::classを使ってテキストエリアのフィールドを定義します。
use Symfony\Component\Form\Extension\Core\Type\TextareaType;// ...public function buildForm(FormBuilderInterface $builder, array $options){ $builder ->add('your_textarea_name', TextareaType::class, [ 'label' => '詳細内容', 'required' => false, 'attr' => [ 'rows' => 5, 'placeholder' => 'こちらにご入力ください', ], ]);}3.コントローラーの編集
src/Eccube/Controller/Entry/ContactController.phpを編集し、フォームから送信されたテキストエリアの値を取得します。
// ...if ($form->isSubmitted() && $form->isValid()) { $contactData = $form->getData(); $textareaValue = $contactData['your_textarea_name']; // 取得した値を処理}// ...4.テンプレートでの表示
contact.twigで追加したフォーム要素を表示するため、{{ form_row(form.your_textarea_name) }}を追加します。
5.キャッシュのクリア
管理画面の「設定」＞「システム」＞「キャッシュ管理」からキャッシュをクリアしてください。
EC-CUBE 3.x での追加手順
EC-CUBE 3.xでは、Smartyテンプレートと独自のフォーム機能を使用します。
1.テンプレートファイルの編集
html/template/default/contact.tplまたは使用中のテーマのテンプレートファイルを編集します。テキストエリアを追加したい箇所に以下のHTMLコードを追加します。
<div class="form-group"> <label class="control-label" for="your_textarea_name">詳細内容</label> <div> <textarea id="your_textarea_name" name="your_textarea_name" rows="5" class="form-control"></textarea> </div> {if $arrErr.your_textarea_name}<p class="error">{$arrErr.your_textarea_name}</p>{/if}</div>2.PHPファイルの編集
data/class/pages/LC_Page_Contact.phpファイルを編集し、initメソッド内でarrFormにテキストエリアの定義を追加します。
function init() { parent::init(); $this->arrForm = array_merge($this->arrForm, array( 'your_textarea_name' => array( 'type' => 'textarea', 'label' => '詳細内容', 'required' => false, 'rows' => 5, 'attr' => array( 'placeholder' => 'こちらにご入力ください', ), ), ));}3.コントローラーでの値の取得
processメソッドなどで、フォームから送信されたテキストエリアの値を取得します。
function action() { if ($this->oForm->validate()) { $textareaValue = $this->oForm->get('your_textarea_name'); // 取得した値を処理 }}4.テンプレートでの表示
contact.tplでフォーム要素を表示するため、以下のHTMLコードを使用します。
<div class="form-group"> <label class="control-label" for="your_textarea_name">{$arrForm.your_textarea_name.label}</label> <div> <textarea id="your_textarea_name" name="{$arrForm.your_textarea_name.name}" rows="{$arrForm.your_textarea_name.rows|default:3}" class="form-control {if $arrForm.your_textarea_name.attr.class}{$arrForm.your_textarea_name.attr.class}{/if}" placeholder="{$arrForm.your_textarea_name.attr.placeholder}"></textarea> </div> {if $arrErr.your_textarea_name}<p class="error">{$arrErr.your_textarea_name}</p>{/if}</div>5.キャッシュのクリア
管理画面の「設定」＞「システム」＞「キャッシュ管理」からキャッシュをクリアしてください。
注意点
バックアップの取得: カスタマイズを行う前に、必ず関連ファイルのバックアップを取得してください。
子テーマの利用: デフォルトテーマを直接編集するのではなく、子テーマを作成してカスタマイズすることをおすすめします。これにより、EC-CUBEのアップデート時にカスタマイズ内容が失われるリスクを減らせます。
セキュリティ対策: フォームから送信されるデータは、適切にバリデーションし、サニタイジングを行うなど、セキュリティ対策を十分に行ってください。
