FormSync

KO | EN

gitlite — search

#python #typescript #golang #go #deep-learning #linux #windows #cli #awesome-list #security #ios #mcp #openai #open-source

(★ 13)

Sync form values in client using LocalForage

FormSync 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# FormSync ([demo](https://acoyfellow.github.io/FormSync/ "demo"))

Store your website visitors form data locally. Improve conversions for people who dropped off mid-way through filling out an online form. Less than 3kb.

It simply attaches `onkeyup` listeners to every `input` and `textarea` element on the page (`onchange` for `select` elements), and syncs them locally in the client using [LocalForage](https://github.com/localForage/localForage "LocalForage").

Currently relies on an `id` attribute for all elements (`input`, `select`, and `textarea`).

## How to install
1. Add FormSync.js (download it from [here](https://github.com/acoyfellow/FormSync/blob/master/FormSync.js "here") or use a CDN like [GitCDN](https://gitcdn.xyz/repo/acoyfellow/FormSync/master/FormSync.js "GitCDN") or [RawGit](https://rawgit.com/acoyfellow/FormSync/master/FormSync.js "RawGit"))
2. For every `input` and `textarea` you want to sync locally, be sure to add an id attribute. For now, FormSync relies on this.
3. When you want to clear the form data, run the `window.clearFormSync()` function to empty out everything in storage. Use this when a form submission has been successful.

## Full example:
```html
<html>

<body>
    <script>
    function mySubmitFunction() {
      // add form validation here
      // add ajax/websockets here
      clearFormSync(); //success! clear form data now:
      alert('Success! We will now empty out storage since the form was successful.')
      location.reload(); // reload page
      return false;
    };
    </script>

<form onsubmit="return mySubmitFunction()">
    <p>
    Try filling out some of the fields below... and before you hit Submit, hit refresh or "Run" again.
    </p>
    <textarea id="textarea" value=""></textarea><br/>
    <input id="test" type="text" value="" placeholder=""/><br/>
    <input id="test2" type="text" value="" placeholder=""/><br/>
    <input id="test3" type="text" value="" placeholder=""/><br/>
    <input id="test4" type="text" value="" placeholder=""/><br/>
    <input id="test5" type="text" value="" placeholder=""/><br/>
    <hr/>
    <input id="test6" type="checkbox" name="vehicle" value="Bike"> I have a bike<br/>
    <input id="test7" type="checkbox" name="vehicle" value="Car"> I have a car<br/>
    <hr/>
    <input id="test8" type="radio" name="gender" value="male"> Male<br>
    <input id="test9" type="radio" name="gender" value="female"> Female<br>
    <input id="test10" type="radio" name="gender" value="other"> Other<br>
    <hr/>
    <select id="select">
      <option>First option</option>
      <option>Second option</option>
      <option>Third option</option>
    </select>

<button type="submit">
    Submit (will clear storage)
    </button>
  </form>
  </body>

</html>
```

### Quick note on security:
1. If you don't want to sync an input field (like a credit card field) - do not add an input ID to that field (more ways to opt-in/out fields in the future)
2. By default, this will *not* work on input type=password fields.

### License
[Apache](https://github.com/acoyfellow/FormSync/blob/master/LICENSE "Apache")

FormSync

FormSync 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

FormSync

FormSync 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README