フォーム
Google連携のフォーム
簡単な流れ
自作フォーム作成→グーグルフォーム作成→グーグルフォームのプレビューからactionとnameの値持ってくる。→送信テスト
完了画面
thanks.htmlを作成(wpの場合はpage-thanks.phpを作成)
入力フォームのの直前に下記コード追加
<script type="text/javascript">
var submitted = false;
</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display: none"
onload="if(submitted) {window.location='thanks.html';}"></iframe>
確認画面
下記のphpボタンのコード。
チェックボックスについて確認画面の方はname=””に[]をつけない
自動返信メール
スプレッドシートから拡張機能の「Apps Script」に下記jsコードを記述。
HTML
入力フォームのコード
<!-- フォームの開始 -->
<form
action="https://docs.google.com/forms/u/0/d/e/1FAIpQLScdjPkFRN85MZoZ9CFhL4rivpeX9pedo6-hrUHMYjdinPhrDA/formResponse"
method="POST" target="hidden_iframe" onsubmit="submitted=true;" class="form02">
<!-- 名前の入力欄 -->
<div class="formItem">
<label for="name" class="formItem__left required">名前</label>
<input class="formItem__right" type="text" id="name" name="entry.1721291251" required>
</div>
<!-- メールアドレスの入力欄 -->
<div class="formItem">
<label for="email" class="formItem__left required">メールアドレス</label>
<input class="formItem__right" type="email" id="email" name="entry.1961721137" required>
</div>
<!-- 電話番号の入力欄 -->
<div class="formItem">
<label for="phone" class="formItem__left required">電話番号</label>
<input class="formItem__right" type="tel" id="phone" name="entry.1335507757" required>
</div>
<!-- メッセージの入力欄 -->
<div class="formItem formItem-02">
<label for="message" class="formItem__left required">メッセージ</label>
<textarea class="formItem__right" id="message" name="entry.2033630836" rows="4" cols="50"
required></textarea>
</div>
<!-- 連絡方法（ラジオボタン） -->
<div class="formItem">
<span class="formItem__left required">連絡方法</span>
<div class="formItem__right">
<span class="radioBtn">
<input type="radio" id="emailContact02" name="entry.575336234" value="メール" required>
<label for="emailContact02">メール</label>
</span>
<span class="radioBtn">
<input type="radio" id="phoneContact02" name="entry.575336234" value="電話" required>
<label for="phoneContact02">電話</label>
</span>
</div>
</div>
<!-- 興味のあるサービス（チェックボックス） -->
<div class="formItem">
<span class="formItem__left any">興味のあるサービス</span>
<div class="formItem__right">
<span class="checkBox">
<input type="checkbox" id="serviceD" name="entry.1567195420" value="サービスD">
<label for="serviceD">サービスD</label>
</span>
<span class="checkBox">
<input type="checkbox" id="serviceE" name="entry.1567195420" value="サービスE">
<label for="serviceE">サービスE</label>
</span>
<span class="checkBox">
<input type="checkbox" id="serviceF" name="entry.1567195420" value="サービスF">
<label for="serviceF">サービスF</label>
</span>
</div>
</div>
<!-- 個人情報保護方針（チェックボックス付き） -->
<div class="formItem formItem-02">
<span class="formItem__left required">個人情報保護方針</span>
<div class="formItem__right">
<div class="privacyPolicyBox">
<p class="section__txt">
テストテキストテストテキストテストテキスト テストテキストテストテキストテストテキスト
テストテキストテストテキストテストテキスト テストテキストテストテキストテストテキスト
</p>
</div>
<div class="checkBox">
<input type="checkbox" id="privacyPolicy02" name="entry.373606051" value="同意する" required>
<label for="privacyPolicy02">同意します。</label>
</div>
</div>
</div>
<!-- 送信ボタン -->
<div class="form__btn">
<button type="submit">確認画面へ</button>
</div>
<script type="text/javascript">
var submitted = false;
</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display: none"
onload="if(submitted) {window.location='thanks.html';}"></iframe>
</form>
JavaScript
スプレッドシートから拡張機能の「Apps Script」に記述。
function sendAutoReply(e) {
// フォームのレスポンスからデータを取得
var responses = e.values;
var name = responses[1]; // 名前 (フォームの最初のフィールドが名前の場合)
var email = responses[2]; // メールアドレス (フォームの2番目のフィールドがメールアドレスの場合)
var phone = responses[3]; // 電話番号
var message = responses[4]; // メッセージ
var contactMethod = responses[5]; // 連絡方法 (メール or 電話)
var services = responses[6]; // サービスの選択
var privacyConsent = responses[7]; // 同意のチェックボックス
// 送信者宛の返信メール
var senderSubject = "【自動返信】お問い合わせありがとうございます";
var senderBody = "こんにちは " + name + " 様,\n\n" +
"お問い合わせいただきありがとうございます。\n\n" +
"以下の内容でお問い合わせを受け付けました。\n\n" +
"お名前: " + name + "\n" +
"メールアドレス: " + email + "\n" +
"電話番号: " + phone + "\n" +
"メッセージ: " + message + "\n" +
"連絡方法: " + contactMethod + "\n" +
"興味のあるサービス: " + services + "\n\n" +
"当社担当者より追ってご連絡いたします。\n\n" +
"よろしくお願いいたします。";
// 送信者への自動返信メール
MailApp.sendEmail({
to: email,
subject: senderSubject,
body: senderBody
});
// 管理者宛の通知メール
var adminEmail = "r.sakuma@wacca-design.com"; // 管理者のメールアドレスを設定
var adminSubject = "【新しいお問い合わせ】" + name + " 様からのメッセージ";
var adminBody = "新しいお問い合わせがあります。\n\n" +
"お名前: " + name + "\n" +
"メールアドレス: " + email + "\n" +
"電話番号: " + phone + "\n" +
"メッセージ: " + message + "\n" +
"連絡方法: " + contactMethod + "\n" +
"興味のあるサービス: " + services + "\n" +
"同意: " + privacyConsent + "\n\n" +
"このメッセージに返信して、顧客に連絡を取ってください。";
// 管理者宛の通知メール
MailApp.sendEmail({
to: adminEmail,
subject: adminSubject,
body: adminBody
});
}
// フォーム送信時にトリガーされる
function onFormSubmit(e) {
sendAutoReply(e);
}
PHP
確認画面用（confirm02.php）
<section class="section">
<div class="section__inner">
<!-- フォームの開始 -->
<form
action="https://docs.google.com/forms/u/0/d/e/1FAIpQLScdjPkFRN85MZoZ9CFhL4rivpeX9pedo6-hrUHMYjdinPhrDA/formResponse"
method="POST" target="hidden_iframe" onsubmit="submitted=true;" class="form02">
<!-- 名前の入力欄 -->
<div class="formItem">
<label class="formItem__left ">名前</label>
<?php echo $_POST['entry_1721291251']; ?>
<input class="formItem__right" type="hidden" name="entry.1721291251" value="<?php echo $_POST['entry_1721291251']; ?>">
</div>
<!-- メールアドレスの入力欄 -->
<div class="formItem">
<label class="formItem__left">メールアドレス</label>
<?php echo $_POST['entry_1961721137']; ?>
<input class="formItem__right" type="hidden" name="entry.1961721137" value="<?php echo $_POST['entry_1961721137']; ?>">
</div>
<!-- 電話番号の入力欄 -->
<div class="formItem">
<label class="formItem__left ">電話番号</label>
<?php echo $_POST['entry_1335507757']; ?>
<input class="formItem__right" type="hidden" name="entry.1335507757" value="<?php echo $_POST['entry_1335507757']; ?>">
</div>
<!-- メッセージの入力欄 -->
<div class="formItem formItem-02">
<label class="formItem__left ">メッセージ</label>
<?php echo $_POST['entry_2033630836']; ?>
<input class="formItem__right" type="hidden" name="entry.2033630836" value="<?php echo $_POST['entry_2033630836']; ?>">
</div>
<!-- 連絡方法（ラジオボタン） -->
<div class="formItem">
<label class="formItem__left ">連絡方法</label>
<?php
// POSTされた値を取得
$contactMethod = isset($_POST['entry_575336234']) ? $_POST['entry_575336234'] : '';
echo htmlspecialchars($contactMethod);
?>
<input class="formItem__right" type="hidden" name="entry.575336234" value="<?php echo htmlspecialchars($contactMethod); ?>">
</div>
<!-- 興味のあるサービス（チェックボックス） -->
<div class="formItem">
<label class="formItem__left">興味のあるサービス</label>
<?php
$services = isset($_POST['entry_1567195420']) ? $_POST['entry_1567195420'] : [];
?>
<!-- 選択されたサービスをカンマ区切りで表示 -->
<?php echo implode(", ", $services); ?>
<!-- 各選択されたサービスを個別のhiddenフィールドで保持 -->
<?php foreach ($services as $service): ?>
<input type="hidden" name="entry.1567195420" value="<?php echo htmlspecialchars($service); ?>">
<?php endforeach; ?>
</div>
<!-- 個人情報保護方針（チェックボックス付き） -->
<div class="formItem formItem-02">
<label class="formItem__left ">個人情報保護方針</label>
<?php
// POSTされた値を取得
$privacy_policy = isset($_POST['entry_373606051']) ? $_POST['entry_373606051'] : '';
echo htmlspecialchars($privacy_policy); // '同意する'と表示
?>
<!-- hiddenフィールドで値を保持 -->
<input type="hidden" name="entry.373606051" value="<?php echo htmlspecialchars($privacy_policy); ?>">
</div>
<!-- 送信ボタン -->
<div class=" form__btn--confirm">
<div class="form__btn">
<button type="button" name="button" onclick="history.back()">
戻る
</button>
</div>
<div class="form__btn">
<button type="submit" name="submit" value="送信">
送信する
</button>
</div>
</div>
<script type="text/javascript">
var submitted = false;
</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display: none"
onload="if(submitted) {window.location='thanks.html';}"></iframe>
</form>
</div><!-- section__inner -->
</section>
htmlとphpのフォーム
※ワードプレス用に修正していないためここでは機能しない。
簡単な流れ
自作フォーム作成→mail.phpカスタマイズ→送信テスト
下記参考サイト
HTML
入力フォームのコード
<!-- フォームの開始 -->
<form action="confirm01.php" method="POST" class="form01">
<!-- 名前の入力欄 -->
<div class="formItem">
<label for="name" class="formItem__left required">名前</label>
<input class="formItem__right" type="text" id="name" name="name" required>
</div>
<!-- メールアドレスの入力欄 -->
<div class="formItem">
<label for="email" class="formItem__left required">メールアドレス</label>
<input class="formItem__right" type="email" id="email" name="email" required>
</div>
<!-- 電話番号の入力欄 -->
<div class="formItem">
<label for="phone" class="formItem__left required">電話番号</label>
<input class="formItem__right" type="tel" id="phone" name="phone" required>
</div>
<!-- メッセージの入力欄 -->
<div class="formItem formItem-02">
<label for="message" class="formItem__left required">メッセージ</label>
<textarea class="formItem__right" id="message" name="message" rows="4" cols="50" required></textarea>
</div>
<!-- 連絡方法（ラジオボタン） -->
<div class="formItem">
<span class="formItem__left required">連絡方法</span>
<div class="formItem__right">
<span class="radioBtn">
<input type="radio" id="emailContact" name="contactMethod" value="email" required>
<label for="emailContact">メール</label>
</span>
<span class="radioBtn">
<input type="radio" id="phoneContact" name="contactMethod" value="phone" required>
<label for="phoneContact">電話</label>
</span>
</div>
</div>
<!-- 興味のあるサービス（チェックボックス） -->
<div class="formItem">
<span class="formItem__left any">興味のあるサービス</span>
<div class="formItem__right">
<span class="checkBox">
<input type="checkbox" id="serviceA" name="services[]" value="サービスA">
<label for="serviceA">サービスA</label>
</span>
<span class="checkBox">
<input type="checkbox" id="serviceB" name="services[]" value="サービスB">
<label for="serviceB">サービスB</label>
</span>
<span class="checkBox">
<input type="checkbox" id="serviceC" name="services[]" value="サービスC">
<label for="serviceC">サービスC</label>
</span>
</div>
</div>
<!-- 個人情報保護方針（チェックボックス付き） -->
<div class="formItem formItem-02">
<span class="formItem__left required">個人情報保護方針</span>
<div class="formItem__right">
<div class="privacyPolicyBox">
<p class="section__txt">
テストテキストテストテキストテストテキスト テストテキストテストテキストテストテキスト
テストテキストテストテキストテストテキスト テストテキストテストテキストテストテキスト
</p>
</div>
<div class="checkBox">
<input type="checkbox" id="privacyPolicy" name="privacyPolicy" value="同意する" required>
<label for="privacyPolicy">同意します。</label>
</div>
</div>
</div>
<!-- 送信ボタン -->
<div class="form__btn">
<button type="submit">送信</button>
</div>
</form>
送信完了画面（thanks.html）
<main>
<div class="mv">
<h2 class="mv__ttl">
フォーム送信完了
</h2>
</div><!-- mv -->
<section>
<div class="section__inner">
<p class="section__txt">送信完了しました</p>
<div class="form__btn">
<a href="my-form.html">
フォームページへ戻る
</a>
</div>
</div>
</section>
</main>
CSS
/*******************************************
普通のフォーム
*******************************************/
.formItem {
display: flex;
align-items: center;
padding: max(3.5%, 20px) 2%;
border-bottom: 1px solid var(--blue);
}
.formItem-02 {
align-items: flex-start;
}
.formItem__left {
display: inline-block;
width: clamp(100px, 100%, 300px);
}
.formItem__right {
width: min(100%, 700px);
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="tel"],
textarea,
.privacyPolicyBox {
background-color: var(--gray);
height: 50px;
padding: 0 10px;
}
textarea,
.privacyPolicyBox {
height: 150px;
overflow: scroll;
}
.privacyPolicyBox {
padding: 3%;
margin-bottom: 3%;
& .section__txt {
font-size: 0.8em;
}
}
.radioBtn,
.checkBox {
position: relative;
margin-right: 5%;
& input {
position: relative;
width: 1em;
height: 1em;
border: 1px solid var(--blue);
cursor: pointer;
&:after {
display: none;
position: absolute;
content: "";
width: 0.5em;
height: 0.5em;
border-radius: var(--borderRadius50);
background-color: var(--blue);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&:checked:after {
display: block;
}
}
}
.form__btn {
width: min(100%, 250px);
margin: 5% auto 0;
& button,
& a {
display: inline-block;
width: 100%;
padding: 5% 5px;
text-align: center;
border: 1px solid var(--blue);
background-color: var(--blue);
color: var(--white);
transition: var(--transitionBase);
&:hover {
background-color: var(--white);
color: var(--blue);
}
}
}
.required,
.any {
display: inline-block;
position: relative;
&::before {
position: absolute;
font-size: 0.8em;
padding: 3px;
width: 45px;
text-align: center;
top: 50%;
left: 75%;
transform: translateY(-50%);
color: var(--white);
}
}
.required::before {
content: "必須";
background-color: var(--blue);
}
.any::before {
content: "任意";
background-color: #8f8f8f;
}
.form__btn--confirm {
display: flex;
justify-content: space-between;
width: min(100%, 700px);
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.formItem {
flex-direction: column;
align-items: flex-start;
}
.formItem__left {
margin-bottom: 10px;
width: min(100%, 230px);
}
.form__btn--confirm {
flex-direction: column;
align-items: center;
}
}
/*******************************************
普通のフォーム(確認画面)
*******************************************/
#formWrap form {
margin: 5% auto ;
}
.formTable {
width: 100%;
& tr {
display: flex;
align-items: center;
padding: max(3.5%, 20px) 2%;
border-bottom: 1px solid var(--blue);
& th {
display: inline-block;
width: clamp(100px, 100%, 300px);
}
& td {
width: min(100%, 700px);
}
}
}
.confirmBtn01 {
display: flex;
justify-content: space-between;
width: min(100%, 700px);
margin: 50px auto;
& input {
display: inline-block;
width: min(100%,250px);
padding: 5% 5px;
text-align: center;
border: 1px solid var(--green);
background-color: var(--green);
color: var(--white);
transition: var(--transitionBase);
&:hover {
background-color: var(--white);
color: var(--green);
}
}
}
@media screen and (max-width: 768px) {
.formTable {
& tr {
flex-direction: column;
align-items: flex-start;
& th {
margin-bottom: 10px;
width: min(100%, 230px);
}
& td {
width: min(100%, 700px);
}
}
}
.confirmBtn01 {
flex-direction: column;
align-items: center;
& input:not(:last-child) {
margin-bottom: 30px;
}
}
}
PHP
確認画面（mail.php）
<!-- ▼▼▼送信確認画面のレイアウト※編集可 オリジナルのデザインも適用可能▼▼▼ -->
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="format-detection" content="telephone=no">
<!-- css -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/prism.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/my-form.css">
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
<!-- icon -->
<link rel="icon" type="image/x-icon" href="img/common/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="img/common/apple-touch-icon.png">
<title>確認画面</title>
</head>
<body>
<!-- ▲ Headerやその他コンテンツなど ※自由に編集可 ▲-->
<div class="mv">
<h2 class="mv__ttl">
確認画面
</h2>
</div><!-- mv -->
<!-- ▼************ 送信内容表示部 ※編集は自己責任で ************ ▼-->
<div class="section__inner">
<div id="formWrap">
<?php if ($empty_flag == 1) { ?>
<div align="center">
<h4>入力にエラーがあります。下記をご確認の上「戻る」ボタンにて修正をお願い致します。</h4>
<?php echo $errm; ?><br /><br /><input type="button" value=" 前画面に戻る " onClick="history.back()">
</div>
<?php } else { ?>
<p align="center">以下の内容で間違いがなければ、「送信する」ボタンを押してください。</p>
<?php iniGetAddMailXHeader($iniAddX); //php.ini設定チェック ?>
<form action="<?php echo h($_SERVER['SCRIPT_NAME']); ?>" method="POST">
<table class="formTable">
<?php echo confirmOutput($_POST); //入力内容を表示 ?>
</table>
<div class="confirmBtn01"><input type="hidden" name="mail_set" value="confirm_submit">
<input type="hidden" name="httpReferer" value="<?php echo h($_SERVER['HTTP_REFERER']); ?>">
<?php
if (isset($_FILES[$upfile_key]["tmp_name"])) {
$file_count = count($_FILES[$upfile_key]["tmp_name"]);
for ($i = 0; $i < $file_count; $i++) {
if (!empty($_FILES[$upfile_key]["tmp_name"][$i])) {
?>
<input type="hidden" name="upfilePath[]" value="<?php echo h($upFilePath[$i]); ?>">
<input type="hidden" name="upfileType[]" value="<?php echo h($_FILES[$upfile_key]['type'][$i]); ?>">
<input type="hidden" name="upfileOriginName[]" value="<?php echo h($_FILES[$upfile_key]['name'][$i]); ?>">
<?php
}
}
}
?>
<input type="submit" value=" 送信する ">
<input type="button" value="前画面に戻る" onClick="history.back()">
</div>
</form>
<?php copyright();
} ?>
</div><!-- /formWrap -->
</div>
<!-- ▲ *********** 送信内容確認部 ※編集は自己責任で ************ ▲-->
<!-- ▼ Footerその他コンテンツなど ※編集可 ▼-->
<footer class="footer">
<div class="inner">
<p class="copyright"><small>©ワードプレス</small></p>
</div><!-- /.inner -->
</footer>
</body>
</html>
<!-- ▲▲▲送信確認画面のレイアウト ※オリジナルのデザインも適用可能▲▲▲ -->
Snow Monkey Forms
任意の場合
任意の場合はSnow Monkey Formsの設定画面で項目に「any」をつける
スパムメール対策（reCAPTCHA）
スパムメール対策
下記参考サイト
CSS
/*******************************************
スノーモンキーフォーム
*******************************************/
/* 項目と入力箇所 */
.smf-form--simple-table .smf-item {
align-items: center;
padding: max(3.5%, 20px) 2%;
border-bottom: 1px solid var(--red);
&.smf-item__flexStart {
align-items: flex-start;
}
}
/* 入力箇所 */
.smf-form .smf-text-control__control {
width: 100%;
}
/* 入力箇所の色 */
.smf-form .smf-text-control__control,
.smf-form .smf-textarea-control__control,
.smf-item__controls p {
background-color: var(--gray);
border: none;
}
/* 個人情報保護方針のテキスト */
.smf-item__controls p {
padding: 3%;
margin-bottom: 3%;
height: 150px;
overflow: scroll;
}
/* チェックボックス、ラジオボタンの並び（縦並びなら必要なし） */
.smf-radio-buttons-control__control,
.smf-checkboxes-control__control {
display: flex;
& .smf-label:not(:first-child) {
margin-left: 20px;
}
}
/* 送信ボタン */
.smf-action {
width: min(100%, 250px);
margin: 5% auto 0 !important;
& .smf-button-control__control {
background-image: none;
border-radius: 0;
display: inline-block;
width: 100%;
padding: 5% 5px;
text-align: center;
border: 1px solid var(--red);
background-color: var(--red);
color: var(--white);
transition: var(--transitionBase);
}
}
/* 必須マーク */
.smf-form--simple-table .smf-item__col--label {
position: relative;
&::before {
position: absolute;
content: "必須";
font-size: 0.8em;
padding: 3px;
width: 45px;
text-align: center;
top: 50%;
left: 75%;
transform: translateY(-50%);
color: var(--white);
background-color: var(--red);
}
}
/* 任意の場合 */
.smf-form--simple-table .any .smf-item__col--label {
&::before {
content: "任意";
background-color: #8f8f8f;
}
}
/* テンプレ用 */
.post-568 .any {
&::before {
display: none;
}
@media screen and (max-width: 639px) {
display: block;
}
}