PowerCMS ブログ

フォーム形式のページの作成要件に、入力内容によって分岐処理を入れたり、複数ステップで入力していくような複雑なフォームを作成するような仕様が入ってくるケースがあります。

カスタムフォーム(ContactForm)機能を活用したりプラグインを作成することでこれら複雑な要件に対応させることも可能ですが、DynamicMTMLを活用すればテンプレートとカスタムフィールドの活用でこのようなフォームが作成できます。

特定のキーワードを入力した人にのみフォームを表示する

まず最初に簡単な例として、メディア連動のプレゼントキャンペーンなどでよく目にする「合い言葉」を入力した人にだけ応募フォームを表示するテンプレートの例を考えてみます。

ブログ記事カスタムフィールドを2つ作成します。

ここで活用するPowerCMSのタグは MTQuery(ファンクションタグ)です。

MTQuery

?foo=bar&buz=fizz のようなGETリクエストまたはフォームからPOSTされた値を keyモディファイアで指定して取得します。

ブログ記事のテンプレートに以下のブロックを追加します。

<h1><MTEntryTitle escape="html"></h1>

<h3>質問:<MTEntryQuestion></h3>
<MTDynamicMTML>
<MTQuery key="user_answer" setvar="user_answer">
<MTIf name="user_answer">
    <MTEntryAnswer setvar="entry_answer">
    <MTIf name="user_answer" eq="$entry_answer">
        <MTSetvar name="user_correct" value="1">
<!--応募フォームをここに表示-->
    </MTIf>
</MTIf>
<MTUnless name="user_correct">
    <form action="<MTEntryPermalink>" method="post">
        <input type="text" name="user_answer" value="<MTVar name="user_answer" escape="html">">
        <input type="submit" value="送信する">
    </form>
</MTUnless>
</MTDynamicMTML>

eLearning風、複数ステップのフォームを作成する

続いて、もう少し複雑な複数ステップのフォームをMTMLだけで作成してみます。要件は以下のようなものです。

• 3択形式の質問をラジオボタンで
• 問題数は2問
• 1問ずつ2ステップで選択して次へ進み、3ステップ目で結果を表示
• 1問5点で、最終的に得点を表示する

ブログ記事カスタムフィールドを6つ作成します。

ここで利用するPowerCMSのタグは MTSplitVars(ブロックタグ)です。

MTSplitVars

text モディファイアに渡されたテキストを delimiter モディファイアに渡された文字列で分割し、name モディファイアに指定したテンプレート変数に格納してループ出力します。

ブログ記事のテンプレートに以下のブロックを追加します。

<MTDynamicMTML>
<MTQuery key="step" setvar="step"><!--?step=1パラメタの取得-->
<MTUnless name="step">
    <h3>質問1:<MTEntryQuestion1></h3>
    <form action="<MTEntryPermalink>" method="post">
        <input type="hidden" name="step" value="2">
        <dl>
            <dt></dt>
            <dd>
            <MTEntryChoices1 setvar="entry_choices_1">
            <MTSplitVars text="$entry_choices_1" delimiter="," name="__value__">
            <!--カンマで区切ってテンプレート変数「__value__」に値を入れてループ-->
            <label><input type="radio" name="entry_choices_1" value="<MTVar name="__value__" escape="html">">
            <MTVar name="__value__" escape"html"></label>
            </MTSplitVars>
            <input type="submit" value="送信">
            </dd>
        </dl>
    </form>
</MTUnless>

<MTIf name="step" eq="2"><!--?step=2パラメタが渡されたら-->
    <MTQuery key="entry_choices_1" setvar="entry_choices_1">
    <MTEntryAnswer1 setvar="entry_answer_1">
    <h3>質問1:<!--パラメタとカスタムフィールドの値を比較して正解不正解を判定-->
    <MTIf name="entry_answer_1" eq="$entry_choices_1">
        正解!
    <MTElse>
        不正解!
    </MTElse>
    </MTIf>
    </h3>
    
    <h3>質問2:<MTEntryQuestion2></h3>
    <form action="<MTEntryPermalink>" method="post">
        <input type="hidden" name="step" value="3">
        <input type="hidden" name="entry_choices_1" value="<MTVar name="entry_choices_1" escape="html">">
        <dl>
            <dt></dt>
            <dd>
            <MTEntryChoices2 setvar="entry_choices_2">
            <MTSplitVars text="$entry_choices_2" delimiter="," name="__value__">
            <label><input type="radio" name="entry_choices_2" value="<MTVar name="__value__" escape"html">">
            <MTVar name="__value__" escape"html"></label>
            </MTSplitVars>
            <input type="submit" value="送信">
            </dd>
        </dl>
    </form>
</MTIf>

<MTIf name="step" eq="3"><!--?step=3パラメタが渡されたら-->
    <MTQuery key="entry_choices_1" setvar="entry_choices_1">
    <MTEntryAnswer1 setvar="entry_answer_1">
    <MTQuery key="entry_choices_2" setvar="entry_choices_2">
    <MTEntryAnswer2 setvar="entry_answer_2">
    <MTSetVar name="point" value="0">
    <h3>質問1:
    <MTIf name="entry_answer_1" eq="$entry_choices_1">
        正解!
        <MTSetVar name="point" value="5" op="+"><!--1問正解で5得点-->
    <MTElse>
        不正解!
    </MTElse>
    </MTIf>
    </h3>
    <h3>質問2:
    <MTIf name="entry_answer_2" eq="$entry_choices_2">
        正解!
        <MTSetVar name="point" value="5" op="+">
    <MTElse>
        不正解!
    </MTElse>
    </MTIf>
    </h3>
    <h3>あなたの得点は <MTVar name="point">点です。</h3>
</MTIf>
</MTDynamicMTML>

↓

↓

その他の応用アイデア

PowerCMSの機能と組み合わせると、より複雑で高度な要件にも対応できるでしょう。以下のような機能の組み合わせが考えられます。

• ContactForm 機能と組み合わせて、最終的に結果をフォームからポストして受け取る
• 会員サイト機能と組み合わせて実際のeLearningコンテンツを構築する
• 拡張フィールドを利用して、設問数が可変の質問登録画面とテンプレートを構築する
• PowerCMS SocialのFacebookアプリ連携機能で、Facebookのウォールに結果をポストする

サーバー側のプログラム言語を使わなくても、MTMLとPowerCMSだけで動的なコンテンツを構築できることがお分かりいただけたかと思います。