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.
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.
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 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
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'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:
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.
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
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: