1. ホーム
  2. ホームページの作り方
  3. HTML
  4. 簡単に実装できるフォームシステム！TransmitMailの機能と設定方法をご紹介
  • 最終更新日
  • HTML

簡単に実装できるフォームシステム！TransmitMailの機能と設定方法をご紹介

ホームページには欠かせないのがお問い合わせフォームです。電話では営業時間内に連絡しなければいけないですが、フォームなら24時間いつでもお問い合わせ可能です。

もし電話対応のみであれば営業時間内に仕事をしている方などは連絡を取る事もできません。返答に少し時間がかかっても良いからWebで連絡したいというユーザーは結構多いです。

フォームシステムはいくつかありますが、今回は無料で使えて簡単に導入できる「TransmitMail」をご紹介します。確認ページも作れるのでオススメのフォームシステムです。

目次 [閉じる]

TransmitMailのダウンロード方法

どうのこうの

どうのこうの

こちらがTransmitMailを無償で提供して頂いている「どうのこうの」のサイトです。バージョンアップの情報やワードプレスへの導入方法なども紹介されているのでご確認ください。

TransmitMailをダウンロードするにはこちらの「GitHab」のページからおこなえます。

TransmitMailのダウンロード

①の「Code」をクリックするとボックスが表示されるので、その中にある②の「Download ZIP」をクリックしてダウンロードします。

ZIPファイルを解凍してフォルダの中身を確認してみてください。たくさんファイルが入ってますが、「TransmitMailに必要なファイル」で使うファイルと使わないファイルを整理します。

ちなみにTransmitMailの動作確認をおこなうにはファイルをサーバーへアップロードする必要があります。ご自身のサーバーも用意してご確認ください。

使用できるフォーム部品一覧

実際にTransmitMailで設置できるフォーム部品を一覧で紹介します。

テキストボックス

文字の記入欄を表示します。

                        
    
                            
  1. <input type="text" name="シングルラインインプット" value="{$シングルラインインプット}">
    2.
ラジオボタン

ラジオボタンを表示します。

                        
    
                            
  1. <label><input type="radio" name="ラジオボタン" value="項目1" {$checked.ラジオボタン.項目1} {$checked.default}>項目1</label>
    2. 
                            
  2. <label><input type="radio" name="ラジオボタン" value="項目2" {$checked.ラジオボタン.項目2}>項目2</label>
    3. 
                            
  3. <label><input type="radio" name="ラジオボタン" value="項目3" {$checked.ラジオボタン.項目3}>項目3</label>
    4.
チェックボックス

チェックボックスを表示します。

                        
    
                            
  1. <label><input type="checkbox" name="チェックボックス[]" value="項目1" {$checked.チェックボックス.項目1} {$checked.default}>項目1</label>
    2. 
                            
  2. <label><input type="checkbox" name="チェックボックス[]" value="項目2" {$checked.チェックボックス.項目2}>項目2</label>
    3. 
                            
  3. <label><input type="checkbox" name="チェックボックス[]" value="項目3" {$checked.チェックボックス.項目3}>項目3</label>
    4.
セレクトメニュー

セレクトメニューを表示します。

                        
    
                            
  1. <select name="セレクトメニュー">
    2. 
                            
  2.   <option value="項目1" {$selected.セレクトメニュー.項目1}>項目1</option>
    3. 
                            
  3.   <option value="項目2" {$selected.セレクトメニュー.項目2}>項目2</option>
    4. 
                            
  4.   <option value="項目3" {$selected.セレクトメニュー.項目3}>項目3</option>
    5. 
                            
  5. </select>
    6.
リストボックス

リストボックスを表示します。

                        
    
                            
  1. <select name="マルチプルセレクトメニュー[]" multiple="multiple">
    2. 
                            
  2.   <option value="項目1" {$selected.マルチプルセレクトメニュー.項目1}>項目1</option>
    3. 
                            
  3.   <option value="項目2" {$selected.マルチプルセレクトメニュー.項目2}>項目2</option>
    4. 
                            
  4.   <option value="項目3" {$selected.マルチプルセレクトメニュー.項目3}>項目3</option>
    5. 
                            
  5. </select>
    6.
