Googleフォームをカスタマイズ

2020/01/21 2


連絡フォームガジェットが機能してない

これまで迷惑メールが1件来ただけでほぼ利用されることがなかったものの、万が一の時の為にと一応設置してあったお問い合わせメールフォームですが、Blogger 標準の連絡フォームガジェットは、どうやら昨年の10月頃から機能しなくなっていたようなんです。
Blogger Contact Form not working for all users? - Blogger Community

送信に成功した旨のメッセージは出るものの、実際には送信に失敗して届かないという状態。
独自ドメインの場合は対処法があるらしい?のですが、blogspot.com の場合はどうしようもないみたいで、修正されるのを待つしかないようです。

2020/03/08 追記

どうやらお問い合わせメールフォームの不具合は修正されたようです。
ちゃんと機能するのを確認したので、お問い合わせフォームを以前のガジェットに戻しました。
ちなみにウチのフォームはこちらの記事を参考にカスタマイズしたものを設置しています。

CottpicimageBloggerで連絡フォームを個別ページのみに設置するBloggerのウィジェットに頼らず、個別ページのみに問い合わせフォームを設置する方法についての記事です。https://www.cottpic.com/2018/11/blogger-contact-form-on-a-separate-page.html

2020/06/26 追記

今日なんとなくテスト送信してみたら、また通知が来なくなっているのに気づきました。
お問い合わせページに設置したフォームも、サイドバーに設置した公式フォームガジェットもどちらも機能していない模様…

Bloggerユーザーのフォロワーさんがテストした所、独自ドメイン以外のブログのコンタクトフォームが機能してなかったとのことで、前回と同じ不具合が再発してる可能性がありますね。

フォーラムで検索してみたら、やはり同じ症状を訴えているスレッドが先月立てられていました。

Contact us form stopped working, it was working before. I am unable to figure out if i did something - Blogger Community

なんでこんなに不安定なんでしょうか。ほんと困ったもんですね(~_~;)

というわけで、またまた Googleフォームに戻しました。
もし、この数ヶ月の間に当ブログのコンタクトフォームからメッセージを送ったけど返信が来ない、という方がいらっしゃいましたら、お手数ですがもう一度送信いただければ幸いですm(_ _)m

Googleフォームで代用

直るのを待ってるわけにもいかないので、ウチでは代わりに Googleフォームを設置していました。

Googleフォームの作成方法については、こちらのブログ記事でわかりやすく解説されていますのでご参考にどうぞ

BloggerなびimageBloggerにgoogleフォームでお問い合わせページを設置するgoogleフォームを使ったお問い合わせページを作成する方法についてまとめます。https://blogger-nav.blogspot.com/2018/10/bloggergoogle.html


この Googleフォーム、連絡フォームガジェットよりも高機能で各項目のカスタマイズも自由にできますが、見た目のデザイン・レイアウトは変えられません。

ちゃんと機能さえしてくれればそれで充分なんですけど…やっぱりこのイマイチな見た目をなんとかしたくなるのがカスタマイズ好きバカの性というものw




このままだとウチみたいなダークテーマだと浮いてしまいます。しかも送信ボタン周りだけ背景が無いため、黒文字で書かれている「Googleフォームでパスワードを送信しないでください。」のメッセージが読めない(~_~;)
以前はフォーム全体をボーダーで囲って背景が当てられていたはずですが、いつの間にかこういう(ダサい)レイアウトに変わっちゃったんですよね。

Googleフォームもカスタマイズ可能

調べたら Googleフォームもカスタマイズが出来ることがわかり、この記事を参考に早速弄ってみました。

QiitaGoogleフォームを自在にカスタマイズする - QiitaGoogleフォームの埋め込み機能を使えば簡単に、機能するフォームを設置できる。 しかし、デザインはGoogleフォームのデフォルトから変わらないので、サイトの雰囲気は大きく損なわれる。https://qiita.com/sota6412/items/fa077cbf820faca30598

手順が多少面倒ではありますが、思ってたよりは簡単に出来ました。

以前のカスタマイズしたフォームガジェットと同じデザインにした Googleフォームがこちら。完全に旧フォームのデザインを再現できてます。







もちろん機能も問題なく、送信テストも成功しました。

空送信しようとするとちゃんと警告ポップアップが出ます。(ブラウザによって文言やデザインが異なります)




ふじろじっくカスタム

ちなみにウチでカスタマイズしたフォームとスタイルのコードはこちら。もちろんダークテーマ仕様です。

  • ●●●の部分はフォーム毎に異なりますので各自調べて入力してください。
  • 「件名」等、追加の項目がある場合はその分のタグの追記が必要になります。

HTML
<form action="https://docs.google.com/forms/d/e/●●●/formResponse" id="form">
<div class="label">お名前</div>
<input id="name" name="entry.●●●" placeholder="Name" required="required" type="text" />
<div class="label">メールアドレス</div>
<input id="email" name="entry.●●●" placeholder="E-mail" required="required" type="text" />
<div class="label">お問い合わせ内容</div>
<textarea id="msg" name="entry.●●●" placeholder="Message" required="required"></textarea>
<div style="text-align:center"><input id="button" name="button" type="submit" value="送信" /></div>
</form>

<style>
.label {
    font-weight: bold;
    padding: 1em 0 5px;
}
#form ::placeholder {
    color: #ccc;
}
#button {
    border: none;
    border-radius : 3px;
    font-size: 1.2em;
    padding: .3em 2em;
    margin-top: 2em;
    background: #42a5f5;
    color: #fff;
    transition: .3s;
}
#button:hover {
    box-shadow: 1px 1px 10px #fff;
    cursor: pointer;
}
#button:active {
    box-shadow: none;
}
#name,
#email,
#msg {
    padding: .5em;
    border: none;
    border-radius: 3px;
    color: #f5f5f5;
    background: #555;
    font-size: 1em;
    max-width: 100%;
    width: 100%;
}
#msg {
    min-height: 200px;
    min-width: 100%;
}
</style>


「HTML/JavaScript」ガジェットにこのコードをコピペすればサイドバーにも設置可能です。

というわけで、もう「代用」なんかではなく、完全に Googleフォームをデフォルトにしちゃっても良さそうですね。


ARCHIVE

RECENT POSTS