Guides
/
Forms

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.

The trigger configuration window in Zapier - the Webhook option is shown on the bottom right.
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 choose Catch Hook from the dropdown, telling Zapier to set up a URL that sits tight and waits until some data is sent over.

A dropdown in Zapier for choosing what will trigger the whole automation. The highlighted option reads Catch Hook.
Zapier will 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 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:

Custom HTML code is shown, with the action and method components correctly configured.

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

An HTML form with each of its fields filled out with mock data. Zapier requires at least one submission in order to test the connection between two apps.
Complete and submit your form using mock data

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.

The dropdown for choosing an Attio action in Zapier is shown, with the Find or Create Person option highlighted. This determines what will happen in Attio once the Zap is triggered.
Choose the Find or Create Person option from the Action Event dropdown

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:

The name and email fields are all completed in this example Zap, with data pulled in from prior steps. This tells Zapier what data to send to Attio.
Map your fields using prior steps, telling Zapier what to send to Attio

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.

A completed action step in Zapier, where a new company is created using the company's website domain. In this example, a mock website has been pulled in from step 1 of the Zap.
Attio only requires a domain to find or create a company record

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.

An action step is being configured in this screenshot, with values pulled from step 3 of this Zap being used to link a person and a company record in Attio.
Map your fields using data pulled from prior steps

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

This image shows values being pulled in from step 2 of the Zap, using the person record ID. This will tell Attio to connect the company to the person.
Locate and select the Person Record ID from step 2 to complete this action step

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.

Couldn't find something?

Send us a message in the chat on the right ✌️

© 2022 Attio Ltd. All rights reserved.