【Mailform Pro】入力の流れ(ステップ画像)を追加する方法

Mailform Proは、無料で高機能なメールフォームシステムで、大変お世話になっています。
今回は、Mailform Proで入力の流れ画像(「STEP1.入力 → STEP2.確認 → STEP3.完了」のような画像)を追加する方法をメモしておきます。

前提として、「確認画面のタイプ」を「1:フラット」に選択した場合とします。(他では確認していないので)
「確認画面のタイプ」の設定は、「mailformpro/config.cgi」ファイルの一番上(5行目)で設定します。

1)入力画面に「STEP1.入力」の画像を挿入する

入力画面HTMLの次の場所に画像を挿入します。

<form id="mailformpro" action="mailformpro/mailformpro.cgi" method="POST">
<!-- ここに「STEP1.入力」画像を挿入 -->

2)確認画面に「STEP2.確認」の画像を挿入する

mailformpro/configs/lang.ja.jsファイルの以下の場所(16行目)に画像を挿入します。

	'PhaseConfirm': '確認画面',
	'ConfirmTitle': '<!-- ここに「STEP2.確認」画像を挿入 --><h4>入力内容をご確認ください</h4>',

画像の挿入パスは、入力画面からのパスになります。
「mfp.statics/images/」に画像をアップロードする場合は、以下のパスになります。

	'PhaseConfirm': '確認画面',
	'ConfirmTitle': '<p><img src="mfp.statics/images/画像名" alt="ステップ2"></p><h4>入力内容をご確認ください</h4>',

最近入力の流れ画像を表示させる場合が多いので、メモしておきます。

コメント

タイトルとURLをコピーしました