How to integrate your HTML form to Trello
When someone fills out your contact form, you will likely have a list of things to do with that new information. If you don’t want to create those tasks manually in your project management app every single time, then you definitely need this Getform-Trello integration!
After having your HTML form and form backend ready with Getform, this integration will automatically create a new card in your Trello board as soon as new contact form submission is received. It’s time to get a jump on your projects without the struggle of the manual set-up.
Before we get into the details of how to set up Getform-Trello integration, let’s give a brief introduction to one of the most popular project management tools out there!
Trello is a kanban-style list-making collaboration application for organizing and prioritizing workflows. As a project management tool, Trello allows you to capture different cards and organize them into lists and boards. Trello app continues to be one of the best tools to use as a productivity system for businesses.
How to Create Trello Cards for New Contact Form Submissions
Prerequisite: You need to have at least one form created and one form submission received to your form on Getform. If you haven’t received your first submission yet, check out the “Collecting form submissions” section on our docs or watch our helper video here to get started.
- Sign in to your Getform account here: https://getform.io/login
- Click the “+” button to create a new form that we will integrate into your specific Trello board. Let’s name the form as “Sales Leads”.
- With that form created, your unique form endpoint is now ready to be inserted into your HTML form. Let’s add our form and start getting our first submissions. Here is how your HTML form should look like at this point:
<form action=”https://getform.io/f/{your-form-endpoint-goes-here}" method=”POST” accept-charset=”UTF-8">
<input type=”text” name=”name” placeholder=”Your Name *” required=”required”>
<input type=”email” name=”email” placeholder=”Your Email *” required=”required”>
<input type=”text” name=”phone” placeholder=”Your Phone Number”>
<input type=”text” name=”message” placeholder=”Your Message *” required=”required”>
<button type=”submit”>Send Message</button>
</form>and with a little bit of styling here is how our Contact Form looks like this:
You can find the sample code of this form here: https://codepen.io/getform/pen/QWKNGMq
4. After we send our form submission, here is how the Getform form data looks like:
5. It’s time to go to Trello and create a new board and list within that specific board to bring your form submission data together in the right place. Let’s give the name “Sales Pipeline” to our new Trello board and “Leads” to the new list as we will be using Getform and Trello to automate our sales lead collection.
(You can skip this step if you want to receive your form submissions to one of your created Trello boards.)
Now, our form backend is ready to integrate with our Trello board!
6. On your Getform dashboard, navigate to the “Integrations” tab and click “Connect with Zapier” to start setting up our Getform-Trello Zap.
7. Search for Trello on the opening screen and then click to “Try it” button for “Create Trello Cards for Getform Submissions” zap. In order to connect your Getform account to your zap, just paste the API Key you copied from the “Integrations” tab and click “Yes, Continue” button. Then we will select our form’s name to connect with our Trello board as follows:
8. After you finish setting up the Trigger step, you just need to click the “Continue” button in the Action stage since Zapier already selected the action app and event for you. Then sign in to your Trello account to connect it with your zap.
9. We are so close to finalizing our integration! Let’s set up action by selecting our specific Trello board and list. Then you can add your form submission info to your Trello card in the desired way as follows:
You can customize your card’s labels and position, add members to the specific cards and even create checklists from contact form submission info on the same page! It’s time to click the “Continue” button to finish setting up our Zap.
10. Now our Zap is ready to test. Let’s click to the “Test&Continue” button and check our “Sales Leads” list on our “Sales Pipeline” Trello board.
That’s it! Our form submissions have been connected and sent to our Trello board successfully.
You can also check out Zapier’s and our documentation for more details.
For code samples, you can check our Codepen and Codesandbox pages.
If you have any further queries, reach us out at info@getform.io.
