ūüé®

Swipe File: Design Patterns for Lead Generation

  1. Purpose
  2. Focus
  3. Clarity
  4. Strong Base

Essential Elements of a Web Page

Navigation

Copy

Lead Capture

Trust Marks

Footer

Design Navigation

Writing Effective Copy

Getting the Lead

Designing an Effective Web Form

User does an instant value calculation

  1. Complexity
  2. Cost

image

Clearly label optional fields

image

Size fields appropriately

image

Field focus

image

Don't make users repeat things

  1. They copy and paste anyway
  2. Show password

Don't slice data

Don't use dropdowns

image

Use placeholders and masked text

Match keyboards for mobile

Set HTML input types to show the correct keypad. Seven input types are relevant to form design:

  • input type="text"¬†displays the mobile device‚Äôs normal keyboard.
  • input type="email"¬†displays the normal keyboard and '@' and '.com'.
  • input type="tel"¬†displays the numeric 0 to 9 keypad.
  • input type="number"¬†displays a keyboard with numbers and symbols.
  • input type="date"¬†displays the mobile device‚Äôs date selector.
  • input type="datetime"¬†displays the mobile device‚Äôs date and time selector.
  • input type="month"¬†displays the mobile device‚Äôs month and year selector.
image

How to use labels

Form layout

Anatomy of a web form

  1. Input fields
  2. Field labels
  3. Structure
  4. Action buttons
  5. Feedback

Other types of conversion elements

Phone number

Online scheduler

Live chat

Trust Marks

Footer

References