ホーム > ブログ > concrete5 > コンクリの外部フォームでお問い合わせフォーム作ったよ

コンクリの外部フォームでお問い合わせフォーム作ったよ

2015.12.01

こんちゃ、銀ねこです。

コンクリの外部フォームを使ってフォーム作りました。
5.7のリファレンスが少なめなのでメモします。

外部フォームってなんぞや

concrete5には外部フォームというブロックがあり、ここに自分でphpをゴリゴリ書いて独自のフォームを作成することができます。

もちろん、デフォでもフォームブロックは用意されておりも管理画面でお問い合わせ内容などの管理もできて便利です。…が、デザインの自由度も効かないし自動返信もできませんので今一歩な使い勝手。。。。

ということでやはりお好みのフォームを作りたいときは外部フォームブロックがおすすめです!!。

ただ、こいつを使うときはある程度のphpスキルが必要です。
ちょっと敷居が高いですが、コンクリにはバリデートやフォームに関するヘルパーも用意されてるので多少phpかじってる私でも問題なくフォームつくることができました。ちょっと興奮気味ですよ笑

今回はデフォのフォームブロックを参考にしました。

下準備

フォーム送信の流れは以下の通り。

1.フォーム項目の登録。

2.バリデート(文字数とかきちんとアドレスを登録をできてるかなど)を判定して問題なければ送信。

3.メールがサイトオーナーとフォーム送信者の両方に届く。

4.thanksメッセージを表示。

例えば今回下記のようなフォームにします。

  • アンケート(3択)
  • メールアドレス

これを実現するために必要なのは以下のファイル。

  • フォームのコントローラー(挙動の制御)
  • フォームのビュー(見た目)
  • メールの中身

今回はコントローラー、ビューはapplication/block/external_form内にformというフォルダを新規作成してその中に配置します。
(packagesにまとめる際のことはまた改めて追記します〜)

今回はファイル名をcontact_form.phpとしました。
見た目を整形していく用のビューのファイルはform直下に配置します。挙動の制御をするコントローラーファイルはさらにその直下にcontrollerフォルダを作って同じ名前のファイルを置きます。

名称未設定-1.jpg

application/mail直下に送信するメール内容のテンプレートになるmail_complete.phpという名前でファイルを配置します。

コントローラー、ビュー、メールのテンプレを作る

フォームのバリデート、送信後の挙動などをこのファイルで設定します。

今回application/block直下に置くのでnamespaceを Application\Block\ExternalForm\Form\Controllerとします。

5.6と違い、useで使いたいもの?クラス?を呼び出さないと使えないようです。ベースのフレームワークsymphonyのせいだろうか。。。。

ここではCoreとUserInfoをuseで設定します。

これがないとユーザー情報を呼び出したりCore::makeでバリデートやメールヘルパー(ビューと少し呼び出し方が違います)が使えません。

  1. <?php
  2. namespace Application\Block\ExternalForm\Form\Controller;
  3. use Concrete\Core\Controller\AbstractController;
  4. use Core;
  5. use UserInfo;
  6.  
  7. class ContactForm extends AbstractController {
  8.  
  9. public function action_send_mail($bID = false)
  10. {
  11. //ここに処理を書く
  12. }
  13. }

バリデートと送信後の処理処理を設定します。

