メールフォーム - MT-t サポート

エラー・確認・完了画面のHTML編集

メールフォームの管理画面より、「プラン作成」→「デザイン設定」を選びます。

「デザイン設定」の「フォーム」の各画面の詳細から「編集」をクリックします。

1.エラー表示画面のHTML編集

「エラー表示設定」の「ページ設定」で「ページを自由に作成」をチェックします。

下に「HTML」行が開ますので「自動生成のページ内容を読み込み」をクリックします。

メッセージが表示されます。「OK」ボタンをクリックします。

「HTML」の何もなかった空白の枠に、HTMLコードが読み込まれます。<title>タグを探してその上に下記のHTMLタグを1行コピーして挿入します。

↓1行挿入するHTMLタグ

このまま確認表示画面の設定をします。（エラー画面、確認画面・完了画面とも同じ作業をします）

2.確認表示画面のHTML編

「確認表示設定」の「ページ設定」で「ページを自由に作成」をチェックします。

これ以降は「1.エラー表示画面のHTML編集」と作業をします。

確認画面の設定が終わりましたら、このまま完了表示画面の設定をします。

3.完了表示画面のHTML編

「完了表示設定」の「ページ設定」で「ページを自由に作成」をチェックします。

これ以降は「1.エラー表示画面のHTML編集」と作業をします。

完了表示画面の設定が終わりましたら、左下の「設定を保存」をクリックして、エラー・確認・完了画面のHTML編集を保存します。

設定が保存されると、ページの上の方に「正常に完了しました。」とメッセージが表示されます。

 

スマートフォン用のスタイルシートの追加

メールフォームの管理画面より、「プラン作成」→「デザイン設定」を選びます。

「フォームデザイン」の「編集」ボタンをクリックします。

「デザイン方法」の「HTMLとCSSのテンプレートを直接編集」にチェックを入れます。

「CSS編集」の内容に下記の文字を追加します。CSS編集欄を一番下までスクロールします。

上記の7行をコピーして「CSS編集」欄の一番下に貼り付けます。

画面下方の「設定を保存」をクリックして、保存します。

フォームのスマートフォンレイアウト対応の設定は以上になります。

フォーマットを「改行を変換」から「なし」にします。

入力項目の「タグ」に半角の英数字で「code」と入力します。（既にno-footと入力されていたら、半角のカンマ「,」を入れてから「code」）

次は本文に貼り付けたフォームのHTMLコードを編集していきます。長いHTMLコードから編集箇所を見つけるのは困難ですし、間違えやすいので、編集箇所をブラウザの"検索"機能を使って見つけていきます。

キーボードで「ctrl」と「F」を押して下さい。ブラウザをChromeをお使いの方は画面の右上に検索枠が表示されます。（FireFoxの方は左下、InternetExploreの方は左上に表示されます。）ここではChromeで説明していきます。

これから検索枠に検索したい文字を入力して、修正箇所を検索していきます。

1.スマートフォン用のスタイルシートの追加

検索窓に半角英数字で「/style」と入力してください。本文の中が検索されて「/style」の文字の箇所が表示されます。

↓追加するHTMLコード

↑　上記の7行をコピーして本文の中の下記の「-->」前に挿入します。

■挿入前

■挿入後（赤文字が挿入された部分です）

2.スマートフォンでの横幅の指定

検索窓に半角英数字で「540」と入力してください。本文の中が検索されて該当箇所が表示されます。

以下のように「540」と青文字の「0」を赤文字部分（半角で「620」「0px」）変更して下さい。

■修正前

■修正後

3.「確認する」ボタンの中央寄せの指定

検索窓に「確認する」と入力してください。本文の中が検索されて該当箇所が表示されます。

以下のように赤文字部分を追加して下さい。

■修正前

■修正後

4.入力項目「氏名」の入力枠サイズの指定

メールフォームの入力項目に「氏名」や「フリガナ」がある場合のみ、入力エリアを「100pxの大きさに設定する」という指定をします。

↓以下の1行を「氏名」や「フリガナ」の入力エリアに追加します。

「氏名」や「フリガナ」を使った項目は以下のA～Dの４パターンが考えられます。該当するパターンのところだけ修正します。
・A.「氏名」で姓と名と分けた項目がある場合（"sei"と"mei"の項目に追加）
・B.「フリガナ」で姓と名と分けた項目がある場合 （"sei_kana"と"mei_kana"の項目に追加）
・C.「氏名」で姓名を分けない項目がある場合（"name"の項目に追加）
・D.「フリガナ」で姓名を分けない項目がある場合（"kana"の項目に追加）

 

A.「氏名」姓と名と分けた項目がある場合　の修正箇所

