Connect any HTML form to Attio 

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

To keep 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 (automations in Zapier) need to be 'triggered' so Zapier knows when to start the process. 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 anytime some data is sent to it.

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 choose Catch Hook from the dropdown, telling Zapier to set up a URL that sits tight and waits until some data is sent over.

2. Connecting your form and webhook

Now you have your webhook URL, it's time to set up your form so you can send data to it. This part will require you to write a bit of custom code.

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. It should look something like this:

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

Note: Make sure you set all important fields in your form to required. Making these fields mandatory ensures that no blank values are sent to your webhook.

Now go back to your Zap and click Test Trigger to tell Zapier to search for any recent submissions to your webhook.

3. Creating a person in Attio

Now we'll connect our HTML form to Attio.

Add another step to your Zap by clicking the + button below the Catch Hook trigger. If you can't see it, you might need to close the Ready to publish your Zap? dialogue box.

Find the Attio app and select Find or Create Person.

You'll next be shown three fields for First name, Last name, and Email address(es).

By referring back to the output from step 1, you can select which fields from your form should be used. If you get stuck, check our guide to mapping fields in Zapier.

Once filled in, it should look something like this:

Continue to test the step and confirm everything is working as it should.

4. Creating a company in Attio

We've created a person in Attio but they aren't connected to a company yet.

To create a company, repeat step 3 of this guide, but this time pick the Find or Create a Company action from the Action Event dropdown.

5. Connecting the company and person

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

Create another step in your Zap with + and select Attio's Link Person and Company action.

We'll need to refer back to steps 2 and 3 in the Zap in order to set the Company Record ID and Person Record ID.

For Company Record ID we'll use the ID value from step 3. Note the 3. beside its name, telling us it came from our third step.

Then, complete the Person Record ID field using the Person Record ID value from step 2 in the Zap in much the same way.

With these fields successfully mapped from prior steps in our Zap, we've told Zapier exactly what data we'd like to send to Attio each time the Zap runs, and we've linked everything together in Attio too.

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, they'll automatically be added to your Attio workspace as a record.