3つの要素を取り入れたお問い合わせフォームにカスタマイズしてみた

   

3つの要素を取り入れた お問い合わせフォームにカスタマイズしてみた  トップ

@yuichico_です。お問い合わせフォームはStinger7にのみならずすべてのWordpressテーマでの実装が可能です。Contact Form 7(コンタクトフォーム7)の特徴はphpをイジらずに、クリックだけで問い合わせフォームが設置できるという優れたプラグインです。ブログを運営していくなかでも、なくてはならないものです。下の画像は完成図です。結論から言うと3つの要素とは必須項目と任意項目を設置し、1カラムにしました。なお、必須、任意項目はstinger7以外のテーマでもできますが、1カラムの仕方はstinger7以外のやり方は書いていませんので、ご了承ください。
コンタクトフォーム7 完成図

スポンサードリンク

プラグイン

順に画像を使って説明します。

Contact Form 7をインストール

プラグイン→新規追加→検索バーに「 Contact Form 7 」でEnter

プラグイン 検索窓 Contact Form 7 と検索

今すぐインストール

Contactform7 今すぐインストール

プラグイン有効化

コンタクトフォーム7 プラグインを有効化

Contact Form 7の文字の下にある 設定

プラグイン コンタクトフォーム下 設定をクリック

コンタクトフォーム1

コンタクトフォームをクリック

コンタクトフォームを編集できる画面に移動するはずです。赤枠内がデフォルトの設定。

Stinger7 コンタクトフォーム7 編集

フォームを実装

先ほどのコンタクトフォームを編集できる画面の赤枠内に、以下をコピペしてください。

 

リンク Contact form 7のCSSデザインとカスタマイズ方法

右上ステータスの中にある保存をクリックします。

コンタクトフォーム 保存

固定ページへ投稿

ショートコードをコピーします。

コンタクトフォーム ショートコードをコピーする

固定ページ→新規追加

固定ページ 新規追加

タイトルを入力してショートコードを貼り付ける。また一言メッセージを入れるものいいでしょう。

タイトル入力 ショートコード貼り付け

カラム数の変更

右下のカラム変更で1カラムに変更するを選択しよう。右サイドバーがなくなってコンタクトフォームのみが表示されます。

1カラムに変更する ラジオボタンを選択

リンク 舐めちゃダメよ!売上アップするお問い合わせフォームの作り方

更新をクリック

コンタクトフォーム 公開

メニューへ設置

リンク 【Stinger7】メニューバーにFontawesomeを入れる簡単な方法

メニューへの入れ方は上のリンクとほとんど同じです。設置したら、ご自身の運営しているブログのコンタクトページへアクセスしてみてください。まだCSSはカスタマイズされていませんが、1カラムで反映されているはずです。

カスタマイズ

Stinger7子テーマの外観→テーマ編集→style.cssの一番下へコピペです。

必須項目

任意項目より目立つことを意識して、背景を #3498db にして文字色を白にします。なぜ required2 かというと required だと コメント欄のアスタリスクに反映されてしまうからです。

任意項目

必須項目よりも目立たないようにして、背景を白に、文字色と外枠を #3498db の色にします。

まとめ

アスタリスクは、必須項目と同じ意味ですが、なんのマークかわからない人もいるそうです。必ず、必須項目と任意項目の文字をつけて装飾しましょう。

シェアしていただけると助かります。

 - Web, Wordpress