arrow-left arrow-right brightness-2 chevron-left chevron-right circle-half-full dots-horizontal facebook-box facebook loader magnify menu-down rss-box star twitter-box twitter white-balance-sunny window-close
Free Lead Generation Forms with Pickle and GitHub (Interactive Tutorial)
3 min read

Free Lead Generation Forms with Pickle and GitHub (Interactive Tutorial)

Power up your forms with Pickle to get email notifications, free data storage, and the ability to share with your team all in this tutorial.
Free Lead Generation Forms with Pickle and GitHub (Interactive Tutorial)

Using Pickle with your forms is dead simple. Point your form action at your Pickle Form and that's it. You'll automatically get email notifications, opportunity/lead creation in the Pickle app, the ability to easily share with your team, and an API for all of your form submissions without having to write a single line of code.

If you've seen this post about sending form data to Pickle to automatically create opportunities or to share with your team, you may be interested in implementing it. There are a few ways. In this post, we'll discuss using your HTML forms without third party form services.

Below is a short 3 step list to get up and running by using any HTML form that sends data to Pickle. This post assumes you're comfortable creating an HTML form as well as editing JSON.

1. Send a request to Pickle to create a form

Once you create a Pickle Form, you'll be able to point your form at it. In order to do this, you'll need a free Pickle account.

After signing up, you'll need to find your API key and your Account ID.

  • To find your API key, click here and scroll down to API access (If you don't have a key, you can refresh/generate a new one)
  • To find your Account ID, visit your settings, click on the account, then in the address bar, copy the number. So if it says, then copy 1337

Finally, place the API key in the "API_TOKEN" const below and do the same for "ACCOUNT_ID" β€” This is the interactive part πŸ€“

const API_TOKEN = 'PUT YOUR API TOKEN HERE'; const ACCOUNT_ID = '1337'; // replace this with your own let payload = { "form": { "name": "My Lead Generating Form", "success_url": "", // where to redirect upon success "fail_url": "", // where to redirect if unable to save form submission "success_email": "[email protected]", // notify via email "meta": { "createOpportunity": true, // creates an opportunity with form data "mappings": { "contact": { // create contact if there are mappings "first_name": "first_name", // if the form has a first_name field, pass it as value to first_name "last_name": "last_name", "email": "email" }, "opportunity": { "name": "Form Submission: $first_name $last_name", // create form with this name "description": "message" // set opportunity description to the message form input's value } } } } }; let options = { body: payload, json: true, headers: { 'x-api-access-token': API_TOKEN } }; let got = require('got'); try { let response = await`${ACCOUNT_ID}`, options); console.log(response.body); } catch (e) { // usually forgot to set your API token if you get here console.log(e); }

Click run on the bottom right corner of the box above. If you get an error, double check that you set the API_TOKEN and ACCOUNT_ID correctly.

2. Create your HTML Form

It's assumed in this post that you are able Β to create an HTML form. You can use this one to help get start. Be sure to change the form action to the form_post_url from the Pickle Form response above.

3. Host your HTML form for free with GitHub Pages

  1. Create a new repository at GitHub
  2. Click the Create a new file button
  3. Name the file "index.html" and paste in the example code above. Be sure to change the form action url to be that from your Pickle Form.
Create the index.html file

Commit/save the file.

Change the repository settings. Click Settings then scroll down to GitHub pages. Change the Source from none to master branch and click save.

Finally: Visit your new form hosted by GitHub at - Check out my example:

Once you have everything set up, you should be able to submit your form, get an email notification, and see your results in Pickle as an opportunity like this:

Let me know if you have any questions or feedback! I'd love to help!

Enjoying these posts? Subscribe for more

Subscribe now
Already have an account? Sign in
You've successfully subscribed to Matt Gardner.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info is updated.