お問い合わせフォームContact Form7を自分だけのオリジナルにカスタマイズしてみませんか。

使うのはフリーのお絵かきソフトとSANGOのボックスです。
CSSを追加するだけで、さらにワンランク上のフォームの完成です。
- SANGOバーションのCSSを公開しています。
- 今回はショートコードを使って作るフォームですので、一部の環境で動作します。
- 導入は自己責任でお願いします。
完成イメージ
Contact Form7に画像を表示
①画像を作る
私が使用したソフトは【メディバンペイント】で、フリーで使用できるものです。
参考 メディバンペイント Pro 使い方メディバンペイント(MediBang Paint)
その他にも有料・無料で透過画像が作れるソフトがありますのでお好みで使用してください。
サイズは800ピクセル×300ピクセルで作りました。

ソフトでサイズを決めたら、透過背景に設定します。
参考 「透過」とは?メディバンペイント(MediBang Paint)

左上の市松模様を選択し、塗りつぶしツール(バケツの絵)で、画像を透過にします。(最初の画面で透過背景になっている場合はそのままで)
あとは好きな画像や文字を配置していきます。

参考 イラストを描こう 初心者向け(1) -下描き-メディバンペイント(MediBang Paint)
②画像をBOXで囲む
Contact Form7で作成したショートコードと画像をボックスで囲みます。
お好みで送信ボタンやフォームの色を変えて完成です。

CSSで装飾する
送信ボタンの幅を変更するCSS
そのままだと、スマホ表示の時に送信ボタンが崩れるので、まっさーさんに教えていただいたCSSを追加します。
ありがとうございます(*´ω`*)
ボックスは想定外なのでなんとも言えませんが…これでボタン幅縮めてみますか??
.wpcf7 input[type="submit"] {
padding: .5em 4em;
}— まっさー (@iMassa07) June 11, 2018
/*--- ContactForm7 送信ボタン幅調整 ---*/
.wpcf7 input[type="submit"] {
padding: .5em 4em;
}
送信ボタンの色を変えるCSS
送信ボタンカスタマイズCSSは「PORIPU 公式サイト」で公開されています。
参考 ContactForm7の問い合わせボタンのデザインPORIPU
テキストエリアの色や線の太さを変えるCSS
テキストエリアの各種設定は以下のCSSを追加します。
ご自身のブログに合った設定に変更してください。
/*--- ContactForm7 テキストエリア調整 ---*/
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
background-color: #fff;/*背景色*/
color: #333;/*文字色*/
width: 100%;/*幅*/
border: 1px solid #ddd;/*線の色*/
padding: 0.5em;/*内側の高さ*/
box-shadow: 1px 1px 2px rgba(0,0,0,.1) inset;/*影*/
}
追加CSSを挿入する場所
「外観」→「カスタマイズ」の一番下「追加CSS」に挿入します。
子テーマのスタイルシートに入力すると、アップデートの際、バックアップが必要となります。
追加CSSはアップデートでも消えることはないので、安心です。

画像(アイコン)に関して
今回私が作った画像に挿入されているアイコンはイラストレーターさんに依頼して作ったものです。
私はイラストレーターさんと最初にお話をして、バナーへの利用許可を取っています。
中には利用できるのはアイコンのみという、イラストレーターさんもいらっしゃいます。
必ず確認してから、使用するようにしましょう。
さめはだ舞子(@samehada_maiko2)さんの記事がとても参考になります。
参考 納品したイラストが第三者に!?二次創作・販売された話 さめって参る!
イラストレーターさんも、依頼する側もしっかりと読んで、トラブルにならないようにしましょうね。
おわりに
PORIPU開発者のまっさーさんのブログで、たくさんのカスタマイズを公開されています。
ぜひ、参考にしてくださいね。
\開発者まっさーさんにビール(投げ銭)を送る/
PORIPU 開発支援
SANGOの記事は他にも!
【ワードプレス有料テーマ】SANGOとPORIPUの魅力!
【リンク集】SANGO・PORIPUユーザーのご紹介