【Blogger】Follow by Emailを Google Formsで 復活させる

Google フォームのデザイン・完了ページをカスタマイズ | リモスキ

先日、当ブログのお問い合わせフォームを Google フォームに変更しました。 フォームデザインと完了画面（サンクスページ）のカスタマイズ方法を紹介します。

www.limosuki.com

<form action="https://docs.google.com/forms/d/e/●●●/formResponse" id="form" method="post" target="hidden_iframe" onsubmit="submitted=true;">

<input id="email" name="entry.●●●" placeholder="メールアドレス" required="required" type="text" />

<div style="text-align:center">
<input id="button" name="button" type="submit" value="登　録" />
</div>
</form>

<script type="text/javascript">var submitted = false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){window.location='お問い合わせ完了ページのパス';}"></iframe>

#form ::placeholder {
    color: #ccc;
}
#button {
    border: none;
    border-radius : 3px;
    font-size: 1.1em;
    padding: .3em 2em;
    margin-top: 2em;
    background: #76C6AB;
    color: #fff;
    transition: .2s ease-in-out;
    -webkit-appearance: none;
  }
#button:hover {
    box-shadow: 1px 1px 10px #fff;
    cursor: pointer;
    opacity:0.8;
}
#button:active {
    box-shadow: none;
}
#name,
#email,
#msg {
    padding: .5em;
    border: none;
    border-radius: 3px;
    background: #F5F5F5;
    font-size: 1em;
    max-width: 100%;
    width: 100%;
    color: #454545;
}
#name, #email {
    height: 2.5em;
}
#msg {
    min-height: 250px;
    min-width: 100%;
}
.radio > label {
    margin: 14px;
    cursor: pointer;
}
.label {
    padding: 1em 0 5px;
    font-weight: bold;
}