Infusionsoft reCAPTCHA Proxy
This is a super simple service built on top of Laravel 5.4 to accept a dataset and a reCAPTCHA token from an Infusionsoft form, verify the reCAPTCHA token was valid, and pass the data to an Infusionsoft app.
For more info about this, I have a blog post about why this is needed.
Setting this up
When putting this together, I had the intention to host it on Heroku, so you should be able to push this right up to Heroku and run it with no issue.
- Clone this repo.
- Open the root directory and run
- Copy the
.env. (If you're on a Mac, simply run
cp .env.example .envwhile in the root directory.)
php artisan key:generate.
- If you're using a setup such as Laravel Homestead, you'll want to set up that up. If not, you can run
php artisan serveto run a standalone local server. It will provide you with the address to visit to view the app.
When you navigate to the address given, you should see the usual Laravel default homepage. If you see "Uh oh, something went wrong!", just make sure you did steps 4 and 5 correctly.
Setting up reCAPTCHA
.env file, you should see two lines at the bottom:
Note: The reCAPTCHA Public key is prefixed with
These are your public and private API keys for Google reCAPTCHA. To generate your own, go to Google's reCAPTCHA page and create a pair. You're going to want to select Invisible reCAPTCHA. Add the domains you'll be hosting this on, check the box to accept the terms, and click Register.
Place the "Site Key" on the
MIX_RECAPTCHA_PUBLIC line, and the "Secret Key" on the
RECAPTCHA_SECRET line. No need to do any of the other steps that Google provides.
npm run dev. This will regenerate the JS file and insert the key you just placed in the
Testing it all out
If you'd like to test this for yourself, open up the
resources/views/demo.blade.php file and scroll down to where the form html resides. You're going to want to replace this with your own form HTML from your own Infusionsoft app.
After you add in your own form HTML, you should see a
<script ... tag below your form. Make sure you replace
data-app with your own Infusionsoft app ID, and remove the
action="XXXXXXXXXXXXXXX" from your form HTML (so bots can't see the real path to your form).
⚠️Please ensure that your form has
class="infusion-form"set on the opening
<form>tag. This is how the script will identify your form. By default, the form HTML provided by your app includes this, but without this set, the script will not work.
Your app ID is the string in the URL before
.infusionsoft.com when you’re logged into your app. Mine is two letter and three numbers, and I’m sure they all follow a similar pattern.
Options for this script:
Required. You'll need to set you app ID here. You can find it when you login to your app.
data-validate="<true or false>"
Optional. Add form validation so you can't submit empty fields. If you already have your own validation set up, you may want to disable this so they don't interfere.
Optional. If you're hosting this all on your own server, you'll want to put your public key here, otherwise it will default to my key and will not work.
data-inlinestyles="<true or false>"
Optional. Set to true if you want form errors to have inline styles. Set to false if you plan to add your own CSS. We'll still add classes to the errors.
Now to test this, head over to the demo page. To access the demo page, when you have your local server running (with
php artisan serve or through your own Homestead/Vagrant setup) go to
/demo in your browser. You should see your form. You should also see a reCAPTCHA badge at the bottom right of the page. Go ahead and fill out your form and click the submit button. You'll either be prompted by reCAPTCHA, or if Google "trusts" you, they'll let you go without any prompts.
Want to test this to make sure the server-side validation is working?
Try to bypass the reCAPTCHA
Want to make sure the server is blocking all failed reCAPTCHA attempts? Fill out your form, but do not click Submit. Open up your Developer Tools and go to the console tab. Run this script to force the form to submit:
You should see a big red "There was a problem with the reCAPTCHA. Please try again." If so, success! Your service is running correctly. Now try filling out the form and clicking Submit. After passing the CAPTCHA, you should be redirected to your forms thank you page. You're ready!
This was a quick project I spun up. If you see room for imporovement, I welcome pull requests and improvements. :)