Googleフォームの活用事例を7つ紹介！フォーム作成のコツも解説
自社サイトにフォームの導入を検討している方の中には、「Googleフォームでどのようなフォームを作成できるのか知りたい」「自社で作成するフォームの事例が見たい」と考えている方も多いかと思います。 Googleフォームは様々なニーズに合わせてフォームを作成することができます。そのため、企業だけでなく学校や個人ブログなど、多くの場面で利用可能です。 そこで、本記事ではGoogleフォームで作成したフォームの事例を7つ紹介します。各フォームで設定すべき質問項目やGoogleフォームの作成方法、フォーム作成時の注意点についても解説しますので、参考にしてみてください。 【無料で利用可】カンタン作成！機能豊富なフォーム作成ツール「formrun」はこちら！ CVRが高いフォームを作ることができるフォーム作成ツールです。無料でも利用できるのでまずはお試しでもご利用いただけます。 目次 Googleフォー
拡大縮小もできてiPhoneでフォームにforcusしたときズームしないようにする
iOSのSafariには、 フォーム要素へフォーカスするとページ全体が拡大され、入力が終わっても拡大されたままという ありがた迷惑な独自仕様があります。 （ダブルタップやピンチインすると元の倍率に戻せますが、毎回なので煩わしい…） 以前、この現象を回避する方法として viewportでページを拡大できないようにして、フォーカス時に拡大しないようにする方法を紹介したのですが ピンチイン（アウト）での拡大縮小は許可したまま iPhone（iPad）でフォームにforcusしたときズームしないようにする方法もありました！ サンプル ※iPhoneでひらくと動作を確認できます 入力フォームのfont-sizeが関係していた iOS Safariの初期スタイルで、bodyの文字サイズが16pxになっているからでしょうか inputとtextareaの文字サイズが16px以上なら フォーカス時の自動拡
フォームで入力必須であることを指定するinput要素の「required」属性を調べてみた
フォームで入力必須であることを指定するinput要素の「required」属性を調べてみた フォームを送信する際に必須項目に未入力があった場合、クライアントサイドスクリプト（主にJavaScript）やサーバーサイドスクリプト（PHPやCGIなど）でエラーメッセージを表示させ送信ができないように設定する場合が多いですが、HTML5ではそれらのスクリプトを使わなくても、input要素に「required」属性を追加するだけでエラーメッセージを表示する事ができるようなので、どのような動作になるのかを少し調べてみました。「required」の単語自体は「必須」という意味です。 単に未入力エラーだけではなくtypeの値によっては、パターンマッチングを行ってくれるものもあるようです。 <input type="text" required> もしくは <input type="text" requi
フォームのCSSを初期化してオリジナルなデザインを再現しよう！ | HPcode（えいちぴーこーど）
フォームの各要素はブラウザによって基本となるデザインが異なります。 デフォルトの状態のフォームをChromeとFirefoxで比較してみました。 ChromeFirefox 分かりにくいですが、文言や大きさや色、アイコンなどほぼ異なっています。これがChromeとFirefoxだけでなく、Safari、IEでもそれぞれが独自の表現をさせるので、全部のデザインが異なっている状態です。 コーダーとしてはこの差異を極力なくし、デザインカンプ通りに実現することが求められます。 この記事では、各種フォームのCSSを初期化（ブラウザ間での差異をなくし）オリジナルなデザインを再現する方法を紹介していきます！
コピペでできる！cssとhtmlのみでフォームのセレクトボックスをいい感じにするデザイン8選 - copypet.jp｜パーツで探す、web制作に使えるコピペサイト。
<div class="cp_ipselect cp_sl01"> <select required> <option value="" hidden>Choose</option> <option value="1">cat</option> <option value="2">dog</option> <option value="3">rabbit</option> <option value="4">squirrel</option> </select> </div> .cp_ipselect { overflow: hidden; width: 90%; margin: 2em auto; text-align: center; } .cp_ipselect select { width: 100%; padding-right: 1em; cursor: pointer; te
入力ボックスの初期値として薄いグレーの文字を表示する | Web Tips
公開日：2014年5月8日 入力フォームのテキストボックスや検索ボックスで、あらかじめ薄いグレーの文字が表示されているケースがあります。入力欄をクリックしたり値を入力すると文字は消えます。そのような初期値を表示しておく方法を解説します。 JavaScriptで実現する方法もありますが、HTML5で導入されたplaceholder属性を使うとはるかに簡単に実現できますので、その方法をとることにします。 現在ではほとんどのブラウザがHTML5対応になっていますので、特殊な事情がない限りこの方法で構わないでしょう。 やり方は、以下の例のようにplaceholder属性で表示する文字列を指定するだけです。 <form action="" method="post"> <p><label>電話番号：<br><input type="tel" name="telNumber" placeholder=
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
