メルマガ登録フォームのCSSとHTMLについて

Question

ご覧頂きありがとうございます。

現在、ワードプレスにメルマガ登録フォームを埋め込んでいるのですが、
テンプレート変更後にデザインが変わってしまいました。。

上のフォームがもともとのフォームで、
下が変わってしまったフォームです。

①名前とアドレス入力欄の間隔が広くなってしまった
②ボタンデザインが無機質なデフォルトのものになってしまった

この2点が現在改善したい要素で、
元のデザインに戻したいと考えています。

ただ、改めてコード(後述)を見直してみると、
どこでボタンデザインを変更すれば良いのか
見当がつかない状態です。

・フォーム間の間隔調整はどの部分に、どんな要素を使うべきなのか？
・そもそも、現状のコードではどの部分でボタンデザインを変更しているのか？

もしお分かりになりましたら、
ヒントをご教授頂けますと幸いです。

もしくは、あまりにも初歩的な質問ということでしたら、
関連するサイトを紹介して頂けるだけでも助かります。

以下、現在のメルマガ登録フォームのHTMLとCSSです。

<style>
.form_input_label {
width: 500px !important;
}
.form_input_input {
width: 90% !important;
height: 50px !important;
margin-bottom:10px;
}
.form_input_vertical {
display: block !important;
}
.form_input_horizontal {
display: inline-block !important;
}
.form_input_submit {
width: 50% !important;}
div.right_block {
width: 600px;
word-break: break-all;
display: inline-block;
}
.required_color {
background-color : #fdd;
}
#content_form {
padding-left: 50px;
padding:0px !important;
}
</style>
<div id="content_form" align="center"><form id="UserItemForm" accept-charset="utf-8" action="【フォームURL】" enctype="multipart/form-data" method="post"><input name="_method" type="hidden" value="POST" />
<div class="input text required name"><input id="Username1" class="form_input_input" name="data[User][name1]" type="text" placeholder="お名前" /></div><br/>
<div class="input text required address"><input id="Usermail" class="form_input_input" name="data[User][mail]" type="text" placeholder="メールアドレス" /></div>
<div class="submit"><input class="form_input_submit" type="submit" value="ためしに登録してみる" /></div>
<input id="server_url" type="hidden" value="【フォームURL】" />
<!-- ▼リファラ --><input id="UserRefererFormUrl" name="data[User][referer_form_url]" type="hidden" value="" /><input id="UserRefererUrl" name="data[User][referer_url]" type="hidden" value="" /><script type="text/javascript"><!-- if (document.referrer.length !=0 ){ if(document.getElementById("UserRefererUrl")) { document.getElementById("UserRefererUrl").value=document.referrer; } } if (document.getElementById("UserRefererFormUrl")) { document.getElementById("UserRefererFormUrl").value=location.href; } //--></script><!-- ▲リファラ -->

</form></div>
<script src="【フォームURL】/js/validation.js"></script>
<div class="clearall"></div>

ちなみに利用しているメルマガ配信スタンド、
マイスピー様のヘルプを見た所、
ボタンは背景画像を使うことでデザイン変更が可能とありました。
https://docs.myasp.jp/%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F/%E7%99%BB%E9%8C%B2%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%AE%E9%80%81%E4%BF%A1%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E9%81%95%E3%81%86%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AB%E3%81%97%E3%81%9F/

ただ、現在のコードにはそれらしきものが入っておらず、
現状どの部分がボタンデザインの変更をしているのか、
ご教授頂けますと幸いです。

Comments

[Yorrie]

HTMLやCSS等のソースコードは、マークダウン記法で挿入できるコードブロック内に書きましょう。
（エディター内の「<code>」って書いてるボタンを押すと出てくるやつです）

[indiancurry]

ご教授頂きありがとうございます！

やり方まで丁寧に教えて頂けたおかげで、
無事コードブロックでの記入ができました。

ありがとうございます！！

Answer 1

起きてる問題よりインデントが気になる
コードフォーマット機能があるエディタ使った方がいいですよ。
下記はEclipseで整形した例

.form_input_label {
	width: 500px !important;
}

.form_input_input {
	width: 90% !important;
	height: 50px !important;
	margin-bottom: 10px;
}

.form_input_vertical {
	display: block !important;
}

.form_input_horizontal {
	display: inline-block !important;
}

.form_input_submit {
	width: 50% !important;
}

div.right_block {
	width: 600px;
	word-break: break-all;
	display: inline-block;
}

.required_color {
	background-color: #fdd;
}

#content_form {
	padding-left: 50px;
	padding: 0px !important;
}

	<div id="content_form" align="center">
		<form id="UserItemForm" accept-charset="utf-8" action="【フォームURL】"
			enctype="multipart/form-data" method="post">
			<input name="_method" type="hidden" value="POST" />
			<div class="input text required name">
				<input id="Username1" class="form_input_input"
					name="data[User][name1]" type="text" placeholder="お名前" />
			</div>
			<br />
			<div class="input text required address">
				<input id="Usermail" class="form_input_input"
					name="data[User][mail]" type="text" placeholder="メールアドレス" />
			</div>
			<div class="submit">
				<input class="form_input_submit" type="submit" value="ためしに登録してみる" />
			</div>
			<input id="server_url" type="hidden" value="【フォームURL】" />
			<!-- ▼リファラ -->
			<input id="UserRefererFormUrl" name="data[User][referer_form_url]"
				type="hidden" value="" /><input id="UserRefererUrl"
				name="data[User][referer_url]" type="hidden" value="" />
			<script type="text/javascript">
			<!-- if (document.referrer.length !=0 ){ if(document.getElementById("UserRefererUrl")) { document.getElementById("UserRefererUrl").value=document.referrer; } } if (document.getElementById("UserRefererFormUrl")) { document.getElementById("UserRefererFormUrl").value=location.href; } //-->

			</script>
			<!-- ▲リファラ -->

		</form>
	</div>
	<script src="【フォームURL】/js/validation.js"></script>
	<div class="clearall"></div>

※個人的にはすごく変な位置に書かれたインラインのJavaScriptが気になる。

で、見た感じCSSには「上のフォーム」にあてられていたであろう指定が見つかりません。
ボタンの角丸とか背景色とか。

必要なCSSを消してしまったのでは？
構文チェックかけてみましたが、整形前のコードでも構文ミスはないようですし。

ボタンは背景画像を使うことで

これっぽいのならCSSでできますよ。

.form_input_submit {
	width: 50% !important;
	border:none;
	border-radius:5px;
	padding:10px;
	background-color:#000;
	color:#fff;
}

色は適当。