ファイル添付

ファイルを添付するボタンを表示します。

                        
    
                            
  1. {if:$ファイル1.tmp_name}
    2. 
                            
  2. <label><input type="checkbox" name="file_remove[]" value="ファイル1">このファイルを削除する</label>
    3. 
                            
  3. <p><img src="index.php?file={$ファイル1.tmp_name}" alt="{$ファイル1.name}" width="300"><br><a href="index.php?file={$ファイル1.tmp_name}" target="_blank" class="external">画像を別ウィンドウで開く</a></p>
    4. 
                            
  4. <input type="hidden" name="file[ファイル1][tmp_name]" value="{$ファイル1.tmp_name}">
    5. 
                            
  5. <input type="hidden" name="file[ファイル1][name]" value="{$ファイル1.name}">
    6. 
                            
  6. {/if:$ファイル1.tmp_name}
    7. 
                            
  7. <input type="file" name="ファイル1">
    8. 
                            
  8. {loop:$file.ファイル1}
    9. 
                            
  9. <div class="error"><em>{$file.ファイル1[]}</em></div>
    10. 
                            
  10. {/loop:$file.ファイル1}
    11.
テキストエリア

テキストエリアを表示します。

                        
    
                            
  1. <textarea rows="6" cols="30" name="マルチラインインプット">{$マルチラインインプット}</textarea>
    2.
ボタン

「確認する」や「送信する」ボタンを表示します。

                        
    
                            
  1. <input type="submit" value="入力内容を確認する">
    2.

上記のように基本的なフォーム部品はひと通り使用できます。

さらに文字の記入欄などは「文字制限」や「全角文字」など細かな設定をする事も可能ですので、「TransmitMailのバリデーション一覧」も確認しておきましょう。

TransmitMailのバリデーション一覧

「バリデーション」というのは「検証」などの意味を持ちます。指定した形式に記入されたものが適合しているかをチェックするという事です。

入力必須

記入・選択漏れがないかをチェックします。

                        
    
                            
  1. <input type="hidden" name="required[]" value="○○">
    2. 
                            
  2. {if:$required.入力必須}
    3. 
                            
  3. <div class="error"><em>{$required.入力必須}</em></div>
    4. 
                            
  4. {/if:$required.入力必須}
    5.
メールアドレス

メールアドレスが記述されているかをチェックします。

                        
    
                            
  1. <input type="hidden" name="email[]" value="○○">
    2. 
                            
  2. {if:$email.メールアドレス}
    3. 
                            
  3. <div class="error"><em>{$email.メールアドレス}</em></div>
    4. 
                            
  4. {/if:$email.メールアドレス}
    5.
URL

URLが記述されているかをチェックします。

                        
    
                            
  1. <input type="hidden" name="url[]" value="○○">
    2. 
                            
  2. {if:$url.URL}
    3. 
                            
  3. <div class="error"><em>{$url.URL}</em></div>
    4. 
                            
  4. {/if:$url.URL}
    5.
半角英字

半角英字で記述されているかをチェックします。

                        
    
                            
  1. <input type="hidden" name="hankaku_eiji[]" value="○○">
    2. 
                            
  2. {if:$hankaku_eiji.半角英字}
    3. 
                            
  3. <div class="error"><em>{$hankaku_eiji.半角英字}</em></div>
    4. 
                            
  4. {/if:$hankaku_eiji.半角英字}
    5.
半角英数字

半角英数字で記述されているかをチェックします。

                        
    
                            
  1. <input type="hidden" name="hankaku_eisu[]" value="○○">
    2. 
                            
  2. {if:$hankaku_eisu.半角英数字}
    3. 
                            
  3. <div class="error"><em>{$hankaku_eisu.半角英数字}</em></div>
    4. 
                            
  4. {/if:$hankaku_eisu.半角英数字}
    5.
