管理画面からお問い合わせフォームの体裁をいじってみた

WordPressの書式、デフォルトであるものを少しだけ変えたいな～って思いました。
替えちゃいましょう。
今回はContact Form 7という問い合わせフォームのプラグインを入れましたが、
少しだけいじっちゃいましょう⤴

※見やすくなるかな？と思い、半角文字は所々半角スペースを入れてます。
実際には半角スペースは入れません。のでご了承ください

WordPressの管理画面、左にずらっと並んだメニューの中から
「お問い合わせ」を選択します。
Contact Form 7というプラグインを有効化すると管理画面左側のメニューの中に
表示されるのです～。
ここからお問い合わせフォーム設定・変更してねって。

で、コンタクトフォームの名前かその下の編集をクリックしてください。
上記の画面になります。（って上の画像はその一部ですが＾＾；）
少し下にスクロールしたら、[ submit ” 送信 ” ]　の下、空間があります。
ここにコーディングしちゃいましょうー

・送信ボタンに相当する [ submit ” 送信 ” ]　をコメントアウトできるのかなーと
ふと思いまして、スラッシュをつけてみました。
・送信ボタン、画面中央に持ってきたかったので、画面中央に設定したdivでボタンを囲いました
< div style = ” text-align : center ” > [ submit ” 送信 ” class : submit_button ] < / div >

※私はボタンにクラス付けてますが、今回はいらないです。
　この状態でOK　↓
< div style = ” text-align : center ” > [ submit ” 送信 ” ] < / div >

で、その下にボタンの装飾のために < style > < / style >　でCSSを書く場所を作ります。
クラスを一個一個つくらなくても、このお問い合わせフォームしかcss効かないので
インプットタイプで書式を指定しました。
input [ type = ” submit ” ] { }
で、ボタンの装飾を入れていきました。

あ、インプットタイプて [ ] で囲まれている左側の言葉です。
見てみましょう。
氏名は [ text 〇〇〇〇 ]
メールアドレスは [ email 〇〇〇〇 ]
題名は [ text 〇〇〇〇 ]
メッセージは [ textarea 〇〇〇〇 ]
てデフォルトで書いてありますよね。
WordPressをお持ちの方は上にたくさんあるタブをクリックしてみてください。
電話番号なら [ tel 〇〇〇 ]てなってます。
入力タイプを判断するためにプログラム部分で決められています＾＾

・コメントアウト効かなかった。。。　//　は削除しよう。うん。
・で、送信ボタンがもともとデフォルトであるのに、
その下に < div > で囲ってもう一個作っちゃったので、送信ボタン2つ並んでしまいました。
一つは削除しましょう～。
でも、真ん中に設定した < div > で囲ったので真ん中になってます。
デフォルトだと小さな送信ボタンが大きくなってます。
input [ type = ” submit ” ]　がしっかり効いてるってことがわかりました。
他のインプット欄も同じ要領で少し装飾してみましょうか。

さっき、インプットタイプで送信ボタンに装飾したので、
今度は
input [ type = ” text ” ]
input [ type = ” email ” ]
を使います。インプットタイプはデフォルトで書いてあるので
少しだけ上にスクロールして確認してくださいね。
題名と名前はインプットタイプが text で同じですね＾＾
電話番号ならインプットタイプは　tel　て書いてあると思います。
文章として書けるテキストエリアはインプットタイプを使いません。
textarea　だけでいいんです。これ忘れがちかもー
注意として複数の要素に指定する場合、　,　を忘れずに。
input [ type = ” text ” ] ,
input [ type = ” email ” ] ,
textarea {
〇〇 : 〇〇 ;
}
となります。