Fields Reset on Captcha Fail

[benlilley]

First, thanks for building this out, it's saved me a bunch of time.

I am running into a strange issue though which I'm not sure if it's expected or not. When I submit the form (all fields populated) but intentionally don't complete the captcha the page appears to be reloaded and then shows the captcha error but all form fields are now empty. As you can imagine this would definitely be annoying for someone!

My form looks like this:

{{ form:contact_us }}

    <div class="grid grid-cols-6 gap-6">
        {{ fields }}
            {{ if first || count == 2 }}
                <div class="col-span-6 sm:col-span-3">
                    <label for="contact-{{ handle }}" class="block text-sm font-medium text-gray-700">{{ display }}</label>
                    <input value="{{ old:{{ handle }} }}" type="text" name="{{ handle }}" id="contact-{{ handle }}" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                    {{ if error }}
                        <p class="mt-2 text-sm text-red-300">{{ error }}</p>
                    {{ /if }}
                </div>
            {{ elseif handle == 'comment' }}
                <div class="col-span-6 ">
                    <label for="contact-{{ handle }}" class="block text-sm font-medium text-gray-700">{{ display }}</label>
                    <div class="mt-1">
                        <textarea value="{{ old:{{ handle }} }}" name="{{ handle }}" id="contact-{{ handle }}" rows="3" class="block w-full mt-1 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Message..."></textarea>
                        {{ if error }}
                            <p class="mt-2 text-sm text-red-300">{{ error }}</p>
                        {{ /if }}
                    </div>
                    <p class="mt-2 text-gray-500">
                        Let us know how we can help.
                    </p>
                </div>
            {{ else }}
                <div class="col-span-6 sm:col-span-6">
                    <label for="contact-{{ handle }}" class="block text-sm font-medium text-gray-700">{{ display }}</label>
                    <input value="{{ old:{{ handle }} }}" type="text" name="{{ handle }}" id="contact-{{ handle }}" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                    {{ if error }}
                        <p class="mt-2 text-sm text-red-300">{{ error }}</p>
                    {{ /if }}
                </div>
            {{ /if }}
        {{ /fields }}

        <div class="col-span-6 sm:col-span-6">
            {{ captcha }}
            {{ if error:captcha }}
                <p class="mt-2 text-sm text-red-300">{{ error:captcha }}</p>
            {{ /if }}
        </div>
    </div>

    <button class="button" type="submit">Submit</button>

    {{ if success }}
        <div class="p-2 my-8 text-white bg-green-500 rounded-md shadow-sm">
            <h5 class="text-white ">Thank you for getting in touch!</h5>
            <p>We appreciate you contacting us. One of our staff will be in touch with you soon! Have a great day!</p>
        </div>
    {{ /if }}

{{ /form:contact_us }}

Any help is appreciated, I'm running the latest version of Statamic and Statamic Captcha on PHP 7.3.

[aryehraber]

Hi @benlilley! I don't think the issue you're describing is caused by Captcha, but instead a mistake in the template.

I don't think this syntax is correct:

<input value="{{ old:{{ handle }} }}" ...>

If you're looping over fields using the {{ fields }} tag, then you should be able to access the old data using {{ old }}, as described in the docs: https://statamic.dev/tags/form-create#dynamic-rendering

Hope that helps!

[benlilley]

You were completely correct, thank you for the heads up and apologies for wasting your time!