数字

数字で記述されているかをチェックします。

                        
    
                            
  1. <input type="hidden" name="num[]" value="○○">
    2. 
                            
  2. {if:$num.数字}
    3. 
                            
  3. <div class="error"><em>{$num.数字}</em></div>
    4. 
                            
  4. {/if:$num.数字}
    5.
ひらがな

ひらがなで記述されているかをチェックします。

                        
    
                            
  1. <input type="hidden" name="hiragana[]" value="○○">
    2. 
                            
  2. {if:$hiragana.ひらがな}
    3. 
                            
  3. <div class="error"><em>{$hiragana.ひらがな}</em></div>
    4. 
                            
  4. {/if:$hiragana.ひらがな}
    5.
全角カタカナ

全角カタカナで記述されているかをチェックします。

                        
    
                            
  1. <input type="hidden" name="zenkaku_katakana[]" value="○○">
    2. 
                            
  2. {if:$zenkaku_katakana.全角カタカナ}
    3. 
                            
  3. <div class="error"><em>{$zenkaku_katakana.全角カタカナ}</em></div>
    4. 
                            
  4. {/if:$zenkaku_katakana.全角カタカナ}
    5.
半角文字

半角文字で記述されているかをチェックします。

                        
    
                            
  1. <input type="hidden" name="hankaku[]" value="○○">
    2. 
                            
  2. {if:$hankaku.半角文字}
    3. 
                            
  3. <div class="error"><em>{$hankaku.半角文字}</em></div>
    4. 
                            
  4. {/if:$hankaku.半角文字}
    5.
全角文字

全角文字で記述されているかをチェックします。

                        
    
                            
  1. <input type="hidden" name="zenkaku_all[]" value="○○">
    2. 
                            
  2. {if:$zenkaku_all.全て全角文字}
    3. 
                            
  3. <div class="error"><em>{$zenkaku_all.全て全角文字}</em></div>
    4. 
                            
  4. {/if:$zenkaku_all.全て全角文字}
    5.
ファイルの入力必須

ファイルが添付されているかをチェックします。

                        
    
                            
  1. <input type="hidden" name="file_required[]" value="○○">
    2. 
                            
  2. {if:$file_required.ファイルの入力必須}
    3. 
                            
  3. <div class="error"><em>{$file_required.ファイルの入力必須}</em></div>
    4. 
                            
  4. {/if:$file_required.ファイルの入力必須}
    5.

今回は主に使うバリデーションを一覧で紹介しました。この他にも細かい設定をする事が可能ですので気になる方は「テンプレートの記述方法」もご覧ください。

その他の設定としては、「6文字以上～8文字以下」の文字数に制限する方法や、項目1で記入した内容が項目2で記入した文字列と一致しているかをチェックできたりします。

inputタグのvalue属性が「○○」となっていますが、ここは設置したフォーム部品に記述したname属性の値を記入します。それと同時にバリデーションの値も同じ文字列に合わせる必要があります。

            
    
                
  1. <input type="text" name="お名前" value="{$お名前}">
    2. 
                
  2. <input type="hidden" name="required[]" value="お名前">
    3. 
                
  3. {if:$required.お名前}
    4. 
                
  4. <div class="error"><em>{$required.お名前}</em></div>
    5. 
                
  5. {/if:$required.お名前}
    6.

例えばテキストボックスで「お名前」項目を作り、ここを必須にする場合は上記のような記述にします。慣れればそんなに難しくないですね。

TransmitMailに必要なファイル

それではTransmitMailを動作させるために必要なファイルを整理します。

まず解凍した「TransmitMail-master」フォルダ直下のファイルは、「input.html」「confirm.html」「finish.html」「error.html」「index.php」の計5ファイルを使用します。

