A super simple service built on Laravel 5.4 to intercept an Infusionsoft form submission, verify a valid reCAPTCHA, and pass the form data to an Infusionsoft app.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
bootstrap
config
database
public
resources
routes
storage
tests
.env.example
.gitattributes
.gitignore
Procfile
README.md
artisan
composer.json
composer.lock
nginx.conf
package.json
phpunit.xml
server.php
webpack.mix.js
yarn.lock

README.md

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.

  1. Clone this repo.
  2. Open the root directory and run composer install.
  3. Run npm install.
  4. Copy the .env.example to .env. (If you're on a Mac, simply run cp .env.example .env while in the root directory.)
  5. Run php artisan key:generate.
  6. 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 serve to 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

In the .env file, you should see two lines at the bottom:

MIX_RECAPTCHA_PUBLIC=
RECAPTCHA_SECRET=

Note: The reCAPTCHA Public key is prefixed with MIX_. This allows us to access these variables when we compile Javascript. More on that in a bit.

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.

Once you added those keys, you're going to want to regenerate the Javascript files so your own public key is stored. Simply open up your terminal, navigate to the root directory of the project, and run npm run dev. This will regenerate the JS file and insert the key you just placed in the .env file.

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:

data-app="<YOUR_APP_ID_HERE>" Required. You'll need to set you app ID here. You can find it when you login to your app. XXYYY.infusionsoft.com

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.

data-sitekey="<YOUR_SITEKEY_HERE>" 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:

document.getElementsByClassName('infusion-form')[0].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!

Final Notes

This was a quick project I spun up. If you see room for imporovement, I welcome pull requests and improvements. :)