万の妖怪記

妖怪達の住む異世界に迷い込んでみました。

万の妖怪記

Google様のメールフォームを自分風にカスタマイズしてブログに付けてみました!

妖怪郵便ポスト

ブログにメールフォームは憑き物だとの事で

Google様からメールフォームをお借りするべく早速

喜び勇んでメールフォームを作りました!

 

そして早速ブログに装着……すると…!?

素材1

何か不格好だね…(ポソリ)

いや、このフォーム自体は素晴らしいのだけど変なスクロールバー付いてるし

作った見た目と何か違うような…

 

因みに私が作ったフォームはコチラ

素材2

何故だろう

 

そう思って色々調べてみると

どうやらグーグルのメールフォームはカスタマイズ出来る様子

で、一番読みやすい記事を参考にさせて頂く

 

参考にした記事】

https://www.gorilla-web.net/2020new_google_form_custmize/

 

この方の記事を参考にして早速ソースとやらを開いてみる

素材3

ビビらない…と書いてありましたが

妖怪を呼び出す呪文かと思ってちょっとチビリかけました。

取り合えず何か喰って落ち着こう

そして何とか冷静を保ち直して

Ctrl+Fで「 <form action」,「お名前・フリガナ・メールアドレス・件名の数字

それらを探し出して

知識ゼロの私はそのままhtmlもお借りしてちょっとだけ書き換えて

ブログに載せました  すると……

素材4

 

そうか、プレビュー画面見ないとね

 

素材5

変わんねぇ(ポソリ)

またチビリそうです。

 

そう言えばCSSなものがありましたな…てなワケで

また素晴らしいサイト様よりお借りします

 

【参考にした記事】

https://deshinon.com/2019/03/03/otoiawase-oshare-css-kopie/

 

CSSは良しとしてHTMLの方は書き換えないと出来ない様です

そこで頑張ってやってみました!

 

css 

body {
padding-top:25px;
background-color:#00ddfe;
margin-left:1px;             /*はてなブログ全体の左側に掛かるので調節/
margin-right:3px;         /*右側でございます/
}

.container {
max-width:600px;
margin:0 auto;
text-align:center;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
background-color:#FAFAFA;
}

.head {
-webkit-border-radius:6px 6px 0px 0px;
-moz-border-radius:6px 6px 0px 0px;
border-radius:6px 6px 0px 0px;
background-color:#00ddfe;
color:#2e8eb2;
}

h2 {
text-align:center;
padding:18px 0 18px 0;
font-size: 1.4em;
}
input {
margin-bottom:10px;
}
textarea {
height:100px;
margin-bottom:10px;
}
input:first-of-type
{
margin-top:35px;
}
input, textarea {
font-size: 1em;
padding: 15px 10px 10px;
font-family: 'Source Sans Pro',arial,sans-serif;
border: 1px solid #cecece;
background: #d7d7d7;
color:#2e8eb2;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 80%;
max-width: 600px;
}
::-webkit-input-placeholder {
color: #FAFAFA;
}
:-moz-placeholder {
color: #FAFAFA;
}
::-moz-placeholder {
color: #FAFAFA;
}
:-ms-input-placeholder {
color: #FAFAFA; }
button {
margin-top:15px;
margin-bottom:25px;
background-color:#2e8eb2;
padding: 12px 45px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
border: 1px solid #2ABCA7;
-webkit-transition: .5s;
transition: .5s;
display: inline-block;
cursor: pointer;
width:30%;
color:#00ddfe;
}

button:hover, .button:hover {
background:#19a08c;
}
label.error {
font-family:'Source Sans Pro',arial,sans-serif;
font-size:1em;
display:block;
padding-top:10px;
padding-bottom:10px;
background-color:#d89c9c;
width: 80%;
margin:auto;
color: #FAFAFA;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
}
/* media queries */
@media (max-width: 700px) {
label.error {
width: 90%;
}
input, textarea {
width: 90%;
}
button {
width:90%;
}
body {
padding-top:10px;
}
}
.message {
font-family:'Source Sans Pro',arial,sans-serif;
font-size:1.1em;
display:none;
padding-top:10px;
padding-bottom:10px;
background-color:#2ABCA7;
width: 80%;
margin:auto;
color: #2e8eb2;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
}

 

【html】

置き換え後☟

青い部分が置き換えた所です

<!--
contact form created for treehouse competition.
-->
<form action="グーグルのソースから抜粋したもの">
<ul>
<div class="container">
<div class="head">
<h2>メールフォームを使ってみて欲しいっす</h2>
</div>
<input name="entry.名前の数字" type="text" required="required" id="textfield" class="g_form" placeholder="お名前"><br />
<input name="entry.フリガナの数字" type="text" required="required" class="g_form" id="textfield2" placeholder="フリガナ"><br />
<input name="entry.メールアドレスの数字" type="text" class="g_form" id="textfield3"placeholder="メールアドレス"><br />
<textarea name="entry.件名の数字" required class="g_form_text" id="entry.221047126"
placeholder="件名"></textarea><br />
<div class="message">Message Sent</div>
<button id="submit" type="submit">
送ります
</button>
</div>
</form>

 

メールフォームの出来上がり、実際に使えますよ!

メールフォームを使ってみて欲しいっす





Message Sent

 

送り先はGoogle様なので

送った後はGoogle様の画面に戻りますが私にしては最高の出来な気がします。

どうぞチビリながら創ったメールフォームを是非使ってみて下さいませ ( ´艸`)

★ココナラでお仕事出品中★

イラスト・ロゴデザイン等を妖怪風に仕上げます 妖怪のアバターを使ってSNSを自由に飛び回りましょう★