お問い合わせ・連絡フォーム






htmlコード↓

<div id="formWrapper">

<form action="ここにgoogleフォームから取得した値"  method="post" name="myForm" class="myForm" target="dummyIframe">
<input type="text" name="ここにgoogleフォームから取得した値" autocomplete="name" placeholder="名前(必須)" required="required">
<input type="email" name="ここにgoogleフォームから取得した値" value="" autocomplete="email" placeholder="メールアドレス(必須)" required="required">
<input type="text" name="ここにgoogleフォームから取得した値" autocomplete="organization" placeholder="題名" >
<textarea name="ここにgoogleフォームから取得した値" placeholder="お問い合わせ内容(必須)" required="required"></textarea>
<input type="button" value="送信" onclick="submitForm()"/></form>
<iframe name="dummyIframe" style="display:none;"></iframe>
</div>

<div id="thxMessage" style="display:none;"><p>お問い合わせありがとうございました。</p></div>
<script>
  function submitForm(){
    document.myForm.submit();
    document.getElementById('formWrapper').style.display = 'none';
    document.getElementById('thxMessage').style.display = 'block';
  }
</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

css↓

.myForm {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.myForm input[type="text"], .myForm input[type="email"] {
  margin-bottom: 20px;
  padding: 2px 8px;
  border: 1px solid #cdcdcd;
  border-radius: 3px;
  width: 70%;
}

.myForm textarea {
  margin-bottom: 40px;
  padding: 2px 8px;
  border: 1px solid #cdcdcd;
  border-radius: 3px;
  width: 100%;
  height: 200px;
}

.myForm input[type="button"] {
  padding: 15px 40px;
  border: none;
  background: royalblue;
  color: #fff;
  border-radius: 15px;
  margin: 0 auto 60px;
  display: block;
}

.myForm input#checkbox {
  margin-right: 10px;
}

.myForm label {
  font-weight: normal;
}

.myForm label:hover {
  cursor: pointer;
}

.myForm input[type="button"]:hover {
  opacity: 0.7;
}