ブログ

お問い合わせフォームの設置方法とカスタマイズ


ずっと設置しようと思いつつ先延ばしにしてた、お問い合わせフォームを設置した。このサイトのお問い合わせフォームはContact Form 7を使って作成した。その方法について書く。

プラグインのインストール


まずはプラグインのインストールをする。wordpress編集画面左のメニューからプラグイン>新規追加と進む。


右上の検索欄からContact Form 7を検索。インストールして有効化する。これができたら準備完了。

ショートコードを張り付けてお問い合わせ記事を作成


wordpress編集画面の左メニューにお問い合わせが追加される。お問い合わせをクリックしてショートコードをコピーする。


記事を新規作成して、さっきコピーしたショートコードを張り付ける。いい感じのタイトルを付ける。


これでお問い合わせフォーム完成。

送信ボタンのカスタマイズ


完成はしたけど、デフォルトのままだと、このように送信ボタンが背景と同化している。
それをこんな感じにして見やすい色に変える方法を書く。


外観>カスタマイズと進む。


追加CSSをクリック。一番したにコードを追加。画像青線の部分を変更することで送信ボタンの背景を変更できる


追加するコードはこれ。

/contact7送信ボタン/
.wpcf7 input[type=”submit”] ,
.pushbutton-wide{
background-color: #2c8de8;
}


#2c8de8が何色か分からないし、指定の仕方も分からん。って人でも大丈夫。まずは、ここのサイトに行く。赤枠で囲んだ中から好きな色を選んでクリック。そうすると青色の枠のところにカラーコードが出てくる。青色の枠内のカラーコードをコピーしてくれ。コピーしたカラーコードを使って色を指定。



最後に公開ボタンを押せば編集終了。送信ボタンの背景の色が変わっているはずだ。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です