WebDesigner's Memorandumウェブデザイナーの備忘録

1Passwordでウェブサイトの入力フォームを一瞬で入力する方法

1Passwordで特定サイトのお問い合わせフォーム項目を一瞬で入力できるようにする方法

本来であればパスワードを管理するためのサービスですが、1Passwordを使うことでお問い合わせフォームの項目を一瞬で入力できます。

ウェブサイトからのお問い合わせ

自分の場合、ウェブサイトのお問い合わせフォームから定期的に問い合わせる必要があるのは歯医者の検診くらいですが、それでも毎回「名前」「メールアドレス」「住所」「電話番号」と入力していくのは地味に面倒です。

半年に1回くらいのペースで定期的に行うことが分かっているのでラクをしたいのと、この方法は1度PCから設定してしまえば、スマホアプリ版の1Passwordから呼び出してスマホでの入力も一瞬にできます。

住所の入力ってPCならまだ耐えられるのですが、スマホでの入力ってかなりしんどいです。

  • URLが同じで定期的に入力する必要があるサイト
  • 最初はPCで設定が必要
  • 1度設定してしまえば、PCはもちろんスマホアプリ版の1Passwordを入れてスマホから簡単に一瞬で入力できる

自動入力の設定

1Passwordの[新規項目]→[ログイン]でログイン項目を作成します。

「ユーザー名」と「パスワード」は空にして、「ウェブサイト」にはお問い合わせフォームがあるページのURLを貼ります。
あとはその下の「セクション」部分にお問い合わせフォームの項目を設定していきます。

セクション部分の設定

お問い合わせフォームのあるページを開き、右クリック→[検証(F12)]で開発者ツールを表示し、フォーム部分のタグを確認します。

開発者ツールでフォーム部分の確認 

各項目のname属性を1Passwordの「ラベル」と同じ文字を入力し、その項目に入力したい値を「新規フィールド」に入力していきます。

name属性と1Passwordラベルを合わせて入力する

ちなみに、type属性がtextの場合はデフォルトの「T」のアイコンのままで問題ありませんが、emailtelなど別の場合はそれに合わせた設定に切り替える必要があります。

type属性1Passwordの設定
textテキスト
emailメール
date日付
passwordパスワード
tel電話番号
fileファイル

この開発者ツールでname属性を確認しての設定が必要なので、スマホではなくPCからでないと設定ができません。

入力がすべて完了したら保存して設定完了です。

設定した情報で入力する

PCの場合

ウェブサイトのログインのときと同じ要領で使用できます。

ブラウザに1Passwordの拡張機能を入れて、お問い合わせフォームのあるページでショートカットキー(デフォルトはoption + command + \(バックスラッシュ))を入力するのが早いです。

ちなみに、自分の場合は左手だけで入力したいので、ショートカットキーをoption + command + `(チルダ)に変更しています。

ショートカットキーの変更は1Passwordの環境設定の[一般]タブにある「ログイン入力または 1Password を表示する」を変更すればOK。

[一般]タブにある「ログイン入力または 1Password を表示する」

SP(iOS)の場合

スマホアプリ版の1Passwordをインストールして、「パスワードの自動補完」機能を使えば一瞬で入力できます。

詳しくは過去に記事にしているのでそちらをご覧ください。

ウェブサイト上の入力が一瞬でできるようになる

わざわざ設定するのが面倒ですが、inputタグ系はこの方法で設定すれば一瞬で入力できるようになります。

下記のような不満もありますが、それでも一瞬で入力されるのは爽快感があります。

  • 「ログイン」ではないのにログイン項目として設定しないといけないのが違和感
  • 設定するには開発者ツールからname属性をわざわざ確認する必要がある
    • name属性が「myouzi」「zyuusyo」みたいに微妙な名前でも、サイトのname属性に合わせないといけない
    • サイトの改修によってname属性が変わると修正が必要になる

定期的に入力しているようなサイトで、入力項目が多い場合はぜひ設定してみてください。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね