kamenokoki.com

【56日目】お問い合わせページを作成&Twitterアカウント取得

Posted:  Last Update:

※具体的なお問い合わせページ作成方法については「お問い合わせページはGoogleフォームで簡単作成!必要な手順を全て解説!」をご参照ください。

サイトの作成を初めて56日目。昨日はHTMLタグの「pre」のせいで激しく表示が崩れてしまったサイトを修正する作業にすっかり時間を使ってしまいました…。問題はいちおう解決したので、今日はお問い合わせページの作成に進みたいと思います。

ロードマップ

ちなみに、サイト作成に当たって、下記のようなロードマップを作っていました。だいぶ進んだかな?

  • 準備 - サイトの全体像を決める
  • 使用するプログラミング言語を決めて環境を整える
  • サイトの基本構造を作って公開する
  • 収益化に最適なサイトにアップグレードする
    • コンテンツを充実させる(他の作業と同時進行)
    • サイトを見てもらえるようにサーチエンジンに登録する
    • sitemap.xmlとRSSを作成する
    • コンテンツに合わせてサイトを修正、スマホにも対応する
    • お問い合わせページを作る ←今日からここをやる
    • 検索ボックスを作る
    • サイトマップページを作る
    • 個人情報に関するページを作る
    • SEOとセキュリティについて調べ、対応する
  • GoogleアドセンスとAmazonアソシエイトの申し込みをする
  • ローカルで簡単に入力ができるようにフォームを作る
  • フォローアップ - より収益化に向いたサイト構造に変更する

お問い合わせページの前にTwitterアカウントを作ろう

お問い合わせについていろいろと調べるついでに、他の方のサイトのデザインも見て回っていました。SNS使っている方多いんですね。で、思ったこと。

私もTwitter初めてみよう!

ちなみに、Twitterは読む専門で、使ったことがありません。Lineは触ったこともありません。Facebookは更新に飽きてしまって最後に見たのは何年前だろう…。ちなみに、メッセンジャーアプリはWhatsAppをスマホに入れています。アメリカとかヨーロッパでは使っている人が多いので、海外と仕事してるとお役立ちです。それすら、仕事以外の「ちょっと楽しい動画があったから見てよ」とかの連絡が来るとガン無視する…。

…私にTwitterを使いこなせるのだろうか…?

でも、せっかくなのでアカウント作ってみます。作成の手順とかはみなさんもうご存じだと思うので、割愛しよう。

Twitterアカウント作成中

なんでだろう、入力ページの説明が日本語になったり英語になったりするんですけど。仕様なのかな?もしかして、設定が英語になってるのかな。時々めんどくさい…。

ホームページを追加したり、usernameを「@kamenokoki」に変えたり、フォロワーじゃなくてもダイレクトメッセージを送れるようにしたり設定しました。

よければフォローしてやってください→

なんかツイートしとこうかな。なにをツイートすればいいんだろう。…適当にツイートしておいた。内容はもちろん大事だけど、とりあえず発信することも大事なはず。(これでいいのか?)

ツイッターをブログに入れる

右上にフォローボタンを追加しました。Twitterパブリッシャーというものを使うと、簡単にパーツができました!

Twitterに直接DMを送るリンクも作成できました。→

さて、これをどう役立てるべきか…。とりあえず、日記と記事の下の方に入れておこう。

お問い合わせページの作成 - フォームに必要なもの

Twitterの役立て方が分からないので、お問い合わせページの作成に入りたいと思います。

お問い合わせページに必要なもの…。こんな感じでしょうか。

  • 名前(ハンドルネーム)※必須
  • 返信用メールアドレス ※任意
  • 題名 ※任意
  • コメント ※必須

箱は4つあればいいみたいです。

お問い合わせページの作成 - フォームの作成

さて、ここからコードを弄る作業に入ります。失敗するといけないので、テスト用環境を立ち上げました。

途中まで作成してて気付いたんですけど、Googleフォーム埋め込めば良くない?セキュリティのこととか考えなくていいし。方針転換しよう。

お問い合わせページの作成 - Googleフォームを埋め込む

Googleフォームを埋め込むために、Googleフォームで入力フォームを作成しました。こんな感じで白い画面です。ちなみに、タイトルを消すには、タイトル部分に半角の空白を入れるだけでOK。

2020.10.25 Googleフォームを埋め込む

次に、テスト環境でこのリンクを埋め込むテストをしてみます。Googleフォームの送信ボタンを押すともらえるリンクをそのままページに入れただけ。とっても簡単。こんなページになりました。悪くないんじゃないかな?

2020.10.25 Googleフォームを埋め込む2

お問い合わせページの作成 - 本番環境に移植

問い合わせフォームのテストもしました。メールも届いています。うまく動いているので、このまま本番環境に移植します。…ちょっとエネルギー不足なので、おやつを食べたり、晩ご飯の準備をしたり、ギターの練習をしたり。クラシックギターの弦が気に入らないことツイートしてみたり。…Twitterで何をつぶやけばいいのか、相変わらず分かりません!

よし、たくさん息抜きしたので、本番環境に移植しましょう。本番用ファイルでもテスト。問題なく動いています。今回はスマホページてもきちんと確認しました。昨日と同じ失敗は繰り返さないぞ!

最後にヘッダーにリンクを貼って、完成です!(右上に「お問い合わせ」が増えました)

2020.10.25 お問い合わせページの作成 - 本番環境に移植

今日はここまで

Googleフォームを使ったおかけでとっても短い時間で作成が完了しました。お問い合わせフォームの作成には何日かかかると思っていたので、すごく得した気分。

明日は検索ボックスを作ろうと思います。では、また明日。

記事をシェアする

亀の子に連絡

ランキング参加中!ぽちっとしてね

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

広告