![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgzJUExJUUzJTgzJUJDJUUzJTgzJUFCJUUzJTgzJTk1JUUzJTgyJUE5JUUzJTgzJUJDJUUzJTgzJUEwJUUzJTgyJTkyJUU0JUJEJTlDJUU2JTg4JTkwJUUzJTgxJUE3JUUzJTgxJThEJUUzJTgyJThCbWFpbGZvcm1wcm8lRTMlODElQUUlRTUlQUUlOUYlRTglQTMlODUlRTYlOTYlQjklRTYlQjMlOTUmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTFlNGM2MGFmMDhmZmNkMjE3MDYyNmEzZDVjYWM0OTRh&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzb3R0YXImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTM2YTFlM2I1ZjQ1ODgxMDA3ZmNlYTQyYzQ0NzU4YTRk&blend-x=142&blend-y=486&blend-mode=normal&s=622d8c7b0260eefe56a39c91273485b2)
メールフォームを作成できるmailformproの実装方法 - Qiita
#メールフォームを作成する事の出来るmailformproの実装方法以下のサイトからダウンロードできます。メールフォームプロCGI - SYNCK GRAPHICAhead内の記述(cssの読…
![](https://www.mubag.com/wp/wp-content/uploads/2022/09/24448700_s.jpg)
メールフォームプロCGIの設置と設定方法を解説 | 無料のメールフォーム作成ツール「EasyMail(イージーメール) 」
メールフォームプロCGIは『シンクグラフィカ』が提供しているメールフォーム。Webサイトやブログの問い合わせフォームに利用できます。設置や設定方法も簡単です。
メールフォームを作成する事の出来るmailformproの実装方法
以下のサイトからダウンロードできます。
メールフォームプロCGI – SYNCK GRAPHICA
head内の記述(cssの読み込み)
<link href="mfp.statics/mailformpro.css" type="text/css" />
フォーム実装部分の記述
<form id="mailformpro" action="mailformpro/mailformpro.cgi" method="POST">
<!-- フォームの内容 -->
<button type="submit">確認画面へ進む</button>
</form>
<script src="mailformpro/mailformpro.cgi" id="mfpjs"></script>
その他の実装方法
- 必須項目
→FORM系タグ(input / textarea / select など)に required=”required”を付与 - 自動返信先となるメールアドレス
→メールアドレスを入力するinputタグのname属性を”email”に設定 - メールアドレス(確認用)
→確認用のメールアドレスを入力するinputタグのname属性を”confirm_email”に設定 - 確認画面カスタマイズ(CSSで出来る範囲)
formタグのすぐ上あたりに下記の記述を入れる
<div id="mfp_phase_confirm">
<div id="mfp_phase_confirm_inner">
</div>
</div>
mfp_phase_confirm_inner
内に動的に生成される要素に対してスタイルを設定していけばカスタマイズできます。
Perlのパス
mailformpro.cgi の1行目の#!/usr/bin/perl
サーバ業者によって違う為、変更が必要な場合があります。
ロリポップの場合はデフォルトのままで大丈夫。
パーミッションの設定
![mfpパーミッション.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F63056%2F7246f857-d6af-7447-d906-754c705534c6.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5875b4b6b8372a2018a20f14286ef409)
以上