Connect any HTML form directly to a collection

If you're asking for visitor's information on your site, you're almost certainly doing it with a form.

This integration lets you connect any HTML form directly to Attio. Whenever someone submits their contact details, they get sent straight to your workspace.

The sort of information you can collect with a form can vary a lot so to make things simple we'll be collecting the basics: first name, last name, email, and company website.

To connect the form we'll be using Attio's Zapier integration. If you want to replicate this integration, check out this pre-made template.

1. Setting up a webhook

Zaps (individual workflows set up in Zapier) need to be 'triggered' so Zapier knows when to start the flow. There are lots of triggers available but for our HTML form we'll be using a webhook.

By using a webhook we can generate a URL that triggers your zap any time some data is sent to it, and passes that data on to the next Zap steps.

This is perfect for a form because all you need to do is tell your form to POST to your webhook URL and your form data will be available in your zap.

To generate your webhook URL you first need to select Zapier's 'Webhook' trigger.

If you don't see the 'Webhook' option on the right, you can search for it on the left.

Once selected you'll be prompted to 'Choose an event'. For this we'll need 'Catch Hook', telling Zapier to set up a URL that will sit and wait until some data is sent to it.

Zapier will then give your a long URL to copy, this is your webhook URL.

2. Connecting your form and webhook

Now you have your webhook URL, it's time to set up your form so it can send data to it.

The two key components are your form's action and method attributes.

The action attribute must be set to your webhook URL, and the method must be set to POST. This tells your form to send (rather than request) data from the webhook URL.

Once set up, you need to send some mock data to Zapier. Simply fill out the fields in your form and hit submit.

Go back to your zap and click Test Trigger to tell Zapier to search for any recent submissions to your webhook.

After a few seconds Zapier should return something similar to this:

Each of the form's inputs will create a separate variable, named after the input's name attribute.

A note on required fields

To make sure that your zap doesn't break, it's important that any of your form's fields that you intend on using in the zap are required. This'll make sure that no blank values are sent to your webhook.

3. Creating a person in Attio

Now we have our form connected to our webhook and some mock data in Zapier, it's time to add connect it to Attio.

First, add another step to your zap by clicking the '+' button below the Catch Hook trigger.

Find the Attio app and select Find or Create Person.

You may be prompted to connect an Attio account. If you're unsure how, follow our guide on connecting Attio to Zapier.

You'll then be shown three fields for first name, last name, and email address(es).

By referring back to the output from the webhook step, you can select which fields from your form should be used.

Once filled in, the step should resemble something similar to this:

At a minimum, either an email address or first name are required to create a person in Attio.

Continue and test the step to confirm that everything is working.

4. Creating a company in Attio

We've got our person created in Attio but they aren't connected to any companies yet.

Attio excels at showing connections between your data so the more points you provide the more useful you'll find it!

To create a company follow the same steps as above, but this time with the Find or Create a Company action.

Even though we've only provided a domain here, Attio will intelligently enrich the company's profile. Data points like social media handles, logos, and locations can all be automatically added.

5. Connecting the company and person

Finally, we need to connect the company and person profiles.

Create another step in your zap and select Attio's Link Person and Company action.

For this step, we'll need to refer back to steps 2 and 3 to dynamically set the Company Record ID and Person Record ID. This makes sure that every time your zap runs, it automatically uses the ID of the records it just created.

For Company Record ID we'll refer back to the ID variable from step 3. Note the 3. beside the variable name, showing it came from our third step.

Then do the same with step 2's Person Record ID.

And that's it! Once you've tested the final step all you need to do is turn your zap on.

Now every time someone submits your form their contact details will be automatically added to Attio.

A note on dates

The Link Person and Company action contains a few extra fields that we didn't use this time around, two of which are dates.

You could put a static date like 2021-06-21 in the fields but that would mean that every time the zap ran the same date would be used.

Most of the time you'll want a dynamic date.

Zapier has lots of time variables but the most common, the time when the zap ran, is denoted by: {{zap_meta_utc_iso}}.