なので以下のような処理になります。
まだバリデートをしっかり研究してないので(汗今の所こんな感じです。
Core::make('helper/validation/strings')の中にemailのバリデートを発見したので以下のようにチェック。名前は1文字以上、選択項目は何かしらあればOKという感じでバリデートをかけました。

Core::make('helper/mail')で超便利なメールヘルパーも呼び出します。

ここについてはまだ研究中で後日追記しようと思います。

  1. <?php
  2. namespace Application\Block\ExternalForm\Form\Controller;
  3. use Concrete\Core\Controller\AbstractController;
  4. use Core;
  5. use UserInfo;
  6.  
  7. class ContactForm extends AbstractController {
  8.  
  9. public function action_send_mail($bID = false)
  10. {
  11.  
  12. if ($this->bID == $bID) {
  13. // validation/form ヘルパーを呼び出し
  14. $email = Core::make('helper/validation/strings');
  15.  
  16. // postデータを登録
  17. $post = $this->post();
  18. // 登録内容の検証
  19. $errormsg = '';
  20. if(implode($this->post('magazine')) == null){
  21. $errormsg .= 'いずれか選択してください。<br>';
  22. }
  23. if($this->post('name') == null){
  24. $errormsg .= '名前を登録は必須です。<br>';
  25. }
  26. if(!$email->email($this->post('email'))){
  27. $errormsg .= '有効なメールアドレスを入力してください。<br>';
  28. }
  29. if($errormsg){
  30. $this->set('error', $errormsg);
  31. }
  32. else{
  33. $mh = Core::make('helper/mail');
  34. $adminUserInfo = UserInfo::getByID(USER_SUPER_ID);
  35. $mh->bcc($adminUserInfo->getUserEmail());//サイトオーナーへbcc送信
  36. $mh->from($adminUserInfo->getUserEmail(), '銀ねこアトリエ');;//メール送信元
  37.  
  38. $mh->to($this->post('email'));//登録者への自動返信
  39. //パラメータをゲット
  40. $mh->addParameter('name', $this->post('name'));
  41. $mh->addParameter('email', $this->post('email'));
  42. $mh->addParameter('magazine', $this->post('magazine'));
  43.  
  44. $mh->load('mail_complete');//メールテンプレの読み込み
  45. @$mh->sendMail();//メール送信
  46. $this->set('response',true);//メールが送れた後の処理
  47. return true;
  48. }
  49.  
  50. }
  51.  
  52. }
  53.  
  54. }
  55.  

ビューの方はこんな感じになります。
ここからはフォームヘルパーが本領発揮!

Loader::helper('form');でヘルパー呼び出し、$formにヘルパーを格納。
$form->radio('thing[]', 'radio01')?>といった形で 各フォーム部品を作成します。

バリデートでエラーが出たらエラーメッセージが表示され、うまく送信できたら表示が切り替わる処理になってます。

  1. <?php
  2. $form = Loader::helper('form');
  3. if (isset($error)) { //バリデート後のエラーメッセージ?>
  4. <div class="errormsg"><?php echo $error?></div>
  5. <?php }
  6. if (isset($response)) { //送信後の処理?>
  7. <section id="thanks">
  8. <h3>お問い合わせが完了いたしました</h3>
  9. <p>お問合せありがとうござました</p>
  10. </section>
  11. <?php } else { ?>
  12. <section id="contact">
  13. <form method="post" action="<?php echo $view->action('thanks')?>">
  14.  
  15. <dl>
  16. <dt>興味のある項目を選んでください<span>※必須</span></dt>
  17. <dd>
  18. <span><?php echo $form->radio('magazine[]', 'php')?> PHP</span>
  19. <span><?php echo $form->radio('magazine[]', 'css')?> css</span>
  20. <span><?php echo $form->radio('magazine[]', 'jQuery')?> jQuery</span>
  21. </dd>
  22. <dt>お名前<span>※必須</span></dt>
  23. <dd><?php echo $form->text('name')?></dd>
  24. <dt>メールアドレス<span>※必須</span></dt>
  25. </dl>
  26.  
  27. <div class="form-group">
  28. <input type="submit" name="submit" value="送信" class="btn btn-default" />
  29. </div>
  30.  
  31. </form>
  32. </section>
  33. <?php }?>

フォーム送信後のメールのテンプレートはこんな感じです。

  1. <?php
  2. defined('C5_EXECUTE') or die(_("Access Denied."));
  3. //タイトル
  4. $subject = 'お問い合わせありがとうございます<銀ねこアトリエ>';
  5.  
  6. $content ='\r\n';
  7. $content .='後ほど担当者よりご回答させていただきますので今しばらくお待ちくださいませ。
  8. ---------------------------------------\r\n';
  9. $content .= 'お名前  :'.$name.'\r\n';
  10. $content .= 'E-MAIL     :'.$email.'\r\n';
  11. $content .= 'ご興味のある項目 :'.implode(', ', $magazine).'\r\n';
  12.  
  13. $body = t('この度はお問い合わせ頂きまことにありがとうございました。%s',$content);

まとめ。

コンクリなら外部フォームを使えばお問い合わせフォーム作成もそこまで大変じゃないことはわかっていただけたと思います。

この記事のタグ