Blog スタッフブログ

WEB制作

Googleフォームと自作フォームを連携させる方法.2「確認画面と完了画面の作成」

前回作成した自作フォーム側は送信するだけの最低限の構成でした。

そこに独自デザインの確認画面と完了画面を表示させる方法をご紹介します。

自作フォームを作成する方法は前回をご覧ください。

自作フォームとの連携

1.入力画面の作成

formタグのactionに確認画面のURLを設定します。

buttonタグをクリックして確認画面に移動するようにします。

<form action="/inquiry/confirm/" method="POST">
	<table>
		<tr>
			<th><label>名前</label></th>
			<td><input id="name" type="text" name="entry.○○○○" placeholder="苗字　名前"></td>
		</tr>
		<tr>
			<th><label>メールアドレス</label></th>
			<td><input id="email" type="text" name="entry.○○○○" placeholder="example@domain.jp"></td>
		</tr>
		<tr>
			<th><label>住所</label></th>
			<td><input id="addres" type="text" name="entry.○○○○"></td>
		</tr>
		<tr>
			<th><label>電話番号</label></th>
			<td><input id="tel" type="text" name="entry.○○○○"></td>
		</tr>
		<tr>
			<th><label>コメント</label></th>
			<td><textarea id="comment" name="entry.○○○○" placeholder="コメントを入力してください。"></textarea></td>
		</tr>
	</table>
	<button type="submit" name="submit">
      入力内容の確認へ
    </button>
</form>

2.確認画面の作成

formタグのactionにgoogleフォームと同じhttps://docs.google.com/forms/~/formResponseを設定します。

$_POSTを使用するので拡張子はphpである必要があります。

<form action="https://docs.google.com/forms/~/formResponse" method="POST" id="mG61Hd" class="mailform" target="hidden_iframe" onsubmit="submitted=true;">
	<table>
		<tr>
			<th><label>名前</label></th>
			<td>
				<?php echo $_POST['entry_○○○○']; ?>
                <input type="hidden" name="entry.○○○○" value="<?php echo $_POST['entry_○○○○']; ?>">
			</td>
		</tr>
		<tr>
			<th><label>メールアドレス</label></th>
			<td>
				<?php echo $_POST['entry_○○○○']; ?>
                <input type="hidden" name="entry.○○○○" value="<?php echo $_POST['entry_○○○○']; ?>">
			</td>
		</tr>
		<tr>
			<th><label>住所</label></th>
			<td>
				<?php echo $_POST['entry_○○○○']; ?>
                <input type="hidden" name="entry.○○○○" value="<?php echo $_POST['entry_○○○○']; ?>">
			</td>
		</tr>
		<tr>
			<th><label>電話番号</label></th>
			<td>
				<?php echo $_POST['entry_○○○○']; ?>
                <input type="hidden" name="entry.○○○○" value="<?php echo $_POST['entry_○○○○']; ?>">
			</td>
		</tr>
		<tr>
			<th><label>コメント</label></th>
			<td>
				<?php echo $_POST['entry_○○○○']; ?>
                <input type="hidden" name="entry.○○○○" value="<?php echo $_POST['entry_○○○○']; ?>">
			</td>
		</tr>
	</table>
	<div class="formBtn">
      <div class="formBtnItem">
        <button class="returnBtn" type="button" name="button" onclick="history.back()">
          戻る
        </button>
      </div>
      <div class="formBtnItem">
        <button class="confirmBtn" type="submit" name="submit" value="送信">同意の上送信</button>
      </div>
    </div>
    <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="/inquiry/thanks/">
    </iframe>
</form>

【解説】

$_POSTので入力内容を取得してinputタグのvalueに設定します。

nameタグのnameににgoogleフォームと同じentry.○○○○を設定します。

<input type="hidden" name="entry.○○○○" value="<?php echo $_POST['entry_○○○○']; ?>">

iframeタグのonloadに完了画面のURLを設定します。

<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="/inquiry/thanks/';}">
</iframe>

3.送信完了画面の作成

送信完了画面にはこれといって必要な記述はありません。

送信完了のメッセージ等を好きに設定します。

<section>
    <div>
      送信完了
    </div>
    <div>
      送信が完了しました。
    </div>
</section>
戻る一覧へ戻る