タグ

フォームに関するwasaiのブックマーク (18)

  • ウェブサービスの利用規約のジェネレーターを作ってみたよ : 企業法務について

    昨日今日と、特に予定もないのにお休みを頂いたので、こんなものを作ってみました。 受付はGoogleフォーム、処理はGoogle Apps Script、生成した利用規約はGoogleドキュメントという、完全にGoogleAppsのみで作ったものなので、意図せずモバイルにも対応してます。それにどれだけ意味があるのかはさておき。 だーっと書いたものなので、生成されるのは読むたびに誤字が見つかる味わい深い利用規約ですが、ともあれ、10時間くらいあればこのくらいのものは一般人でもキャッシュアウトゼロで作れてしまう世界に僕たちは既に生きているわけで、その中で自分の価値がどこにあるのかということを再考する材料としては悪くないんじゃないだろうかと思っています。 もうね、社名略称の当事者定義を甲乙に置換してみたり、業務を委託してる側なのに期限の利益喪失条項を双務に変更してみたりしてる場合じゃないですよ。

    ウェブサービスの利用規約のジェネレーターを作ってみたよ : 企業法務について
  • Googleフォームで自動返信システムをサクッとつくる (1/4)

    Google Apps Script(以下、GAS)を使えば、Googleのアプリケーションにちょっとした機能を加えて実用的なサービスに仕立てられます。今回は、問い合わせフォームを簡単に作成できる「Googleフォーム」を使って、問い合わせメールへ自動で返信するシステムを作ります。 【フォーム作成】問い合わせフォームを作る Googleフォームは、問い合わせやアンケートなどのフォームを簡単な操作で作成できるWebアプリケーションです。まずは企業サイトを想定した、シンプルな問い合わせフォームを作成してみましょう。 1. https://drive.google.comにアクセスしてGoogleドライブを開きます。「作成」ボタンをクリックし、「フォーム」を選んでください。

    Googleフォームで自動返信システムをサクッとつくる (1/4)
  • [CSS]スマフォでも印刷してもレイアウトが紙のように美しいフォームを実装できる -Grid forms

    デスクトップでの表示はもちろん、スマフォやタブレットでも、そして印刷してもかっこいいレイアウトのフォームを実装できるスタイルシートのフレームワークを紹介します。 将来的にはスクリプトを使って、機能を強化していくようですよ。 Grid Forms Grid Formsのデモ Grid Formsの使い方 Grid Formsのデモ 格的なデモの前に、まずは簡単なデモから。 デモはChrome, Safari, Firefoxなどのモダンブラウザ、スマフォ・タブレットのブラウザでご覧ください。IEは9+で、IE8以下はレスポンシブ非対応ですが別スクリプトを併用することで対応可です。 Grid Formsはその名の通りグリッドをベースにしたフォームで、紙のようなレイアウトの美しいフォームを簡単に実装できます。 デモページでは、フォームのさまざまな要素が美しいグリッドできっちりレイアウトされてい

  • 入力フォームの迷宮。全角数字を強要するフォームを理解できません。 | SHINGO IRIE

    前々から思っていたんですが、住所を入力する際に全角で入れてくださいという指定をされていることがよくあります。これ、毎回イラッとします。 住所が全角だろうが半角だろうが、システム側で勝手に変換制御してくれよって思います。システム上、全角でないとマズイかどうかは利用者にとっては関係のないことです。 例えば、住所が福岡市天神1-2-3だった場合、福岡市天神1−2−3と入れなおす。そうすると−が全角ではありません。と出てきたり…。この「ー」もたくさん候補があるので、どれが全角だったっけ…と何度か試すこともあったり。まぁ、1丁目2番地3と書けばいいんですが。かたや、電話番号は半角で入れてくださいとか、まぎらわしい。 そのほか「住所の文字数がオーバーしています」って出てきたこともあります。マンション名が記入できませんでした。しょうがないので、マンション名をイニシャルで省略しました。小さなことかもしれま

    入力フォームの迷宮。全角数字を強要するフォームを理解できません。 | SHINGO IRIE
    wasai
    wasai 2013/08/23
    チェックはするけど、変換はしないのよね。あと住所が長いので長さ制限でよくはねられます。
  • 便利なGoogleフォーム7つとテンプレート5つ!

    起業するまでは、あたりまえに会社に存在したいろいろな申請書類。 起業後はそういう書式も全て自分で作る必要があります。 今回は、起業後にあった方がいいなって思われる社内の申請書類をGoogleフォームやスプレッドシートで作成したものを公開させていただきます。 今回の記事は、たまにGoogle検索が嫌いになりそうになりますが、基Googleが大好きな小松宣郷が担当です。 ※ 起業時じゃなくても、旅費の精算や購買申請など紙をお使いの企業さんは結構使えるかも。 あと、エントリーフォームなどは自社の求人ページに埋め込むだけで使えるので、都度都度で採用したい人材って変わると思うので、その都度編集するなどすれば便利だと思います。 使い方は、各書式のリンクからテンプレートを開いて頂き、コピーして自社用に加工してお使い頂ければと思います。 ※ スプレッドシートはロックかけてますが、フォーム送信するとスプレ

    便利なGoogleフォーム7つとテンプレート5つ!
  • BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」:phpspot開発日誌

    BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」 2013年04月05日- Bootstrap Form Helpers BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」。 国、通貨、日付、時間、電話番号、フォント等を入力する際に便利そうなインプットのヘルパーライブラリのご紹介。 次のように、多数のフォーム入力ウィジェットが追加で利用できます。 フォントは見たままで表示されて、selectから選べるので便利そう。 ​UIデザインもいい感じ。 関連エントリ Bootstrapベースのサイトでサイトの使い方をステップ別にオーバレイ表示できる「Bootstro.js」 BootstrapをベースとしたフリーのUIKit「Flat UIBootstrapのテーマで良い感じに動くオート

  • ユーザー登録の面倒くさいフォーム入力の苦痛を激減させる画期的アイデア「ダイアログフォーム」

    登録フォームと言えば通常は必要事項を一方的に入力していくものですが、キャラクターとの会話形式にして、まるでチャットを行っているように情報を入力できるのが「ダイアログフォーム」です。人とチャットしているときはタイピングが苦じゃない、というアイデアを元に作られた登録フォームで、コードのダウンロードも無料で行えます。 ダイアログフォーム - jsdo.it - Share JavaScript, HTML5 and CSS http://jsdo.it/watilde/form 実際にどんな感じでフォームが表示されるのか試してみます。まずはページ右側にある再生ボタンをクリック。 すると、「会員登録ふぉーむ」という文字の下で自動的にWindows Azure 公認キャラクタークラウディア・窓辺が会話を始めます。 「ユーザーIDを入力してください」とクラウディアに言われるので、フォームに自分のIDを

    ユーザー登録の面倒くさいフォーム入力の苦痛を激減させる画期的アイデア「ダイアログフォーム」
  • Webサービス運営で覚えておきたい、登録フォーム作成の7つのポイント

    ニーハオ!カヤックのHTMLファイ部のしんちゃんアル! 中国出身の新卒です。 入社して二ヶ月になりますが、 日語を一生懸命勉強しています。 よろしくお願いいたします。 さて、現在jsdo.itでは第二回HTML5実技コンテストを絶賛開催中! こんどのお題は「思わず登録したくなる登録フォーム」です。 Webサービスの制作においてついつい疎かにしがちな登録フォーム。 実はとても大事なものです! 今日は、登録フォームをつくる際に気をつけるべきポイントを7つにまとめました。 これだけは欠かせない基の要素6つ 登録と無関係の要素はなるべく表示しないように! 聞きたいことは最小限にして不安にさせない OpenIDを利用して登録手続きを超簡単に! バリデーションは色や動きでみせると効果的 登録のメリットを表示しましょう アドバイスに縛られないで、そのサイトの個性に適した手法を使いましょう! これら一

  • Webサービス運営で覚えておきたい、登録フォーム作成の7つのポイント | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

    ニーハオ!カヤックのHTMLファイ部のしんちゃんアル! 中国出身の新卒です。 入社して二ヶ月になりますが、 日語を一生懸命勉強しています。 よろしくお願いいたします。 さて、現在jsdo.itでは第二回HTML5実技コンテストを絶賛開催中! こんどのお題は「思わず登録したくなる登録フォーム」です。 Webサービスの制作においてついつい疎かにしがちな登録フォーム。 実はとても大事なものです! 今日は、登録フォームをつくる際に気をつけるべきポイントを7つにまとめました。 これだけは欠かせない基の要素6つ 登録と無関係の要素はなるべく表示しないように! 聞きたいことは最小限にして不安にさせない OpenIDを利用して登録手続きを超簡単に! バリデーションは色や動きでみせると効果的 登録のメリットを表示しましょう アドバイスに縛られないで、そのサイトの個性に適した手法を使いましょう! これら一

  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
  • [CSS]フォームの見栄えをぐっとよくする、テキスト入力欄とボタンをCSS3で美しくスタイルするチュートリアル

    CSS3 Form Styling Cheat Sheet CSS3でスタイルするテキスト入力欄 CSS3でスタイルするフォームのボタン CSS3でスタイルするテキスト入力欄 HTMLは非常にシンプルです。 classのhogeは、随時変更して利用してください。 HTML <form> <input type="text" class="hoge" /> </form> まずは、ベースとなるスタイルシートです。 CSS: Basic border:0; padding:10px; font-size:1.3em; font-family:Arial, sans-serif; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; width:300px; 枠線を角丸にします。

  • HTML5 フォームバリデーション

    HTML5のフォームバリデーションはもう使ってますか? HTML5では、javascriptを書かずただHTMLタグに以下のような属性を追加するだけで、フォームのバリデーション機能が付加されることになっています。対応ブラウザでは、確認した範囲でDOCTYPE宣言はHTML4のままでも機能します。 属性/タイプ バリデーション内容 required 必須入力のチェック placeholder=”表示文字列” 空の場合の表示文字列 type=”email” メールアドレスバの妥当性 type=”url” URLの妥当性 textarea maxlength textareaの最大文字数 これらを使うとどんなUIになるか、テストフォームを作成してみました。 Firefox, ChromeなどIE以外のブラウザで(IEしかないならインストールして)、このテストフォームの「確認」ボタンをクリックして

  • ふつうのformをつかいたい - はまちや2 - ニコニコ超会議2012

    こんにちはこんにちは!! はまちや2 (@Hamachiya2) ブロガー、クラッカー。特技は洗濯、趣味は破壊、苦手なことはプログラミング。 WEB+DB PRESS のお便りコーナー担当。 「はまちちゃん」とかで適当にググってください。 無料で プレミアム機能を 使う方法 見つける時間がありませんでした。 何話そう? プログラムは苦手だし… セキュリティとか興味ないし… そんなわけで普通のことを話します。 日のテーマ: 『ふつうのformを使いたい』 <form> 電話番号はハイフン抜きの半角で…(はいはい) フリガナはカナで… (カナで名前を学習してしまうのが嫌だけど…) 郵便番号は前と後ろに分けて… (めんどくさいなぁ…) 住所は全角で… (あーはいはい…) … (できた!) (これで送信、と…) ※エラー:住所を正しく入力してください (え、なんで!?) ※住所は全角で入力してく

  • HTML5:タグだけで簡単に「お問い合わせフォーム」を作成する (サンプルあり) | MakeLeapsブログ

    この記事について HTML5 で大幅強化された form 要素を使って問い合わせフォームを作ってみるエントリーです。 form 周りの要素だけでも膨大な情報量になりますので、今回はその中から更に問い合わせフォーム作成に必要な情報のみに絞ってのご紹介となります。 なお、HTML5 は未だ各ブラウザで対応中の技術です。 お使いのブラウザで正しく表示されない可能性がございます。 推奨ブラウザは Opera 11.52 です。 form タグとは? データの入力・送信フォームを構築するタグです。 input や textarea や select など、たくさんの要素と組み合わせることで様々な入力形態を持ったフォームを構築することも可能です。 HTML5 で強化され、JavaScript に頼らずに入力データの書式チェックなどが行えるようになりました。 form タグによって送信されたデータを処理

    HTML5:タグだけで簡単に「お問い合わせフォーム」を作成する (サンプルあり) | MakeLeapsブログ
  • フォーム自動入力(x-autocompletetype)の実験

    ※ご注意: ウイルスバスターがインストールされている環境だと、この記事は読めないようです (→参考画像) (x-autocompletetypeとは?) Webサイトのフォームにワンクリックで個人情報を自動入力してくれる便利機能。ブラウザに、あらかじめ名前やメールアドレスや住所やクレジットカード番号などの情報を設定しておく。 アンケートサイトとかに超便利 入力が苦手なオカンも便利 とにかくべんり Google Chrome のみ対応してる (2012年4月4日時点)。 便利すぎて今後、他のブラウザも追随必至。 (ユーザーが自動入力を使うには) Google Chrome 設定 → 個人設定 → 自動入力設定の管理 → 住所氏名メールアドレス等を入れておく (Webページ側での自動入力の設定) inputにx-autocompletetype属性をつけて、値を email とか sname

    wasai
    wasai 2012/04/05
    予想された実験結果…
  • これはすごい! フォーム最適化に役立つグーグル提案のautocomplete新仕様 | 初代編集長ブログ―安田英久

    ※2012-04-07 セキュリティ面の問題に関して追記しました。 今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる(可能性を秘めた)、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。 グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。 これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。 どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。 たとえば、この状態から、 名前や住所などの標準的な項目が、一気に自動入力されます。 どうでしょう。こうした機能をサイトに設けられたら、フォームの

    これはすごい! フォーム最適化に役立つグーグル提案のautocomplete新仕様 | 初代編集長ブログ―安田英久
    wasai
    wasai 2012/04/04
    たしかに便利だけど、セキュリティとかの面で登録してない人が多そうな気もする
  • フォーム周りのエレメントのデザインを見やすいインターフェースに変更できるjQueryプラグイン・jNiceItと、似たようなやつ何個か

    どこかで使いたいなと思ってメモ。フォーム で良く使うラジオボタンやチェックボックス などのデザインを割りと簡単に見やすいデザ インに変更できるjQueryプラグインです。 この手のプラグインは沢山あるので選択肢の 一つとして、ですが、個人的には使いやすい 印象でした。 昨日に続き、今日もフォームのスクリプト。今日はフォームデザインを変更できるやつです。IE6だけちょい崩れるけどそれ以外は共通したデザインに変更できます。 ラジオボタンとかチェックボックスを画像に置換するプラグインですかね。なので、デザインの変更は基的に画像とCSSを少し変えるだけです。尚、画像の指定もcssで行います。 左が普通で、右がリア充ですね。シンプルでいい感じです。見た目がいいほうが愛されるんですねきっと。世知辛い世の中ですこと。 マークアップも特別なことはしなくて済むのも楽かも。デザインの変更は基的に画像を変え

    フォーム周りのエレメントのデザインを見やすいインターフェースに変更できるjQueryプラグイン・jNiceItと、似たようなやつ何個か
  • Googleドキュメントのフォーム機能からGoogle Apps Scriptを使ってメール送信 | Creazy!

    【2014/12/26:追記】 この記事はGoogleの仕様変更などで内容が古くなっていたため、最新の情報で書き換えました。 リンク先の記事を参照してください。 Googleドライブのフォーム機能からGoogle Apps Scriptを使ってメール自動返信2014年版 [C!] Googleドキュメントで簡単にWEBフォームを作成できる機能があるのですが、アンケートやお問い合わせフォームなどがすぐに作れるので個人でも仕事でも多様している人が多いのではないでしょうか。このフォーム機能、フォームからの送信内容はドキュメントのスプレッドシート(Excelライクな表)にまとまるのでそれを共有しておけば複数人でも管理することができます。ただ、問題があるとすれば送信内容によってはすぐに返信したいのにメール通知機能がついていないんですね(フォーム機能ができた初期にはメニューにあった気もするのですが…)

    Googleドキュメントのフォーム機能からGoogle Apps Scriptを使ってメール送信 | Creazy!
  • 1