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>

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

JS

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

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>

JS

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

Settings

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