次に「config」フォルダ内のファイルは、「config.json.sample」「config.php.sample」の2ファイルを削除して残りの4ファイルは残しておきます。

デモサイトのTransmitMail階層

「lib」「log」「tmp」の3フォルダはそのまま使用しますので置いておきましょう。

TransmitMailはデフォルトではファイル添付が機能しない状態ですので、ファイル添付を使用される場合は下記ファイルの設定変更が必要です。

TransmitMail.php

            
    
                
  1. 'file' => true,
    2.

変更はこの部分だけなので簡単です。変更するファイルは「lib」フォルダ内の「TransmitMail.php」ファイルです。このファイルの89行目あたりにこの記述があり、デフォルトでは「’file’ => false,」となっているので、「false」を「true」に変更します。

config.ymlファイルの設定

次に「config」フォルダ内にある「config.yml.sample」のファイル名から「.sample」を削除して「config.yml」という形にします。

「.yml」はそのまま「ワイエムエル」や「ヤムル」と言われる拡張子です。システム関連の作業をしていないとあまり見る機会はないですね。

config.yml

            
    
                
  1. config:
    2. 
                
  2.   email: info@example.com
    3. 
                
  3.   subject: ［株式会社テスト］お問い合わせ
    4. 
                
  4.   auto_reply_subject: ［株式会社テスト］お問い合わせありがとうございます
    5. 
                
  5.   auto_reply_name: 株式会社テスト
    6.

config.ymlファイルの中身は上記の内容なので、初見でもわかりやすいです。ここの内容をご自身の情報に変更すればOKです。

ここに設定するメールアドレスはメールの受信に使うアドレスです。「email」の値が空欄だとフォームシステム自体が動作しないので注意してください。

自動で送られるメールの設定

続いてはフォームで連絡してくれた方への自動返信メールとフォームから連絡があった事を通知する自分宛のメールの2つを設定します。

mail_auto_reply_body.txt

            
    
                
  1. {$メールアドレス.value} 様
    2. 
                
  2.  
    3. 
                
  3. お問い合わせいただき、ありがとうございます。
    4. 
                
  4. 1〜2営業日以内に担当者よりご連絡さしあげます。
    5. 
                
  5.  
    6. 
                
  6. 1週間以上経ってもお返事がない場合は、
    7. 
                
  7. お手数ですが下記アドレスよりお問い合わせくださいませ。
    8. 
                
  8.  
    9. 
                
  9. info@example.com
    10. 
                
  10.  
    11. 
                
  11. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    12. 
                
  12.  
    13. 
                
  13. 【お問い合わせ内容は下記の通りです】
    14. 
                
  14. {loop:$params}
    15. 
                
  15. {$params[].key} = {$params[].value}
    16. 
                
  16. {/loop:$params}
    17. 
                
  17.  
    18. 
                
  18. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    19. 
                
  19.  
    20. 
                
  20. 【このメールにお心当たりのない方】
    21. 
                
  21.  
    22. 
                
  22. どなたかが間違ってアドレスを入力した可能性がございます。
    23. 
                
  23. お手数おかけいたしますが、下記アドレスまでご連絡くださいませ。
    24. 
                
  24.  
    25. 
                
  25. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    26. 
                
  26.  
    27. 
                
  27. 株式会社テスト
    28. 
                
  28. http://www.example.com/
    29. 
                
  29. Email: info@example.com
    30. 
                
  30. TEL: 000-0000-0000
    31. 
                
  31. FAX: 000-0000-0000
    32.

このファイルは「config」フォルダ内にある「mail_auto_reply_body.txt」というファイルです。デフォルトでは上記のように記述されているので内容をご自身のものに書き換えてお使いください。

