MFG(a)

Making Forms Great (again) is a collection of standard enhancements for forms, made as thin as possible, to aid in the most common conversion and processing tasks related to form state and submission. This module does not rely on any other modules at all and can be used natively or with a frontend framework. Examples below are given both as native and for React, but it should be trivial to apply the MFG(a) attributes and methods to any form with any framework.

Install: npm i mfga

Use: import the methods you need from

import {
    handleSubmit, 
    watchFormState, 
    handleFiles
} from 'mfga'

Normally you only need handleSubmit and watchFormState, and handleFiles if you are going to upload files.

Handle Submit

If you want to use the MFG(a) solutions in general, this wrapper function and form setup takes care of it.

handleSubmit (event)

Native

<form onsubmit="handleSubmit(event)" onchange="watchFormState(event)" action="/send/to/this-url" method="post">
    <input type="text" name="zip" />
    <input type="submit" value="Send" />
</form>

Reacty

<form onSubmit={handleSubmit} onChange={watchFormState} action="/send/to/this-url" method="post">
    <input type="text" name="zip" />
    <input type="submit" value="Send" />
</form>

Between the time of submit and response the form will have the class 'mfga-processing', which you can refer to for a css waiting animation.

Example CSS

.mfga-processing::before {
    content:'';
    position: fixed;
    top: 0;
    left: 0;
    width: 15%;
    height: 2px;
    display: block;
    background: white;
    box-shadow: 0 0 6px 2px rgba(100, 100, 100, 0.8);
    animation: line 1.4s linear infinite;
}

@keyframes line {
    0% {
        transform: translateX(-100%) scale(1);
    }
    40% {
        transform: translateX(280%) scale(5, 1.3);
    }
    100% {
        transform: translateX(660%) scale(1);
    }
}

Handle Form State

watchFormState (event)

• Keeps track of your form state.
• Toggles the disabled prop on your submit button so that you cannot send an unmodified form, if you have a button or input with the type property set to type="submit".

Reacty

<form onChange={watchFormState}>
    <input type="text" name="zip" />
    <input type="submit" disabled value="Send" />
</form>

Note that you need to manually set disabled as default (above)

What about initial state?

Just apply it directly to the fields in your form:

Reacty

<form onChange={watchFormState} onSubmit="handleSubmit">
    <input type="text" name="zip" value={zip}/>
    <input type="submit" disabled value="Send" />
</form>

Upload files

Just set the form as multipart and use the handleFiles method and the JSON object posted will have a files array:

<form enctype="multipart/form-data" onsubmit="handleSubmit(event)" onchange="watchFormState(event)" action="/send/to/this-url" method="post">
    <input name="slogan" value="No slogan">
    <input type="file" onchange="handleFiles(event)" name="files" multiple> 
    <input type="submit" value="Upload" disabled>
</form>

Objectify Form

A helper function, that you may use if you wish to, well, just use this or parts of MFG(a) and not the whole thing.. Converts a form to an object, suitable for sending JSON in a POST body. Normally you wouldn't call it directly using MFG(a) but if you want to write your own submit handler you can use it to convert the form data.

import {
    handleSubmit, 
    objectifyForm
} from 'mfga'

async function submitForm(e) {
    e.preventDefault()
    await fetch(url,{
        method: 'post',
        body: JSON.stringify(objectifyForm(e.target))
    })
}

<form onSubmit={submitForm}>
    <input type="text" name="zip"/>
    <input type="submit" value="Send" />
</form>