ロゴ
【note:検索上位を狙うブログ理論】一騎当千SEO

【マナブログコピー(WordPress)】お問い合わせページの設定方法

基本デザイン設定

こんにちは、ごま吉(@Lv1gomakichi)です。

Manablog Copyでのお問合せページの設置方法について紹介します。
お問合せページは、Googleフォームの機能を活用して、ブログにフォームを簡単に埋め込むことができます。

お問合せページは、読者や企業など連絡を取りたい人とあなたを繋ぐ大切なページです。設置することをオススメします。

当ブログについて

マナブログさんに参考マニュアルとして掲載して頂きました😆
本家認定のマニュアルです。

Manablog Copy お問合せページの設置方法

お問合せページはGoogleフォームの機能を使います。
まずは、公式サイトへアクセスします。
※Googleアカウントが必要になります。

公式GoogleForm

アクセスしたら、新しいフォームを作成空白 を選択

まずは、フォームの名前フォームの説明を入力しましょう。
シンプルに「ブログ名+お問合せフォーム」でいいと思います。説明は「お問い合わせは、こちらからお願いします。」などでOKです。

次に、最初の質問を入力します。
メールアドレスまたは氏名などでいいと思います。入力方式は記述式を選択します。
※必須のスライダをアクティブにすると『必須項目』になります。

続いて質問項目を増やしていきます。
右上のマークをクリックすれば設問が増えていきます。
残りの項目は、お名前サイト名お問い合わせ内容の3つあれば十分です。

作ったフォームをブログに埋め込む

作ったフォームを自分のブログへ埋め込みましょう。
右上の送信をクリックします。

メールアドレスを収集するにチェックを入れます。
<>タブを選択します。
マナブログコピーの場合は横幅は670ピクセルくらいがPCだとジャストサイズっぽいです。最後にコピーボタンを押せば、クリップボードにアドレスがコピーされます。

次に、WordPress管理画面にアクセスします。
管理画面固定ページ新規追加をクリックします。

タイトルはお問い合わせとします。
グーテンベルグエディターのエディターブロックに出現するボタンをクリックして、フォーマットカスタムHTMLを選択します。

HTMLの入力欄に、先程コピーしたGoogleフォームのコードを貼り付けます。

設定が終わったら公開するをクリックします。その際のパーマリンクは分かりやすいようにcontactとでもしておきます。

こんな感じで埋め込み完了です

Googleフォームの設置と合わせて設定しておきたいこと

グーグルフォームの設置に合わせて設定しておくと便利なことは以下です。

問い合わせがあった際に自分のメールアドレスへ通知させる

Googleフォームは、クラウドで問い合わせ内容を蓄積してくれますが、設定してないと問い合わせが入ったかどうかわかりません。自分のアドレスに通知が来るように設定しましょう。

Googleフォームにアクセスしたら、回答をクリック。
回答詳細ブロック右上の丸3つのボタンをクリックします。

次に新しい回答についてメール通知を受け取るを選択します。
(選択すればチェックマークが入ります)
こちらで設定完了です。

カラーリングをManablog Copyっぽくする

どうせなら、フォームのカラーもManablog Copyっぽくしたいですよね。
カラー設定は以下です。

右上、カラーパレットボタンをクリックすると、テーマオプションが出ます。
オプション内のテーマの色を#4765B2と入力します。
背景色は埋め込みの際は出ませんが、右側のグレーでいいかなと思います。

スマホ表示の際の横へのはみ出しを直してレスポンシブ設定する

Googleフォームは、埋め込んだ際にスマホで見ると横にはみ出してしまいます。

この現象を修正するために、設定したコードを一部変更します。
作成した固定ページ内の『お問い合わせ』のページを再編集します。

変更箇所は、コードの幅をしているwidthの数値を90%に変更してやるだけです。

横幅もちゃんと収まりましたね。


注目こちらも合わせてどうぞ▼
アフィリエイトを始めるための手順を紹介しています。マナブログコピーのカスタマイズが終わったら『ASP登録』をしましょう。

note


注目こちらも合わせてどうぞ▼
アフィリエイト初心者向けに【月3,000円を稼ぐ着実なSEO】をテーマにnote執筆しました。マナブログコピーと合わせて運用すると効果大です。

note

人気記事【マナブログコピー(WordPressテーマ)】文字装飾プラグインの設定