omitsublog

自分がいいと思ったもの、チャレンジしたこと、試したものなどを紹介してくブログ。いろんな分野のハンドメイドに挑戦中。クズ男ガチャの引きなら誰にも負けない自信あり

お問い合わせフォームの設置

こんにちは。おみつです。

ブログにお問い合わせフォームを設置してみました。

 

 

メールアドレスをそのまま載せるのは抵抗があったので、Googleさんの便利な機能を使わせてもらいました。

簡単便利でシンプルな機能です。 

 

 

 

 

Googleアカウントにログイン

 

www.google.com

 

Googleさんの機能を使っての作成ですので、Googleアカウントがあるのは前提とさせていただきます。

 

アカウントにログインしてメニューボタンをクリック。

 

f:id:omitsublog:20181111231106j:image

 

メニューが開いていろんなアイコンが出てくると思いますが、ずーっと下にいきます。

”さらにもっと”をクリックして、さらにずっと下です。

 

 

 そうすると、紫色の”フォーム”というアイコンが出てきます


f:id:omitsublog:20181111233110j:image

 

これを開きます。

 

 

 

 

フォームを作成

 

フォームアイコンをクリックして開くと、フォームを作ろうというこのような画像が出てきます↓


f:id:omitsublog:20181111231848j:image

 

”Googleフォームを使う”をクリック。

作成画面が出てきます。


f:id:omitsublog:20181111231929j:image

 

無題のフォームのところに”お問い合わせ”

フォームの説明のところに”お問い合わせはこちらからお願いいたします。”と入力しました。

 
f:id:omitsublog:20181111233100j:image

 

ここは好きなように入力してください。

  

 

次に質問を設置していくので、オプションの〇ところをクリック。

設置したい質問を作成していきます。

 


f:id:omitsublog:20181111232019j:image

 

 

”お名前””メールアドレス””お問い合わせ内容”があれば、お問い合わせフォームの最低限の役割は満たせると思います。

 

 

仕様は短いと記述式、長いと段落がいいみたいなので

”お名前”と”メールアドレス”は記述式、”お問い合わせ内容”は段落にします。

 

入力は全て必須にしました。

 

 

作成し終わったら メニュー > プレビュー で見てみましょう。

こんな感じになります↓


f:id:omitsublog:20181111232114j:image

 

 

プレビューを見てこれでいいと思ったら、ブログに貼り付けるためのHTMLを表示させましょう。

 

 

 

 

HTMLを表示させる


フォームが完成したら、それをブログに貼り付けなきゃお問い合わせフォームとして機能しません。ブログに貼り付けるにはHTMLが必要。ということで、HTMLを表示させます。

 

 

ヘッダーにある送信ボタンをクリックします。


f:id:omitsublog:20181111232151j:image

 

 紙飛行機のアイコンのやつです。

 

 

 

画面が切り替わるので<>←こういうやつをクリック

 
f:id:omitsublog:20181111232207j:image

 

 

HTMLが表示されますので、それをコピーします。

 
f:id:omitsublog:20181111232232j:image

 

”コピー”を押せば難なく全てコピーしてくれますよ。

これをブログに貼り付けます。

 

 

 

 

ブログにフォームを設置する

 

お問い合わせページは固定ページで作成します。

 

 

 はてなブログにログインします。


f:id:omitsublog:20181111232246j:image

 


固定ページを開いて、URLを作成します。

 


f:id:omitsublog:20181111232323j:image

 

"contact"や"info"が分かりやすくていいと思います。

 

 

ページを作るをクリックすると、ブログ作成画面になります。

 


f:id:omitsublog:20181111232330j:image

 

HTML編集で、先ほどコピーしたHTMLを貼り付けて公開をクリック。するとページが作成されます。

 

 

作成したページの右の方にあるこのアイコン↓をクリックすると、作成したページに飛べますので、そこのURLをコピーしてください。


f:id:omitsublog:20181112175221j:image

 

固定ページを作成しただけでは、読者さんはそのページにはたどり着けませんのでサイドバーなどに表示させる必要があります。だからURLが大事。

 

 

 

 

フォームをサイドバーに表示させる

 

 デザイン > スパナマーク > サイドバーから表示させる項目を選びます。

 

f:id:omitsublog:20181111232339j:image

 

 

私はプライバシーポリシーの固定ページをリンクの項目で表示させていますので、今回もリンクの項目に表示させます。

 

 

リンクの編集をクリック。


f:id:omitsublog:20181111232352j:image

 

 

タイトルとURLを入力して適用をクリック。

その後、変更を保存するをクリックするのを忘れずに。

 

 

リンク項目内にお問い合わせが追加されました↓

f:id:omitsublog:20181111232408j:image

 

中身はこんな感じ↓
f:id:omitsublog:20181111232413j:image

 

あ、ちなみに上の部分、私のは紫になってますけど、色は変えられるみたいです。

 

 

 

 

テーマ色の変更

 

またGoogleさんのフォーム作成画面に戻ります。

さっきは紙飛行機アイコンでしたが、今回はパレットアイコン。


f:id:omitsublog:20181111232151j:image

 

 

その中で好きな色を選んで適用させるだけです。


f:id:omitsublog:20181111232442j:image

 

ブログなどにテーマカラーなどがある方は、選べていいですね。

私は初期設定で特に問題ありませんのでそのまま…。

初期設定が何故か、左から2番目のやつだったのが気になるんですが笑

不思議です。

 

 

 

おみつ。