[Invisible mode] The green texts below are only required for the invisible mode of mosparo. If you want to use the visible mode, you can ignore these parts.
1. Setup mosparo
To use the mosparo API client or the mosparo Integration assets, you need your own mosparo installation. You can read more about installing mosparo in our documentation: https://documentation.mosparo.io/docs/category/installation
2. Create project
In your mosparo installation, create a project. To do this, click the "Create project" button on the dashboard and follow the wizard.
3. Add modules
4. Add the block to your form
Place the mosparo block in your form. We recommend placing the mosparo protection at the end of the form, right above the submit button.
Please specify the "MosparoHost", "MosparoUuid", and "MosparoPublicKey" arguments with the values from your project. Set these values in a client variable so you can manage them in one place.
If you want to use the mosparo object in JavaScript later, you can add an event handler to catch the mosparo instance.
[Invisible mode] If you use the invisible mode, you have to add an event handler and catch the mosparo instance in a variable since the instance is required when processing the form.
5. [Invisible mode] Place the submit button
[Invisible mode] If you want to use invisible mode, please ensure that the submit button is placed within the form and is defined as the default button for the form.
6. Create submit client action
After the user submits the form, we need to collect and prepare the data in our frontend save action. Create an event handler for the submit button and open it.
7. [Invisible mode] Validate the form
After checking if the form is valid, place the "ValidateInvisibleMosparo" client action. This action triggers the validation of the form, which the user will do by clicking the mosparo checkbox in the visual mode.
Specify the mosparo instance which we received in the "OnRendered" event handler in step 4 as the "Instance" argument of the client action.
If the result of the action is "False", mosparo detected spam, and you should abort the submit process. Otherwise, continue with step 8.
8. Prepare mosparo request data
After checking if the form is valid ([Invisible mode] or after the "ValidateInvisibleMosparo" client action), place the "PrepareMosparoData" client action from this module.
Set the ID of the form as the "FormId" argument.
9. Verify the request
The "PrepareMosparoData" client action generates a "MosparoRequest" object, which you can use to verify the submission with the server action "VerifySubmission" of the mosparo API client module. In a server action, place the "VerifySubmission" server action as the first step and choose the request from the frontend for the argument "Request". Fill in the "MosparoHost", "MosparoPublicKey", and "MosparoPrivateKey" arguments with the values from your project in mosparo. We recommend using site properties to specify these values.
The action returns a "MosparoVerificationResponse" object.
10. Check the result
After the "VerifySubmission" action, add an If block to decide what to do next.
If the "Submittable" property of the result is set to "True", the submission is valid, and we can proceed with processing the data. If the result is "False", then we need to abort the submission, as something is incorrect.
11. Verify all required form fields
To prevent the user from bypassing the mosparo protection, we need to verify that all fields were verified correctly. For this, we place the "ConfirmFieldValidation" server action on the "True" path of the If block.
Set the response from the "VerifySubmission" action as the "VerificationResponse" argument. Specify a string of comma-separated values with the names of your fields that need to be verified.
If you do not use this action, an attacker could bypass the verification and send you spam. You can read more here: https://documentation.mosparo.io/docs/integration/bypass_protection
The server action returns "True" if everything is good or "False" if a field was not verified correctly.
12. Verify the result
Now, the final If block determines whether we can process the data or not. Place the If after the "ConfirmFieldValidation" server action and check if the result of the server action is "True". If so, you can process the data as you wish (for example, send it by email or store it in the database). If the result is "False", abort the process and display an error message to the user.
13. Reset the form
After the server action was executed, you need to reset the form in our client action. You can do that by simply reloading the screen.
If mosparo detected an issue with the verification, you need to reset the mosparo box, but keep the form values so the user can adjust them. To do this, you can use a JavaScript block and the previously stored mosparo instance (Step 4).
14. Test your form
Please test your form now. mosparo should verify the submission and display the verified submission in your project in mosparo.