- Essential Elements of a Web Page
- Design Navigation
- Writing Effective Copy
- Getting the Lead
- Designing an Effective Web Form
- Clearly label optional fields
- Size fields appropriately
- Field focus
- Don't make users repeat things
- Don't slice data
- Don't use dropdowns
- Use placeholders and masked text
- Match keyboards for mobile
- How to use labels
- Form layout
- Anatomy of a web form
- Other types of conversion elements
- Trust Marks
- Strong Base
Essential Elements of a Web Page
Writing Effective Copy
Getting the Lead
Designing an Effective Web Form
User does an instant value calculation
(Source: Baymard Institute)
Clearly label optional fields
Size fields appropriately
Don't make users repeat things
- They copy and paste anyway
- Show password
Don't slice data
Don't use dropdowns
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.
How to use labels
Anatomy of a web form
- Input fields
- Field labels
- Action buttons
Other types of conversion elements
Upside down homepage and other lead generation UX design patterns | Rowan Price Consulting
A while back, I wrote that copywriting is 20% UX design. (By the way, UX design is a fancy way of saying "layout for digital interfaces.)" Benjamin Franklin knew this and co-wrote and designed a Declaration of Independence with - for his day - ample whitespace.
Design A Lead Gen Landing Page For Mobile That Converts - Smashing Magazine
A lead capture page greatly differs from a traditional web page in a number of ways. Put that lead generating page on mobile and you'll see those differences expand and even test the limits of what you thought was possible for mobile.
Best Practices For Mobile Form Design - Smashing Magazine
Users can be hesitant to fill out forms. That is why it is our goal as designers to make the process of filling out a form as easy as possible. In this article, I'll share a number of practical techniques that are bound to help you design effective forms.
Best and Worst Practices in Lead Generation UX | Fell Swoop
Look around and you'll find lead generation sites all around you. From enterprise software, to ecommerce, the pressure to close a lead is immense. Not surprisingly, the tactics employed by various businesses range from brand-friendly value-adds, to clever hacks, to outright deception.
2020's Best Lead Generation Forms - 25 Examples To Try
Disclosure: We sometimes use affiliate links which means that, at zero cost to you, we may earn a commission if you buy something through our links. It doesn't matter how good your lead generation strategies are if your web forms are getting in the way of conversions.
Digital Marketing Patterns that Work - Kaleidico
In software development, there is this notion of design patterns. It is a template, a reusable solution to common problems that occur in developing software. A software engineer studies, collects, and uses these design frameworks to build new software and craft more complex applications quickly. Digital marketing lends itself well to using design patterns.