HTML

7 . Forms

Form elements. Secure a form with reCaptcha. Submitting the form data. Related Tutorials. Caveats with 'disabled' attribute.

Form elements

We can use form elements available in Tools panel, to design a new form.

(TBD: provide animated gif)

Limitation is on <select> and <option> elements as <select> behaves as a closed container and at the time being Momentum is not able to access it and control it in a visual manner. However, these elements can be added through our web-parser.

(TBD: provide animated gif)

Secure a form with reCaptcha

reCaptcha validation is provided as an integral part of the Momentum. For security measures, form data must always be submitted with the valid reCaptcha token.

To get started, you should register your website domain within reCaptcha admin panel in order to get reCaptha keys.

Next, you should copy Site Key and Secret Key to your project settings.

(TBD: provide animated gif)

Once you've done that you can start integrating reCaptcha on the front-end the way that's most suitable for your project. That said, you can choose to integrate version 2 or version 3 according to developer guides, and they explain how you can generate the valid reCaptcha token on the client-side. When it comes to server-side token verification, you don't have to worry about that as it's provided by Momentum each time the form data is submitted . The only thing you have to do is to pass the valid token together with form data to exposedmomentum.submit(token, form)function, and it will be automatically verified for you.

Submitting the form data

You can submit the form results into any collection. To submit the data you should call an exposed helper function:

momentum.submit(token, form);

The token is a valid reCaptcha token retrieved in any of the ways described in google developers guide.

Form data can be mapped in 2 ways:

directly on form elements
as a custom JSON

In any case, there are 3 special attributes/keys to use for this purpose.

cr-map (mandatory) - Collection name where data will be submitted
cr-loc (optional) - For localized websites
cr-rev (optional) - If set to true data will be submitted for revision. If false data will be live immediately upon a submission.

Mapping the form data directly on form elements

(TBD: provide images)

According to specification each element inside the form should contain name attribute. The value of this attribute should be the name of the field in your collection.

(TBD: provide images)

Mapping the form data as JSON

momentum.submit(token, {
    'cr-map': 'Results',
    name: 'Hello World',
    description: 'Lorem ipsum dolor sit amet',
})

Promise

For more advanced usage, you should know that momentum.submit returns the promise. You are able to additionally handle the results of the form submission when necessary like so:

momentum.submit(token, form)
.then(() => {
    console.log('Success')
})
.catch(() => {
    console.log('Fail')
});


// or ES6 way
async function onSubmit(token) {
    try {
        await momentum.submit(token, form);
        console.log('Success');
    } catch(e) {
        console.log('Fail');
    }
}

Styling 'success' and 'fail' states

Upon a submission the <form> element will have applied additional CSS classes. The class .submitted followed by .success or .error will be added, so you can correctly notify the visitor who submitted the form about results of submission. For example:

// Before
<form class="">

// After
<form class="submitted success">

form.submitted.success {
    background: green;
}
form.submitted.error {
    background: red;
}

Caveats with attribute 'disabled'

Form inputs that have set 'disabled' attribute may behave incorrectly in creator environment under Webkit based browsers. Toolbar will not appear and the element will not enable visual helpers for drag and drop. The reason is that Webkit did not implement the specs for disabled inputs correctly and thus prevent any mouse events in such cases. Firefox implements the specs correctly. Workaround for Webkit is to open devtools, manually remove disabled attribute and then perform your intended operation.

References