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

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

ポイント

お問い合わせページに来た人が、お問い合わせフォームに集中できるようなページを意識してみました。

MENくん

フォーム以外ほとんど何もない!


PC表示


スマホ表示

MENくん

あひゃ!シンプルすぎるかな♪

くま3号

ええやんか、、、シンプル


使ったプラグイン

【Contact Form 7】

お問い合わせフォームを作成するプラグイン。

【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号
自分でスタイリッシュとか言うの、やばすぎるだろ、、、

うまくできたか
確認

目次へ戻る

確認する際は必ずキャッシュを削除してから見てください

確認方法
「Ctrl」+「F5」(キャッシュ削除)

カスタマイズコードを追加CSS(またはテーマエディタ)に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。

Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。

カスタマイズはキャッシュ削除をマスターしてからです

くまからのお礼

目次へ戻る

本ブログ(for men)では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。(決して自己満足ではありません)

もっとカスタマイズしたい人はこちらの記事を見てください。

【圧倒的SANGOカスタマイズまとめ】~ようこそ、沼への入口へ~

まとめ

追加CSSのまとめ
MENくん
お問い合わせメールいっぱい届くかなぁ
くま3号
夢見んなよ

2 COMMENTS

nishikawa

はじめまして、いつもブログカスタマイズの参考にさせていただいております。

本記事の「Per page head」プラグインですが、プラグイン検索をしたところ見つかりませんでした。もしかしたら提供終了してしまったのでしょうか?

その場合、代用のプラグインや対処法などご教授いただけますと幸いです。

ご多用のところ大変恐縮ですが、よろしくお願いいたします。

返信する
くまさん

nishikawaさん、お問い合わせありがとうございます( ˶ˆ꒳ˆ˵ )

「Per page head」プラグインはですね、名前で検索すると下の方にあるんですよ!

先ほど、ぼくの方でも検索してみたらかなり下に出てきましたw
お手数ですが、検索結果の下の方を探してみてください( ˙꒳​˙ )

返信する

コメントを残す

メールアドレスが公開されることはありません。