mail_body.txt

            
    
                
  1. お問い合わせフォームよりメールが送信されました。
    2. 
                
  2.  
    3. 
                
  3. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    4. 
                
  4. {loop:$params}
    5. 
                
  5. {$params[].key} = {$params[].value}
    6. 
                
  6. {/loop:$params}
    7. 
                
  7.  
    8. 
                
  8. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    9. 
                
  9.  
    10. 
                
  10. IP: {$_SERVER.REMOTE_ADDR}
    11. 
                
  11. HOST: {$_SERVER.REMOTE_HOST}
    12. 
                
  12. USER_AGENT: {$_SERVER.HTTP_USER_AGENT}
    13. 
                
  13.  
    14. 
                
  14. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    15.

このファイルも同じく「config」フォルダ内にある「mail_body.txt」というファイルです。

連絡をくれた方の返信メールの先頭に「{$メールアドレス.value} 様」という記述があるんですが、個人的に「○○@○○様」とメールアドレスを使うより「○○様」と相手のお名前を表示する方が良いと思いますのでその記述方法を下記に紹介します。

            
    
                
  1. {$お名前.value} 様
    2.

簡単ですね、これで「○○様」と相手のお名前を記述する事ができます。ただし、フォーム項目に「お名前」を設置していないといけないので注意してください。

            
    
                
  1. {loop:$params}
    2. 
                
  2. {$params[].key} = {$params[].value}
    3. 
                
  3. {/loop:$params}
    4.

あと、上記は何を意味しているのかというと、フォームで記入してもらった情報を一覧で表示するための記述です。若干のデザイン調整をする事もありますが、この記述はそのまま付けると覚えておいてください。

input.htmlの記述方法

それでは簡単ですけどHTMLに記述する実際のコードも紹介しておきます。今回は「お名前」「メールアドレス」「電話番号」「お問い合わせ内容」を記述してもらうフォームです。

input.html

            
    
                
  1. <form method="post" action="./#content" enctype="multipart/form-data">
    2. 
                
  2.   <input type="hidden" name="csrf_token" value="{$csrf_token}">
    3. 
                
  3.   <div class="section">
    4. 
                
  4.     <h3>お問い合わせサンプル</h3>
    5. 
                
  5.     <table width="100%" class="alpha">
    6. 
                
  6.       <tr>
    7. 
                
  7.         <th width="300">お名前</th>
    8. 
                
  8.         <td>
    9. 
                
  9.           <input type="text" name="お名前" value="{$お名前}" class="middle">
    10. 
                
  10.           <input type="hidden" name="required[]" value="お名前">
    11. 
                
  11.           {if:$required.お名前}
    12. 
                
  12.           <div class="error"><em>{$required.お名前}</em></div>
    13. 
                
  13.           {/if:$required.お名前}
    14. 
                
  14.         </td>
    15. 
                
  15.       </tr>
    16. 
                
  16.       <tr>
    17. 
                
  17.         <th>メールアドレス</th>
    18. 
                
  18.         <td>
    19. 
                
  19.           <input type="text" name="メールアドレス" value="{$メールアドレス}" class="middle">
    20. 
                
  20.           <input type="hidden" name="required[]" value="メールアドレス">
    21. 
                
  21.           {if:$required.メールアドレス}
    22. 
                
  22.           <div class="error"><em>{$required.メールアドレス}</em></div>
    23. 
                
  23.           {/if:$required.メールアドレス}
    24. 
                
  24.           <input type="hidden" name="email[]" value="メールアドレス">
    25. 
                
  25.           {if:$email.メールアドレス}
    26. 
                
  26.           <div class="error"><em>{$email.メールアドレス}</em></div>
    27. 
                
  27.           {/if:$email.メールアドレス}
    28. 
                
  28.         </td>
    29. 
                
  29.       </tr>
    30. 
                
  30.       <tr>
    31. 
                
  31.         <th>電話番号</th>
    32. 
                
  32.         <td>
    33. 
                
  33.           <input type="text" name="電話番号" value="{$電話番号}" class="middle">
    34. 
                
  34.           <input type="hidden" name="num[]" value="電話番号">
    35. 
                
  35.           {if:$num.電話番号}
    36. 
                
  36.           <div class="error"><em>{$num.電話番号}</em></div>
    37. 
                
  37.           {/if:$num.電話番号}
    38. 
                
  38.         </td>
    39. 
                
  39.       </tr>
    40. 
                
  40.       <tr>
    41. 
                
  41.         <th>お問い合わせ内容</th>
    42. 
                
  42.         <td>
    43. 
                
  43.           <textarea rows="6" cols="30" name="お問い合わせ内容" class="wide">{$お問い合わせ内容}</textarea>
    44. 
                
  44.           <input type="hidden" name="required[]" value="お問い合わせ内容">
    45. 
                
  45.           {if:$required.お問い合わせ内容}
    46. 
                
  46.           <div class="error"><em>{$required.お問い合わせ内容}</em></div>
    47. 
                
  47.           {/if:$required.お問い合わせ内容}
    48. 
                
  48.         </td>
    49. 
                
  49.       </tr>
    50. 
                
  50.     </table>
    51. 
                
  51.   </div>
    52. 
                
  52.   <div class="center"><input type="submit" value="入力内容を確認する"></div>
    53. 
                
  53. </form>
    54.

