Home

What is Formlet

Formlet is Firefox extension for saving form data to bookmarklets.

It was inspired by Form Saver, which unfortunately does not work since Firefox 4.x. While Formlet is completly new and independent extension, the basic idea has been preserved - forms data is saved as autofilling bookmarklets.

How it works

1. Fill out a form.
2. Right click on it and select "Save form with Formlet" from context menu
3. Confirmation notification will be show
4. Find bookmark and click it
5. Bookmark will fill the form with saved data.

Screenshots

Formlet options

Context menu entry

Basic context menu:

Extended context menu (with "Show options in context menu" option marked):

Confirmation message

Bookmarklet properties

Bookmarklets anatomy

Bookmarks created with Formlet have uri-s prefixed with "javascript" pseudo-protocol and contain formFiller function with form data. Below you can find examples.

Bookmarklet example

javascript:(function%20(data)%20{"use%20strict";var%20methods%20=%20{getElement:%20function%20(form,%20name,%20index)%20{return%20form[name][index]%20||%20form[name];},%20setValue:%20function%20(element,%20value)%20{element.value%20=%20value;},%20setChecked:%20function%20(element,%20value)%20{element.checked%20=%20!!value;},%20setSelected:%20function%20(element,%20values)%20{var%20options%20=%20element.options;for%20(var%20i%20=%200;%20i%20<%20options.length;%20i++)%20{options[i].selected%20=%20values.indexOf(options[i].value)%20>=%200;}}};var%20form%20=%20document.querySelector(data.form),%20elements%20=%20data.elements;for%20(var%20i%20=%200;%20i%20<%20elements.length;%20i++)%20{try%20{var%20element%20=%20methods.getElement(form,%20elements[i][0],%20elements[i][1]);methods[elements[i][2]](element,%20elements[i][3]);}%20catch%20(e)%20{}}})({"form":"#demo-form","elements":[["hidden-field",null,"setValue","hidden-field-value"],["name",null,"setValue","name"],["pass",null,"setValue","password"],["array[]",0,"setValue","val1"],["array[]",1,"setValue","val2"],["array[]",2,"setValue","val3"],["array[]",3,"setValue","val4"],["radio-choice-1",0,"setChecked",false],["radio-choice-1",1,"setChecked",true],["select-choice",null,"setSelected",["Choice%201"]],["select-choice-group[]",null,"setSelected",["volvo"]],["select-many",null,"setSelected",["Choice%201"]],["select-many-group[]",null,"setSelected",["volvo","saab"]],["textarea",null,"setValue","textarea"],["checkbox",null,"setChecked",true]]})

Bookmarklet example - formatted

(function(data) {
    "use strict";
    var methods = {
        getElement: function(form, name, index) {
            return form[name][index] || form[name];
        },
        setValue: function(element, value) {
            element.value = value;
        },
        setChecked: function(element, value) {
            element.checked = !!value;
        },
        setSelected: function(element, values) {
            var options = element.options;
            for (var i = 0; i < options.length; i++) {
                options[i].selected = values.indexOf(options[i].value) >= 0;
            }
        }};
    var form = document.querySelector(data.form), elements = data.elements;
    for (var i = 0; i < elements.length; i++) {
        try {
            var element = methods.getElement(form, elements[i][0], elements[i][1]);
            methods[elements[i][2]](element, elements[i][3]);
        } catch (e) {}
    }
})({
    "form": "#demo-form",
    "elements": [
        ["hidden-field", null, "setValue", "hidden-field-value"],
        ["name", null, "setValue", "name"],
        ["pass", null, "setValue", "password"],
        ["array[]", 0, "setValue", "val1"],
        ["array[]", 1, "setValue", "val2"],
        ["array[]", 2, "setValue", "val3"],
        ["array[]", 3, "setValue", "val4"],
        ["radio-choice-1", 0, "setChecked", false],
        ["radio-choice-1", 1, "setChecked", true],
        ["select-choice", null, "setSelected", ["Choice 1"]],
        ["select-choice-group[]", null, "setSelected", ["volvo"]],
        ["select-many", null, "setSelected", ["Choice 1"]],
        ["select-many-group[]", null, "setSelected", ["volvo", "saab"]],
        ["textarea", null, "setValue", "textarea"],
        ["checkbox", null, "setChecked", true]
    ]
});