logo
home > web > MovableType フォームプラグイン CreamForm その2

MovableType フォームプラグイン CreamForm その2

MTフォームプラグインCreamFormの使用方法その2です。


3. テンプレートの設置
設定が完了したら、フォームのテンプレートを設置しましょう。
インデックステンプレートに3つのテンプレートを追加します。どのウェブサイト、ブログのインデックステンプレートでもかまいません。

・CreamForm入力
・CreamForm確認
・CreamForm完了

※テンプレートの名前を必ず上記の名前にしてください。上記のテンプレート名でフォームのテンプレートを判別していますので間違えないようにしてください。


各テンプレートに下記のMTタグ、HTMLタグを挿入してください。
スタイルやHTMLタグはお好みで変更してください。あくまでサンプルです。


formのactionにはドキュメントルートからCreamFormプラグインのcm.cgiへ送信してください。
本サイトでは下記のサンプルの通りです。
hiddenで__modeの値も渡しています。こちらには確認なのか完了なのかを判別するための値が入っています。


○ CreamForm入力

<p class="error">
    <mt:Loop name="errors">
    <mt:getvar name="__value__{label}" /><br />
    </mt:Loop>
</p>

<form action="/mt/plugins/CreamForm/cm.cgi" method="post">
    <input type="hidden" name="__mode" value="confirm">
            <table class="tableCreamForm" cellspacing="1">
                <tr>
                    <th>名前</th>
                    <td>
                        <input id="mail_author" name="name" size="30" 
value="<mt:var name="param" key="name">" style="width:90%;" />
                    </td>
                </tr>
                <tr>
                    <th>メールアドレス</th>
                    <td>
                        <input id="mail_email" name="email" size="30" 
value="<mt:var name="param" key="email">" style="width : 90%;" />
                    </td>
                </tr>
                <tr>
                    <th>お問い合わせ理由</th>
                    <td>
                    <select name="type" >
<option value="">選択する</option>
<option value="アプリについて">サイトについて</option>
<option value="MovableTypeについて">MovableTypeについて</option>
<option value="Perlについて">Perlについて</option>                    
<option value="イラスト・デザインについて">イラスト・デザインについて</option>
<option value="その他について">その他について</option>
                    </select>                      
                    </td>
                </tr>
                <tr>
                    <th>本文</th>
                    <td>
 <textarea id="mail_text" name="content" rows="15" 
cols="20" style="width : 90%;">
<mt:var name="param" key="content">
 </textarea>
                    </td>
                </tr>
            </table> <br />
            <input type="submit" value="確認">
        </form>



○ CreamForm確認
<table class="tableCreamForm" cellspacing="1">
    <tr>
        <th>名前</th>
        <td>
        <mt:var name="name" />
        </td>
    </tr>
    <tr>
        <th>お問い合わせ理由</th>
        <td><mt:var name="type" /></td>
    </tr>
    <tr>
        <th>メールアドレス</th>
        <td><mt:var name="email" /></td>
    </tr>
    <tr>
        <th>本文</th>
        <td><mt:var name="content"  remove_html="1" nl2br="xhtml"/></td>
    </tr>
</table>

<form action="/mt/plugins/CreamForm/cm.cgi" method="post">
    <input type="hidden" name="__mode" value="finish">
    <input type="hidden" name="name" value="<mt:var name="name">">
    <input type="hidden" name="type" value="<mt:var name="type">">
    <input type="hidden" name="email" value="<mt:var name="email">">
    <input type="hidden" name="content" value="<mt:var name="content">">
    <input type="hidden" name="token" value="<mt:var name="token">"><br />
    <a href="#" onClick="history.back(); return false;" >戻る</a>
    <input type="submit" value="送信する"/>
</form>


○ CreamForm完了
完了フォームには完了のメッセージを入力してください。





4. 管理画面について
入力されたデータはすべてDBに保存されます。保存されたデータを確認するには管理画面のシステムの左メニューに追加されお「お問い合わせ」メニューにアクセスしてください。
otoiawase.jpg


送信された一覧が表示されます。

削除の場合はチェックボックスにチェックを入れて削除ボタンを押してください。
CSVダウンロードを押すとCSVファイルがダウンロードされます。文字コードはShit-jisになってます。

また詳細を押すと内容が全て表示されます。




JavaScript Journal | JavaScript総合情報サイト

このブログ記事について

このページは、marooonが2011年10月23日 21:54に書いたブログ記事です。

ひとつ前のブログ記事は「MovableType フォームプラグイン CreamForm 」です。

次のブログ記事は「MovableType フォームプラグイン CreamForm その3」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。