<- Zapier





Send Additional Fields Data using Zapier

Use Zapier to send your login form data, including the additional fields data, to Google Sheets.

Make sure you have followed the HTML, React, or Webflow Tutorial to integrate Cotter's Login form to your website.



Zapier Setup

Cotter doesn't store your additional field data, so you can't use Cotter's Zapier. But you can still send the data using Zapier, for example to Google Sheets.



You'll need to use Zapier Webhook to receive the data.



Zapier Webhook + Google Sheets Zap Example

1. Create a Zapier Webhook





Copy the custom webhook URL, we're going to send the response from Cotter to this URL.





2. Send Cotter's response to the Zapier URL:



var cotter = new Cotter({
      ApiKeyID: "API_KEY_ID",  // 👈 Specify your API KEY ID here
      AdditionalFields: [      // 👈 Add your additional fields here
        {
          label: "Full Name",
          name: "name",
          placeholder: "Enter your full name"
        },
        {
          label: "Address",
          name: "address",
          placeholder: "Enter your address"
        }
      ]
    });
    cotter
      .signInWithLink()
      .showEmailForm()
      .then((response) => {
        sendToZapier(response); // 👈 send to Zapier
      })
      .catch((err) => console.log(err));
  }, []);

// SEND TO ZAPIER
  const sendToZapier = async (payload) => {
    const zapierURL = "ZAPIER_WEBHOOK_URL"; // 👈 specify the URL here
    try {
      const response = await fetch(zapierURL, {
        method: "POST",
        mode: "cors",
        body: JSON.stringify(payload)
      });
      const resp = await response.json();
      console.log(resp);
    } catch (e) {
      console.log(e);
    }
  };





Send the response from Cotter to Zapier using a POST HTTP request, using fetch or similar functions.



  • Zapier has a strict CORS policy, follow the code above using fetch, mode: "cors" and no content-type header.

Try this Codesandbox with the code above.



3. Test Zapier Webhook

After adding the code above, try logging in while filling in all the additional fields. Once successful, press "Test Trigger" in Zapier.





You should see something like this:





You'll get the user's email and the additional fields data.



Google Sheets Zap

To send the data to Google sheets, add a Google sheets zap.



1. Select "Lookup Spreadsheet Row" for the Action Event

We want to look for an existing row for the user, and only add a new row if an existing one doesn't exist.





2. Choose your account and spreadsheet

Create a Google Sheets with these headers on your own Google Account. Then choose that spreadsheet in the Zap.





3. Select which column to check if the user already exists

  • Lookup Columns: ID

  • Lookup Value: User ID

  • Supporting Lookup Column and Supporting Lookup Value: empty

  • Bottom-up: True





4. Checkmark "Create Row if it doesn't exist yet", and fill out the fields like the following:



This way, it will either grab the existing user row by checking if the user ID is already in the spreadsheet, or it will create a new row if such a user doesn't exist.



5. Press "Continue" > "Test and Review"

You should see something like this:



You should also see the row added to your Google Sheets:





That's it! 🎉

Turn on Zap and you'll start receiving user data in your Google Sheets.



Made in Typedream