TransmitMailにもともとあるinput.htmlに合わして記述してみました。

大事なのはformタグ・inputタグ・textareaタグと「{if:$required.お名前}～{/if:$required.お名前}」などのシステム部分の記述です。

なので、divタグやtableタグはご自身のデザインに合わせて変更してもらえればと思います。上記の仕様は4つの項目のうち「電話番号」だけ必須項目にはしていません。こちらは任意項目という事ですね。

バリデーションの指定としては「お名前」「メールアドレス」「お問い合わせ内容」に必須項目を付け、「電話番号」には数字で記入されているかのチェックを付けています。

そして「メールアドレス」にはもうひとつ、正しいメールアドレスの形式で記入されているかのチェックも付けています。

先ほど「使用できるフォーム部品一覧」と「TransmitMailのバリデーション一覧」の項目で使い方を確認して頂いたので記述方法は問題ないと思います。

あとデフォルトで設定されていない部分なんですが、formタグに「action」属性を追加してみましたのでご確認ください。

            
    
                
  1. <form method="post" action="./#content" enctype="multipart/form-data">
    2. 
                
  2. ～省略～
    3. 
                
  3. </form>
    4.

ここのaction属性の値を「./#content」とする事によってアクション時に「content」のid名を持つdivへ遷移（リンク）するようしています。

なぜこんな設定をするのかというと、TransmitMailのデモページを操作する分には気にならないですが、自分のサイトにTransmitMailを導入する際に問題が起こります。

お問い合わせフォームなどはページの下部に設置する事が多いです。が、フォームのアクション時には設置したページの一番上へ移動してしまうからです。

アクション時というのは確認ページへ遷移する時や記入漏れなどのエラーメッセージが表示される時の事です。

ページの上部に移動してしまうとエラーメッセージが出ているのに気づかないで、「んっ？コレでいけたんかな？」と思って操作を終了してしまうユーザーも中にはおられます。

なのでaction属性にページ内のアンカーを設定するという事も基本として押さえておけばいいかなと思います。リンク先はご自身のサイトに合わせて調整してみてください。

confirm.htmlの記述方法

confirm.htmlは特に変更する点などはないですね。下記のコードもほぼほぼデフォルトの形です。

confirm.html

            
    
                
  1. <table width="100%" class="alpha">
    2. 
                
  2.   {loop:$params}
    3. 
                
  3.   <tr>
    4. 
                
  4.     <th width="300">{$params[].key} </th>
    5. 
                
  5.     <td>{$params[].value.nl2br} </td>
    6. 
                
  6.   </tr>
    7. 
                
  7.   {/loop:$params}
    8. 
                
  8. </table>
    9. 
                
  9. <div class="center">
    10. 
                
  10.   <form method="post" action="./#content" class="inline">
    11. 
                
  11.     {$hiddens}
    12. 
                
  12.     <input type="hidden" name="page_name" value="input">
    13. 
                
  13.     <input type="submit" value="入力画面に戻る">
    14. 
                
  14.   </form>
    15. 
                
  15.   &nbsp;
    16. 
                
  16.   <form method="post" action="./#content" class="inline">
    17. 
                
  17.     {$hiddens}
    18. 
                
  18.     <input type="hidden" name="page_name" value="finish">
    19. 
                
  19.     <input type="submit" value="送信する">
    20. 
                
  20.   </form>
    21. 
                
  21. </div>
    22.

