A Specific Code to Submit the Form

Hi, I am trying to create a form with a Referral Code, but it only accepts a specific code and does not let you submit the form unless the input matches the code.

How can I do it? Please, help me out.

Thank you in advance.

If it’s a fixed code like refer2024 you could just define that as the pattern on your referral code input and form validation will prevent submission. However that would be one code for everyone, and it’s visible in the HTML of the page if anyone looks.

If you have a changing range of codes you’ll need to get more creative.

For smaller sites, I usually use Make .com with Airtable, and SA5’s forms handler. That submits the form request to Make, which checks the code against Airtable and returns an error if the code is unknown. If the code is known, it accepts the submission and usually stores the form results and referer credit in Airtable.

You need the SA5 piece, or custom code, to handle the client-side end and the success/error response.

Yes, we have a fixed code. Can I do it by using Logic in webflow?

I’m not sure what you’re trying to achieve with logic.
If it’s a fixed code, try just adding the pattern as a custom attribute on your input, e,g.

pattern = refer2024

Then the user must enter the correct value to submit the form.

It WORKED!!!

Thank you SO much, Michael. I really appreciate your help.

Just one last thing, is there a way to edit the error of custom attributes?

Thanks again, Michael.

1 Like

I think you might mean the message the browser shows when the field fails validation? Most browsers will augment that message if you have a title attribute, so you could add something like;

title = Please enter a valid referer code

Yeah, I was talking about the error message. You attribute you told worked. The web browser is showing two error messages now :D But, its fine :slight_smile:

image

Thank you SO much, Michael.

1 Like

We ran into this issue as well when working on a client project and created a solution for validating text inputs, whether there are multiple viable options or one single correct answer.

If you check out the tutorial video you’ll get walked through the issue as well as implementing the solution from start to finish.

Please feel free to tag me if you have any questions!

Happy Thursday!