お問い合わせフォームにテキストエリアを追加することで、ユーザーが自由な形式で詳細な情報を入力できるようになります。ここでは、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のアップデート時にカスタマイズ内容が失われるリスクを減らせます。
セキュリティ対策: フォームから送信されるデータは、適切にバリデーションし、サニタイジングを行うなど、セキュリティ対策を十分に行ってください。
