2022年10月21日のブックマーク (3件)

  • 【コピペ・css】コピペで簡単お問い合わせフォームのデザイン【HP制作・Web制作・参考】

    こんにちは!EC担当している佐藤です! 前回お問合せフォームのステップ のcssを公開して、今回お問い合わせフォーム自体のcss作成しました! レイアウトやデザインの参考・サンプルとして使用することもできます。 お問合せのデザインがコピペができる参考css探そうとすると、海外向けのようなデザインが多い気がするので日の方向けに作りたいときは今回のようなデザインの方が良いと思います・・・! シンプルなデザインで全てレスポンシブ済みです!いいレイアウトがあったら追加していきたいと思います😁 ※表示サイズの関係で、スマホ仕様に切り替わっていますのでご注意ください 2021.9.4 更新 種類4つ追加とブレイクポイントの修正をしました。 フォームテンプレ 見出しに色が入ってない、ラジオボタンの色がちがうデザイン See the Pen by harukasato (@satosubarusan)

    【コピペ・css】コピペで簡単お問い合わせフォームのデザイン【HP制作・Web制作・参考】
    muneking
    muneking 2022/10/21
  • フォームのCSSを初期化してオリジナルなデザインを再現しよう! | HPcode(えいちぴーこーど)

    フォームの各要素はブラウザによって基となるデザインが異なります。 デフォルトの状態のフォームをChromeとFirefoxで比較してみました。 ChromeFirefox 分かりにくいですが、文言や大きさや色、アイコンなどほぼ異なっています。これがChromeとFirefoxだけでなく、Safari、IEでもそれぞれが独自の表現をさせるので、全部のデザインが異なっている状態です。 コーダーとしてはこの差異を極力なくし、デザインカンプ通りに実現することが求められます。 この記事では、各種フォームのCSSを初期化(ブラウザ間での差異をなくし)オリジナルなデザインを再現する方法を紹介していきます!

    フォームのCSSを初期化してオリジナルなデザインを再現しよう! | HPcode(えいちぴーこーど)
  • 入力率を高める!お問合わせフォームのデザイン | FASTCODING BLOG

    こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、Webサイトのコンバージョン率に関わる重要なメールフォームについて、離脱させないデザイン時の注意点を考慮しながら実際に作ってみました。 離脱を防ぐ!メールフォームデザインの注意点 ユーザビリティを考慮して、いかにシンプルでストレスの無いメールフォームを作るかがポイントです。 ① 個人情報の入力項目は極力減らす 入力項目が多いとそれだけで離脱の原因になります。パッと見て、サクサクと進めそうなボリュームにすることが大事です。 ② 「必須」項目は、「*」でなく文字で記載する 「*(アスタリスク)」や「※​(米印)」と表現することがありますが、うっかり見落とされて「必須項目入力エラー」となってしまうと離脱する可能性が増します。 また、赤いカラーなどを使うと、色盲の方に認識されないので、しっかりと「必須項目」「必須」と記載しまし

    入力率を高める!お問合わせフォームのデザイン | FASTCODING BLOG