【SANGOカスタマイズしてみた】シンプルなお問い合わせページを作ってみた

シンプルなお問い合わせページ

追記:SANGOver1.7以上でのアイコンの文字化け対処法

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。


この記事では
シンプルなお問い合わせページの作成方法を説明。
CUSTOM POINT
お問い合わせページに来た人が、お問い合わせフォームに集中できるようなページを意識してみました。
MENくん
フォーム以外ほとんど何もない!

PCではこんな感じ

PC表示


スマホではこんな感じ


MENくん
あひゃ!シンプルすぎるかな♪
くま3号
ええやんか、、、シンプル

このサイトの環境

テーマ
子テーマ
プラグイン

使ったプラグイン

【Contact Form 7】Contact-Form-7
お問い合わせフォームを作成するプラグイン。

【Per page head】Per-page-head
特定のページのみカスタマイズができるプラグイン。

MENくん
このカスタマイズで使うのはこの2つだけ!インストールして有効化しといてくださいね♪

このカスタマイズは2段階です

このカスタマイズはコードを追加する単純なカスタマイズではありません。

フォームの組み立て→フォームの装飾

この2ステップが必要です。

MENくん
マジか、それはちょっと(説明が)めんどくさいな
くま3号
お前がめんどくさいんかい!

ステップ1 Contact Form 7でフォームを組み立てます

STEP1

 「新規作成」をクリック

新規作成

プラグインを有効化すると、ダッシュボードのサイドバーに「お問い合わせ」がでてきます。そこから「新規作成」をクリックしましょう。

 記入する部分はここ

記入部分

①は自分の好きな名前でOKです。②の部分は次で説明します。
メモ
「Contact Form 7」では、記入したHTMLコードを投稿画面のビジュアルエディタに、ショートコードとして挿入することができます。

ショートコードで挿入

MENくん
長いコードを1行にまとめてくれるのがショートコードだよ

 HTMLコードを記入する

お問い合わせフォームのHTMLコード

後からいくらでも変更ができます。

とりあえずこちらのコードをそのままコピペして貼り付けてください。


 「保存」してショートコードをコピー

ショートコードをコピーしておく

右上にある「保存」を押して、[contact-from-7 ~]と書いてある部分をコピーしておきます。

MENくん
ほぃ!これでお問い合わせフォームの組み立ては終了です
くま3号
次はお問い合わせフォームを装飾するんやな

ステップ2 Per page headでフォームを装飾

STEP2

 「固定ページ」で新規作成

固定ページを新規作成

「固定ページ」から「新規作成」クリックしてお問い合わせページを作成していきます。

 「タイトル」と「URL」を設定

ページタイトルとパーマリンク設定

ページタイトルとパーマリンクはお好きなので大丈夫です。

ちなみにページタイトルは後から非表示にするので、本当になんでもいいです。

メモ
サイドバーを非表示にしてすっきりさせるために、固定ページの属性>テンプレート>1カラム表示(サイドバー無し)を選択しておきます。

 出来上がるイメージ

HPに表示される状態表示部分

ビジュアルエディタの中身

ビジュアルエディタ

いつもどおり入力した部分

通常と同じように、画像を入れたり、文字を入力します。ぼくの場合アイキャッチ画像を非表示にしているので、代わりとなる画像を挿入しています。あとはフォーム入力の注意事項の文字を記入しました。

cintact from 7のショートコード部分

先程コピーしたショートコードを貼り付けるだけで、HPには入力フォームが挿入されます。


 「Per page head」でページを装飾

コード入力部分

投稿画面にある「Add to head」と言う部分にカスタマイズのコードを書いていきます。ここに書いたコードはこのページのみに適用されます。

記入するコード

追記:2018/12/25
SANGOのver1.7以降ではFontAwesome(アイコン)を5にすると鉛筆のアイコンが文字化けします。下記のコード部分を変更してください。

変更前

変更後

注意
いつものstyle.cssに記入とは違い、コードを<style> ~コード~ </style>の様に記入してください。

 「完成」

記事を公開して完成です。

MENくん
これでスタイリッシュなお問い合わせページが完成だ!
くま3号
自分でスタイリッシュとか言うの、やばすぎるだろ、、、

夏だし髪を斬りに行こう!

夏だしどっか行こう!

まとめ

追加CSSのまとめ

手順をザクッと説明
変更手順
  • contact from 7 でお問い合わせフォームを組み立て
  • Per page head でお問い合わせフォームを装飾。
  • 公開して終了。
MENくん
お問い合わせメールいっぱい届くかなぁ
くま3号
夢見んなよ