Twitterのプロフィールに、連絡先としてGoogleフォームのメールフォームを貼りました。
フォーム自体は以前からブログ内に配置していたのですが、TwitterのDM仕様変更を受けてプロフィールにも同じフォームを設定しています。
プロフィールに直接フォームのリンクを貼るのではなく、当ブログにフォームを埋め込んだ記事を作りその記事のURLを設定しました。
Twitterでの見え方はこんな感じ。
リンク先から直接フォームに書き込んで送信できます。
自分のメールフォームであることがわかりやすいURLであること、他の画面を挟まずURLから直接フォームに飛べることを重視した結果この形にたどり着きました。
以前FF外の方に「検索で見ました」とDMで親切にしていただいた経験もあり、連絡先はわかりやすくしておきたかったので。例えば舞台感想を読んでくれた作品有識者の方が補足を教えてくれたり、「通販で失敗した」とツイートした際には同じ経験をした方から対処方法を教えてもらったりということがありました。
フォームを埋め込んだ記事の作り方と行った設定を書いておきます。
編集に使っているのははてなPC版の画面です。
GoogleフォームのHTMLを取得
Googleフォームの「送信」からフォームのHTMLをコピーできます。
新規で作成した記事にHTMLを貼り付け
はてなブログ内に新しく記事を作成し、「HTML編集」モードで貼り付け。
HTML内の"width"設定を数値から比率に変えることでレスポンシブ対応させています。
こちらの記事を参考に、スマホとPCのどちらから開いても画面の大きさに沿った幅で表示される設定としました。
「width=”640”」→「width=”100%”」へ書き換えてください。これによって、フォームの横幅が固定されず、画面のサイズに合わせて変動する仕様になります。
Google検索結果に出ないように設定
お問い合わせ用の記事がGoogle検索にかかってもノイズになってしまうので、フォームの埋め込みコードを貼り付けた下に検索よけ指定のコードを追加しました。
はてなブログで特定の記事をnoindexにする方法は、以下のコードを貼り付けるだけです。
（中略）
<script type="text/javascript">
// 追加するmetaタグの作成
var newMeta = document.createElement("meta");
newMeta.setAttribute("name","robots");
newMeta.setAttribute("content","noindex");
// 作成したmetaタグをhead要素内末尾に追加
document.getElementsByTagName("head")[0].appendChild(newMeta);
</script>
カスタムURL機能でURLを変更
はてなブログの編集オプションメニュー内「カスタムURL」項目から、URLの末尾をメールフォームだとわかるように変更しました。
「mailform」で設定しましたが、ハイフンも使えるので「mail-form」なども可能。
記事の公開年月日を過去に設定
そのまま投稿すると記事一覧の中に出てきてしまうので、投稿日時を過去に設定して埋もれさせておきます。
ブログの開設日を投稿日に設定しました。
以上で投稿して完成！あとは記事URLをプロフィールに貼るだけです。
何かありましたらこちらからどうぞ。
