全記事〚カテゴリ〛一覧

【Contact Form7・SANGO用】コンタクトフォームカスタマイズ

cf7 SANGO コンタクトフォーム

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

りんご

コンタクトフォームをSANGOのボックスで囲むだけで、かわいいデザインになりますよ

使うのはペイントソフトとSANGOのボックスです。

CSSを追加するだけで、さらにワンランク上のフォームの完成です。

注意
  • SANGOバーションのCSSを公開しています。
  • 今回はショートコードを使って作るフォームですので、一部の環境で動作します。
  • 導入は自己責任でお願いします。

完成イメージ
ContactForm7

Contact Form7をカスタマイズする方法

ボックスが表示されている画面をキャプチャ(プリントスクリーン)して、ペイントソフトに貼り付けます。ContactForm7

ペイントソフトのスポイト機能を使って、画像のRBG値を調べます。ContactForm7

挿入したい画像をペイントで開き、塗りつぶしでRGB値を入力します。ContactForm7

文字を装飾します。(Canvaがレイヤー加工できて便利です)

できた画像を記事にショートコードを挿入します。

Contact Form7で作成したショートコードと画像をボックスで囲みます。ContactForm7

そのままだと、スマホ表示の時に送信ボタンが崩れるので、まっさーさんに教えていただいたCSSを追加します。ContactForm7

お好みで送信ボタンやフォームの色を変えて完成です。

送信ボタンの幅を変更するCSS

送信ボタン幅調整CSS
.wpcf7 input[type=”submit”] {padding: .5em 4em;}

送信ボタンの色を変えるCSS

送信ボタンカスタマイズCSSは「PORIPU 公式サイト」で公開されています。

参考 ContactForm7の問い合わせボタンのデザインPORIPU

テキストエリアの色や線の太さを変えるCSS

テキストエリアの各種設定は以下のCSSを追加します。

ご自身のブログに合った設定に変更してください。

テキストエリア調整CSS
.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はアップデートでも消えることはないので、安心です。

ContactForm7

りんご

見出しのCSSやその他のカスタマイズCSSも「追加CSS」へ挿入しておくと消えないですよ

画像(アイコン)に関して

今回私が作った画像に挿入されているアイコンはイラストレーターさんに依頼して作ったものです。

ココナラ アイコンココナラでブログ用アイコン依頼!プロに任せて安心

私はイラストレーターさんと最初にお話をして、バナーへの利用許可を取っています。

中には利用できるのはアイコンのみという、イラストレーターさんもいらっしゃいます。

必ず確認してから、使用するようにしましょう。

さめはだ舞子(@samehada_maiko2)さんの記事がとても参考になります。

参考 納品したイラストが第三者に!?二次創作・販売された話 さめって参る!

イラストレーターさんも、依頼する側もしっかりと読んで、トラブルにならないようにしましょうね。

スポンサーリンク

おわりに

ストライプのように柄が入っていると難しいですが、単色であれば簡単にできます。

PORIPU開発者のまっさーさんのブログで、たくさんのカスタマイズを公開されています。

ぜひ、参考にしてくださいね。

参考 マサオカブログ生活の質を少し上げるマガジン

SANGO ダウンロード

PORIPU ダウンロード

\開発者まっさーさんにビール(投げ銭)を送る/
PORIPU 開発支援

SANGOの記事は他にも!
SANGO PORIPU【ワードプレス有料テーマ】SANGOとPORIPUの魅力! SANGO PORIPU【リンク集】SANGO・PORIPUユーザーのご紹介

コメントを残す

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