EC-CUBE4のお問い合わせフォームに独自の項目を追加する方法

EC-CUBE4でお問い合わせフォームに独自の項目を追加する方法をご紹介いたします。

以下のように「お問い合わせ内容」と「会社名」という項目を追加したいと思います。

お問い合わせ項目を追加した環境

今回お問い合わせ項目を追加した環境は、以下の通りです。

EC-CUBE：4.1.2
サーバー：エックスサーバー
PHP：7.4.28
MySQL：5.7.27

EC-CUBE4のお問い合わせフォームに独自の項目を追加する方法

「お問い合わせ内容(ラジオボタン)」と「会社名(テキスト入力)」という項目を追加する前提でご説明いたします。

ContactTypeExtension.phpの作成

/app/Customize/Form/Extension/ContactTypeExtension.phpを作成します。ファイルの中身は以下の通りです。

<?php
namespace Customize\Form\Extension;
use Eccube\Form\Type\Front\ContactType;
use Symfony\Component\Form\AbstractTypeExtension;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
use Symfony\Component\Form\FormBuilderInterface;

class ContactTypeExtension extends AbstractTypeExtension {
  public static function getExtendedTypes(): iterable {
    return [ContactType::class];
  }

  public function buildForm(FormBuilderInterface $builder, array $options) {
    $builder
      ->add('contact_category', ChoiceType::class, [
        'choices' => [
          '商品について' => '商品について',
          '会員について' => '会員について',
          '返品・返金について' => '返品・返金について',
          'その他' => 'その他'
        ],
        'required' => true,
        'data' => '商品について',
        'expanded' => true
      ])
      ->add('contact_company', TextType::class, [
        'required' => false
      ]);
  }
}

EC-CUBE4.0.xの場合はSymfonyのバージョンが異なるので、以下部分の書き方が若干異なります。

public static function getExtendedTypes(): iterable {
  return [ContactType::class];
}

EC-CUBE4.0.xでは以下のように記述します。

public function getExtendedType() {
  return ContactType::class;
}

ちなみに、「会社名」を必須項目にしたい場合は、以下のように記述します。「use Symfony\Component\Validator\Constraints as Assert」でクラスの読み込みを追加して、”constraints”で「new Assert\NotBlank()」を指定することで、値が空の場合はエラーになります。

<?php
namespace Customize\Form\Extension;
use Eccube\Form\Type\Front\ContactType;
use Symfony\Component\Form\AbstractTypeExtension;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\Validator\Constraints as Assert;

class ContactTypeExtension extends AbstractTypeExtension {
  public static function getExtendedTypes(): iterable {
    return [ContactType::class];
  }

  public function buildForm(FormBuilderInterface $builder, array $options) {
    $builder
      ->add('contact_category', ChoiceType::class, [
        'choices' => [
          '商品について' => '商品について',
          '会員について' => '会員について',
          '返品・返金について' => '返品・返金について',
          'その他' => 'その他'
        ],
        'required' => true,
        'data' => '商品について',
        'expanded' => true,
      ])
      ->add('contact_company', TextType::class, [
        'required' => true,
        'constraints' => [
          new Assert\NotBlank(),
        ]
      ]);
  }
}

お問い合わせ入力画面の編集

/src/Eccube/Resource/template/default/Contact/index.twigを/app/template/default/Contact/index.twigにコピーして、お問い合わせ入力画面に項目を追加します。
※すでに/app/template/default/Contact/index.twigが存在する場合は、appフォルダ配下のファイルを編集します。

<dl>
    <dt>{{ form_label(form.contact_category,  'お問い合わせ内容', { 'label_attr': { 'class': 'ec-label' }}) }}</dt>
    <dd>
        {% for i in 0..3 %}
            <div>
                {{ form_widget(form.contact_category[i]) }}
            </div>
        {% endfor %}
        {{ form_errors(form.contact_category) }}
    </dd>
</dl>
<dl>
    <dt>{{ form_label(form.contact_company,  '会社名', { 'label_attr': { 'class': 'ec-label' }}) }}</dt>
    <dd>
        <div class="ec-input{{ has_errors(form.contact_company) ? ' error' }}">
            {{ form_widget(form.contact_company, { 'attr': { 'placeholder': '会社名' }}) }}
            {{ form_errors(form.contact_company) }}
        </div>
    </dd>
</dl>

上記を追加することで、入力画面に項目が追加されます。

お問い合わせ確認画面の編集

/src/Eccube/Resource/template/default/Contact/confirm.twigを/app/template/default/Contact/confirm.twigにコピーして、お問い合わせ確認画面に項目を追加します。
※すでに/app/template/default/Contact/confirm.twigが存在する場合は、appフォルダ配下のファイルを編集します。

<dl>
    <dt>{{ form_label(form.contact_category,'お問い合わせ内容', { 'label_attr': { 'class': 'ec-label' }}) }}</dt>
    <dd>
    {{ form.contact_category.vars.data }}
    {{ form_widget(form.contact_category, { type :'hidden'})  }}
    </dd>
</dl>
<dl>
    <dt>{{ form_label(form.contact_company,'会社名', { 'label_attr': { 'class': 'ec-label' }}) }}</dt>
    <dd>
    {{ form.contact_company.vars.data }}
    {{ form_widget(form.contact_company, { type :'hidden'})  }}
    </dd>
</dl>

以下のように、確認画面に入力した内容が表示されます。

送信メールの編集

/src/Eccube/Resource/template/default/Mail/contact_mail.html.twigを/app/template/default/Mail/contact_mail.html.twigにコピーして、送信メール本文に項目を追加します。
※すでに/app/template/default/Mail/contact_mail.html.twigが存在する場合は、appフォルダ配下のファイルを編集します。

<dl style="display: flex;border-bottom: 1px dotted #ccc;margin: 0;">
    <dt style="padding-top: 14px;width: 30%;"><label class="ec-label">お問い合わせ内容</label></dt>
    <dd style="width: 70%;line-height: 3;">{{ data.contact_category }}</dd>
</dl>
<dl style="display: flex;border-bottom: 1px dotted #ccc;margin: 0;">
    <dt style="padding-top: 14px;width: 30%;"><label class="ec-label">会社名</label></dt>
    <dd style="width: 70%;line-height: 3;">{{ data.contact_company }}</dd>
</dl>

以下のように、送信メール内にも「お問い合わせ内容」と「会社名」が追加されます。

あとがき

上述した手順が完了したら、管理画面の[コンテンツ管理] – [キャッシュ管理]でキャッシュをクリアします。

いくつもファイル変更が必要で結構面倒ですね。「かんたんフォーム作成プラグイン」という有料プラグインもあるみたいなので、予算が確保できるのであれば、こういうフォーム作成プラグインを購入した方が早いかもしれません。

お問い合わせ項目を追加した環境

EC-CUBE4のお問い合わせフォームに独自の項目を追加する方法

ContactTypeExtension.phpの作成

お問い合わせ入力画面の編集

お問い合わせ確認画面の編集

送信メールの編集

あとがき

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル