本日は問い合わせフォームの確認ページのカスタマイズを行いました。

mail.phpを修正します。

確認ページの横幅に関して

Bootstrapを使っているので、1行を12カラムに分けてレイアウトします。

横幅を狭くする(左右に余白をつける)には、現在「col-md-12」で、12カラム使っている行を、1と10と1の合計12や、2と8と2の合計12にします。

左右は余白部分になるので、オフセットを使います。

「col-md-offset-1」で、左に1カラム分の余白、「col-md-10」で内容、残った1カラム分が右の余白になります。

ボタンの位置に関して

ボタンの位置が中央に来ていなかったのは、「type=”hidden”」で隠し項目となっていた部分も含めて中央にしていたのでずれてしまいました。

「type=”hidden”」の隠し項目部分と、ボタンを別のpタグに分けて、ボタンはボタンのpタグで中央にします。

確認画面の項目名に関して

index.htmlのnameの値を修正します。