forms - Static Website, File Upload and recaptcha

Question

I am just thinking what the best approach is to implement a simple form with file upload on a static website without any backend.

Scenario:

I have static website (NuxtJS) where a form can be filled and files can be uploaded. To protect this form I wanted to use recaptcha by Google but as I read a little further in their documentation it seems that I need a backend which is a overkill for a static website. Furthermore I wanted to support file upload... quite complicated without a backend.

What I thought of:

Maybe an existing product which does exactly what I am looking for? Or should I build a AWS Lambda Pipeline (of course with an S3 Bucket) to function as my "backend" for recaptcha and file upload. Is there any approach which makes this scenario simpler, or am I thinking to complicated at the moment.

Use Case / Flow Chart:

1. Users enters Website.
2. Fills out form.
3. (optional) uploads files
4. Checks recaptcha
5. Clicks Send - Sends "Message" in our companies slack channel / or email.

Answer 1

ReCaptcha is used for protecting your form and keeping your website secured from bots and spams.
ReCaptcha uses 2 keys, i.e ReCaptcha Site Key & ReCaptcha Secret Key.
Site Key is integrated with your Form in Front End. While Secret Key is stored in your Backend System.

You have Form which is accepting Name, Email & uploaded files.
There are either 2 possibilities for storing/collecting data,
1) Storing Data in Database(Backend)
2) Collecting Data through Email, SMS or any transmitting medium.

If you are accepting data in some database(backend) and file storage, you already have backend available with you. So you can integrate ReCaptcha in your form.

However, if you are collecting data through Email or SMS, you can integrate One Time Password(OTP) for submitting the form.

Lets Check the both scenario,

1. ReCaptcha
   Your form will have Name, phone, file upload and a hidden reCaptcha field. ReCaptcha field will contain your site Key.
   When User will submit form having datas after validating reCaptcha, form data will sent to your backend. Then Recaptcha will Verify Data coming through form and using Secret Key against the Site Key, it will check, if form is found to be tampered in between, ReCaptcha will reject your data. If Verification succeed, you will be get your data. If failed, reCaptcha will deny the request.
   Therefore, only legitimate data will come to your server(Backend).
   

2. OTP Validation
   If you are not using Backend, and collecting data through SMS or Email, then you can integrate email OTP or SMS OTP to validate the form. Therefore, only legitimate data will come to you through forms.

As you are using NextJs, you are most probably using Node(Backend). Try Learning some basics of Backend, then you will easily integrate FrontEnd and BackEnd.