基本はこの形で使ってもらえれば良いかと思います。input.htmlと同じくご自身のサイトのデザインに合わせてtableタグなどは変更してください。

違う点としては「{loop:$files}～{/loop:$files}」の記述を削除したところです。今回はファイル添付を付けないフォームにしたので要らないコードを省きました。

            
    
                
  1. {loop:$params}
    2. 
                
  2. <tr>
    3. 
                
  3.   <th width="300">{$params[].key} </th>
    4. 
                
  4.   <td>{$params[].value.nl2br} </td>
    5. 
                
  5. </tr>
    6. 
                
  6. {/loop:$params}
    7.

上記のコードでフォームに記入してもらった値を一覧で表示する事ができます。

そして記入した内容を確認してもらって修正したければ「入力画面に戻る」、入力に間違いがなければ「送信する」へ進みます。ここのformタグにもinput.htmlで設定した「action=”./#content”」を追加しています。

            
    
                
  1. {loop:$files}
    2. 
                
  2. <tr>
    3. 
                
  3.   <th>{$files[].key} </th>
    4. 
                
  4.   <td>
    5. 
                
  5.     {$files[].name}<br>
    6. 
                
  6.     <img src="index.php?file={$files[].tmp_name}" width="300"><br>
    7. 
                
  7.     <a href="index.php?file={$files[].tmp_name}" target="_blank" class="external">画像を別ウィンドウで開く</a>
    8. 
                
  8.   </td>/li>
                
  9. </tr>
    10. 
                
  10. {/loop:$files}
    11.

ちなみに先ほど削除したと言っていたコードがこちらです。添付ファイルを含めたフォームを制作する際には「{loop:$params}～{/loop:$params}」の後に記述すればOKです。

確認ページを付けない設定（おまけ）

最後にTransmitMailは確認ページも簡単に付けられるフォームシステムとしてオススメなんですが、あえて確認ページを表示しないという方もおられます。

確認ページを設置しない意図としては、できるだけフォームの記入項目を少なくして手間を減らし操作を簡略化して途中で離脱するユーザーを少なくするという狙いがあります。

これはEFO（Entry Form Optimization）と呼ばれるもので、日本語で「入力フォーム最適化」という意味です。

まぁ、難しい事は置いておいて、単純に確認ページは要らないとなれば確認ページをスキップする事もできますので紹介しておきます。

