Login
Creating a login form is a simple task, add every field you need: username, email, forget password?, buttons, ...
Demos
Example
Markup
<form action="/" method="post">
<fieldset>
<legend>Welcome back</legend>
<p><label>Username or Email</label>
<input tabindex="1" name="email" placeholder="your@email.com" required="" type="text">
</p>
<p><label>Password <span class="alignright"><a href="#" title="Forgot password?">Forgot?</a></span></label>
<input tabindex="2" name="password" placeholder="6 characters minimum" required="" type="password">
</p>
<p>
<button type="submit" tabindex="3" title="Login">Login ›</button>
</p>
</fieldset>
</form>
Source:
modules/_form.scss, line 164
Search
WebSlides provides a easy way for search forms creating. Connect it to your search engine and help your users to find information in your site. Longforms are part of a whole website, a search form allows to find more relevant information in your site.
Demos
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas urna nisi, mollis sit amet venenatis nec, pulvinar id mi.
Markup
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas urna nisi, mollis sit amet venenatis nec, pulvinar id mi.</p>
<form action="/" class="user" method="post">
<input name="location" tabindex="1" placeholder="Type here..." required="" type="search">
<button type="submit" tabindex="2" title="Search">Search ›</button>
</form>
Source:
modules/_form.scss, line 146
Try
Highlight important links
Demos
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas urna nisi, mollis sit amet venenatis nec, pulvinar id mi.
Markup
<p class="text-intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas urna nisi, mollis sit amet venenatis nec, pulvinar id mi.</p>
<p><a href="#" class="try">Important link</a></p>
Source:
modules/_form.scss, line 96