検索窓に「sei」と入力してください。本文の中が検索されて該当箇所が表示されます。その少し下に「name="mei"」という行もあるので探して、そこもあわせて修正します。

■修正前

■修正後（赤字の部分を追加）

B.「フリガナ」姓と名と分けた項目がある場合　の修正

検索窓に「kana」と入力してください。本文の中が検索されて該当箇所が表示されます。その少し下に「name="mei_kana"」という行もあるのでそこもあわせて修正します。

■修正前

■修正後（赤字の部分を追加）

C.「氏名」姓名を分けない項目がある場合　の修正箇所

検索窓に「name」と入力してください。本文の中が検索されて該当箇所が表示されます。

■修正前

■修正後（赤字の部分を追加）

D.「フリガナ」姓名を分けない項目がある場合　の修正

検索窓に「kana」と入力してください。本文の中が検索されて該当箇所が表示されます。

お問い合わせページの本文の編集は以上です。「更新」ボタンをクリックして、お問い合わせページを更新します。

メールフォームの管理画面にログインします。

上部メニューより「フォーム出力」をクリックしてください。

フォーム出力

「フォーム出力方式」から「HTML埋め込みで自由にページを作成」にチェックを入れます。

「埋め込み方法」から「HTMLソースを直接HTMLファイルに埋め込む」にチェックを入れます。

「HTMLソース」の「登録フォームHTML」の枠内のHTMLタグを全てコピーします。（枠内のどこかをマウスでクリックし、キーボードの「ctrl」と「A」を同時に押して全てを選択し、「ctrl」と「C」を同時に押すとコピー出来ます）

フォーム貼り付け

MT-tの管理画面を開きます。ウェブサイトのウェブページ「お問い合わせ」の編集画面を開きます。

本文に先ほどコピーしたHTMLタグを貼り付けます。(本文のどこかをクリックしてマウスの右クリック→「貼り付け」で貼り付けできます。)
※このとき何も貼り付けられない場合は、コピーができていないか、コピーしたものが解除されています。その場合は、メールフォームの「登録フォームHTML」の枠内のHTMLタグのコピーを再度行って下さい。

本文にフォームのHTMLソースが貼り付けられました。

管理画面にログインする

予めお知らせしたフォーム管理画面へのアドレスをブラウザへ入力し、フォーム作成のログイン画面へアクセスしてください。 画面が表示されましたら、ログインIDとパスワードを入力して「ログイン」をクリックしてください。

ログインすると、管理画面のトップページが表示されます。上部のメニューより「プラン作成」をクリックしてください。

プラン一覧に新しいプラン名が追加されます。作成したプラン名をクリックすると、プラン情報のページが表示されます。設定されている情報を一覧で確認することができます。

上部のメニューより「基本設定」をクリックし、必要に応じて項目を設定していきます。

基本設定

設定が完了しましたら、「設定を保存」をクリックしてください。

フォーム項目の選択

「▼メールフォーム設定」内の「フォーム項目を追加する」をクリックします。

「フォーム設定」がポップアップで開きますので、「フォーム種別」のプルダウンメニューより、追加したい項目を選択してください。

選択した項目によって設定できるオプションが異なります。

フォーム項目の設定

フォーム項目によって設定できるオプションが異なります。
（フォームのサイズ、入力を必須にするかどうかなど）

必要に応じて設定し、変更が完了したら「変更を確認（プレビュー）」をクリックしてください。

プレビューを確認し、問題がなければ「確定する」をクリックしてください。

メールフォームの項目が追加されます。

上記の作業を繰り返し、必要項目をすべて選択してください。 設定済みの項目は、「完成予想プレビュー」にて随時確認することができます。

フリー項目につきまして

1.フリー項目の基本設定
「フォーム設定」のフリー項目を設定する際は、「フォーム種別」にて「フリーフォーム」を選択し、「必須項目」「表示名称」等の必要事項を設定します。

2.フォームタイプの例
フリー項目では複数の形式が設定できます。用途に応じて「フォームタイプ」より選択してください。

フォーム項目の表示順

項目の表示の順番を調整することができます。
順番を変更したい場合、項目の表示の「表示位置」の▲▼ボタンで入れ替えてください。

※フォームタイプ項目には、氏名 [1] というようにフォーム種別の後ろにIDが表示されます。

カテゴリの作成

「▼メールフォーム設定」内の「カテゴリを追加する」をクリックします。
「フォーム設定」がポップアップで開きますので、「カテゴリ名」を設定し、フォームへ表示するかどうかを選択して「確定」ボタンを押してください。

カテゴリを作成すると、カテゴリ以下のフォーム項目が1つにまとまり、カテゴリ毎のフォームテーブルが作成されます。
作成したカテゴリの「表示順」を変更し、カテゴリとしてまとめたい項目の上に位置するように設定してください。

