Zen Form - distraction-free forms

Kasper Mikiewicz

5 months ago · 409 views Ranger Pick

10 comments 29 likes

Hey guys, here's my project that provides you with a distraction mode for forms or single text inputs, textareas.

Add zen mode for all supported elements in form

HTML

<form class="zen-mode">
    <a href="#" class="go-zen">Open zen mode</a>
    <input type="text" name="name" placeholder="Type your name here.">
    <textarea name="bio" placeholder="Write your bio here..."></textarea>
    <input type="submit" name="submit" value="Send">
</form>

Raw

.go-zen class is the default class that opens zen mode.

$('.zen-mode').zenForm();

Raw

Add zen mode for single element

Bellow you can see how to change theme and use custom element as a trigger that opens zen mode.

HTML

<form>
    <a href="#" class="open-zen-mode">Open zen mode</a>
    <input type="text" name="name" placeholder="Type your name here.">
    <textarea name="bio" placeholder="Write your bio here..." class="zen-mode"></textarea>
    <input type="submit" name="submit" value="Send">
</form>

Raw

$('.zen-mode').zenForm({
    trigger: '.open-zen-mode',
    theme: 'light'
});

Raw

Settings

trigger ('.go-zen') - element the opens zen mode on click
theme ('dark')

GitHub Repo

Demo

Comments are only visible to Forrst members. Log in or Request an invite.