input.html

            
    
                
  1. <form method="post" action="./#content" enctype="multipart/form-data">
    2. 
                
  2.   <input type="hidden" name="csrf_token" value="{$csrf_token}">
    3. 
                
  3.   <div class="section">
    4. 
                
  4.     <h3>お問い合わせサンプル</h3>
    5. 
                
  5.     <table width="100%" class="alpha">
    6. 
                
  6.       <tr>
    7. 
                
  7.         <th width="300">お名前</th>
    8. 
                
  8.         <td>
    9. 
                
  9.           <input type="text" name="お名前" value="{$お名前}" class="middle">
    10. 
                
  10.           <input type="hidden" name="required[]" value="お名前">
    11. 
                
  11.           {if:$required.お名前}
    12. 
                
  12.           <div class="error"><em>{$required.お名前}</em></div>
    13. 
                
  13.           {/if:$required.お名前}
    14. 
                
  14.         </td>
    15. 
                
  15.       </tr>
    16. 
                
  16.       <tr>
    17. 
                
  17.         <th>メールアドレス</th>
    18. 
                
  18.         <td>
    19. 
                
  19.           <input type="text" name="メールアドレス" value="{$メールアドレス}" class="middle">
    20. 
                
  20.           <input type="hidden" name="required[]" value="メールアドレス">
    21. 
                
  21.           {if:$required.メールアドレス}
    22. 
                
  22.           <div class="error"><em>{$required.メールアドレス}</em></div>
    23. 
                
  23.           {/if:$required.メールアドレス}
    24. 
                
  24.           <input type="hidden" name="email[]" value="メールアドレス">
    25. 
                
  25.           {if:$email.メールアドレス}
    26. 
                
  26.           <div class="error"><em>{$email.メールアドレス}</em></div>
    27. 
                
  27.           {/if:$email.メールアドレス}
    28. 
                
  28.         </td>
    29. 
                
  29.       </tr>
    30. 
                
  30.       <tr>
    31. 
                
  31.         <th>電話番号</th>
    32. 
                
  32.         <td>
    33. 
                
  33.           <input type="text" name="電話番号" value="{$電話番号}" class="middle">
    34. 
                
  34.           <input type="hidden" name="num[]" value="電話番号">
    35. 
                
  35.           {if:$num.電話番号}
    36. 
                
  36.           <div class="error"><em>{$num.電話番号}</em></div>
    37. 
                
  37.           {/if:$num.電話番号}
    38. 
                
  38.         </td>
    39. 
                
  39.       </tr>
    40. 
                
  40.       <tr>
    41. 
                
  41.         <th>お問い合わせ内容</th>
    42. 
                
  42.         <td>
    43. 
                
  43.           <textarea rows="6" cols="30" name="お問い合わせ内容" class="wide">{$お問い合わせ内容}</textarea>
    44. 
                
  44.           <input type="hidden" name="required[]" value="お問い合わせ内容">
    45. 
                
  45.           {if:$required.お問い合わせ内容}
    46. 
                
  46.           <div class="error"><em>{$required.お問い合わせ内容}</em></div>
    47. 
                
  47.           {/if:$required.お問い合わせ内容}
    48. 
                
  48.         </td>
    49. 
                
  49.       </tr>
    50. 
                
  50.     </table>
    51. 
                
  51.   </div>
    52. 
                
  52.   <div class="center">
    53. 
                
  53.     <input type="hidden" name="page_name" value="finish">
    54. 
                
  54.     <input type="submit" value="送信する">
    55. 
                
  55.   </div>
    56. 
                
  56. </form>
    57.

「input.htmlの記述方法」で紹介したコードをそのまま使いましたが、変更するのは「type=”submit”」のinputのみです。

            
    
                
  1.   <div class="center"><input type="submit" value="入力内容を確認する"></div>
    2.

確認ページを付ける通常のコードはこちらです。

            
    
                
  1.   <div class="center">
    2. 
                
  2.     <input type="hidden" name="page_name" value="finish">
    3. 
                
  3.     <input type="submit" value="送信する">
    4. 
                
  4.   </div>
    5.

そして確認ページを無しにする場合は上記のコードです。

はい、これで確認ページをスキップできます。はじめはTransmitMailのコードを見ても難しく感じるかも知れませんが、僕はどちらかというとわかりやすいフォームだと思います。

ただコードだけ見てもこのフォームのイメージが湧いてこないと思いますので、そんな時はこちらの「デモサイト」をご覧ください。

チェピレアでカレー屋さんのデモサイトを作った時にTransmitMailのフォームシステムを使いましたので、こちらから動作を確認して頂けます。ただ、メールの送信機能は止めている状態です。

HTMLの文字の改行と行間の取り方！初心者がやってしまう間違いを回避しよう よく使うフォーム部品の一覧をご紹介！フォームで作成できる項目をチェック

よく読まれている記事

おすすめの記事

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ！Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。

チェピレア日記