メルマガ登録用Popupフォームの実装 | WordPress

<h6 style="margin-bottom: 5px;">メールマガジン「kensatools Newsletter」への登録はこちら。更新情報をお知らせします！</h6>
<p style="margin-bottom: 0px;">
<span style="font-size: 15px; margin-bottom: 10px;">（月一回程度配信、お知らせ、検査・測定の話、納入実績など）</span>
<span onclick="obj=document.getElementById('open').style; obj.display= (obj.display=='none')?'block':'none';">
<a style="cursor: pointer;">
<input style="font-size: 12px; text-decoration: none; padding-left: 1rem; padding-right: 1rem; white-space: nowrap; margin-top: 10px;" type="submit" name="hogehoge" value="今すぐ登録" onclick="style.display='none'">
</a>
</span>
</p>
<!-- 折り畳まれる部分 -->
<div id="open" style="display: none; clear: both;">
[contact-form-7 id="6563" title="Popup Form メルマガ登録"]
</div>

/* Boxzilla Popupフォーム背景透過 4桁数字はBoxID*/
div#boxzilla-4056, div#boxzilla-6562 {
		opacity: 80%;
		padding-bottom: 0px!important;
}

/* Boxzila Popupフォームに埋め込んだ ContactForm7用 */
#cf7_flex {
   display: flex;
  align-items: top;
  justify-content: flex-start;
  margin: 0px;
	flex-direction: row;
	width: 90%;
	height: 50px;
}

.cf7_mailmag_title {
	width: 15%;
	margin: 0 10px 0 0;
  font-weight: bold;
}

.cf7_mailmag_inputbox {
	width: 70%;
}

.wpcf7 input[type=email], .wpcf7 input[type=text] {
	padding: 7px 10px
}

.cf7_mailmag_inputbox > p {
	margin: 0px 0px 0px 0px!important ;
}

.cf7_mailmag_title > p {
	margin: 0px 0px 0px 0px!important ;
}

#mailmag-submit{
		font-size: 12px;
		text-decoration: none;
		padding-left: 1rem;
		padding-right: 1rem;
		white-space: nowrap;
		margin: 0px 0px 0px 0px;
}