例えば、「基本情報」というカテゴリを作成し、その下に「メールアドレス」「氏名」項目を作成します。「その他」というカテゴリを作成し、その下に「備考欄」項目を作成します。

隠しデータ項目について

「隠しデータ」は、フォーム画面で利用者に見せないデータを利用したい場合に設定します。たとえば「アクセス解析用のデータ」「hiddenで埋め込むデータ」「登録者一覧でのみ表示させたいデータ」を指します。

「▼隠しデータ設定」内の「隠しデータを追加する」をクリックします。
「フォーム設定」がポップアップで開きますので、「フォーム種別」のプルダウンメニューより、追加したい項目を選択してください。

なお取得したデータは、「管理者への自動通知メール（自動生成）」にて出力できます。

デザイン設定

ここではメールフォームのデザインを設定します。上部のメニューより「デザイン設定」をクリックしてください。

フォームデザインの設定

まずはフォームデザインの設定からおこないます。 フォームデザインの「編集」ボタンを押してください。まず「テンプレート読込」でお好きなデザインを選択してください。
テンプレートを選択したら、そのテンプレートをカスタマイズしていきます。

まず「テンプレート読込」でお好きなデザインを選択してください。
テンプレートを選択したら、そのテンプレートをカスタマイズしていきます。

初期状態では、「デザイン方法」が「フォームを簡単カスタマイズ」となっております。
これは、フォームのデザインを簡単に設定できる機能です。
変更したい箇所の設定を変更することにより、サイズを変更したり、クリックで文字や背景のカラーを変更することが可能です。

設定が完了しましたら、「設定を保存」をクリックしてください。

ページデザインの設定

次にページデザインの設定を行います。上部のメニューより「デザイン設定」をクリックしてください。

「テンプレート読込」でお好きなデザインを選択してください。
テンプレートを選択したら、そのテンプレートをカスタマイズしていきます。

この機能では、フォームが表示されるページデザインを編集することができますが、HTMLの専門知識を伴う上級者向けの作業となりますのでご注意ださくい。カスタマイズが不要の場合はこのままでかまいません。

このデザインが反映される箇所は、「フォームの直接リンク形式」「エラー画面の専用ページ設定」「確認画面の専用ページ設定」「完了画面の専用ページ設定」となります。

設定が完了しましたら、「設定を保存」をクリックしてください。

自動通知メール設定（利用者宛）

「▼利用者への自動通知メール設定」では、利用者がメールフォームにて送信を行った際、利用者宛てに通知されるメールの設定を行います。 必要に応じて各項目を設定してください。

■□■　メール本文（ヘッダー）補足（氏名差し込み）

メール送信者へのメールに「○○様」とフォームに入力された氏名を挿入する設定をご紹介します。メール本文（ヘッダー）で「変換タグ」ボタンをクリックします。

タグに変換できる項目がプルダウンできますので、「氏名[1]」を選びます。

「貼り付け」ボタンをクリックします。

「$_name_$」の位置にフォームに入力された「氏名」が差し込まれます。

メール本文は下記のような感じになります。

下部にある「この内容をテスト送信する」をクリックして宛先を入力すれば、現在の設定内容のメールを即座にテスト送信する事が可能です。

自動通知メール設定（管理者宛）

「▼管理者へ届くメール設定」では、利用者がメールフォームにて送信を行った際、管理者宛てに通知されるメールの設定を行います。

必要に応じて各項目を設定してください。

設定が完了しましたら、「設定を保存」をクリックしてください。

フォームを表示する方法は大きく分けて、2つの方法がありますが、ここでは「HTML埋め込みで自由にページを作成」から「iframe埋め込み」でHTMLファイルにソースを貼り付けて表示する方法を使います。ここで出力用HTMLを書き出して、MT-tのウェブページ「お問い合わせ」に貼り付けます。
「iframeをHTMLファイルに埋め込む」の場合、
一行に収縮されたHTMLを貼り付けるだけでフォームの貼り付けが完了します。

フォーム貼り付け

MT-tの管理画面を開きます。ウェブサイトのウェブページ「お問い合わせ」の編集画面を開きます。本文に先ほどコピーしたタグを貼り付け、「更新」ボタンをクリックします。

（ウェブページの管理画面に「お問い合わせ」が見えない場合は、赤文字の「フィルタしない」をクリックすると表示されます。）

ウェブページ「お問い合わせ」本文の赤文字の部分にコピーしたタグを貼り付けます。初期設定のタグはダミー（仮）です。

 

ブラウザでフォームを確認します。設置したフォームは正しく稼働するかどうか、必ずご自身でフォームから入力→送信をテストして、設定したメールアドレスにフォーム内容が届くことをご確認ください。フォーム設定ミスは信用を失いますのでお気をつけを。