Connecting Carrd to Customized APIs

Carrd is an elegant and concise web page building tool, which is great for making a one-page site. Amazing, it is built by only ONE person – AJ.

We built our AwesomeVisa landing page with Carrd, which only took us 2 hours learning from scratch to publish it.

Recently, we aimed to build a complex website, as we were trying to connect Carrd page to our customized API. During this process, we learnt a lot, and we received huge support from AJ.

Since there is no detailed tutorial of how to connect Carrd page to an customized API, this article is to give a walk through. Also, this article is dedicated to thank AJ for his quick and patient support.

Background

We built a backend service with RESTful APIs, and these APIs are a wrapper to a third party API. Since we don't know how to write JS to build a frontend for this backend, we would like to use some web building tools to fill this gap.

We compared Carrd with Webflow, and we chose Carrd:

1. Carrd is way cheaper than Webflow. Apart the subscription fee, Webflow also limits your form submission counts, which means if you receive more form submissions within a month, you need pay extra fee to Webflow.
2. Carrd is way simpler to use than Webflow. The design interface in Webflow is overwhelming, just like Photoshop. This is too complicated for a non-designer to use. Whereas in Carrd, the interface is concise and easy to use.
3. Since Webflow has so many employees, they has more detailed documentation and more third-party integrations. In these two aspects, Carrd has no way to win. Since we would connect Carrd to our own API, so we don't really care about other third-party integrations.

Therefore, after some experiments, we chose Carrd to build the frontend for our service.

Solution 1

Base on the following documentation, user can use Custom Form in Carrd to connect to a URL, i.e. your own API.

Carrd provides three ways to submit an API request: GET, POST and AJAX. By default, all of them will submit the data in Form Data format.

Initially, we provided the RESTful API as a POST API to accept JSON data. Since our backend is built with FastAPI, we converted the POST API to accept Form Data. Following the documentation of FastAPI, this conversion was easy.

Once the API side is ready, we configured on the Carrd side, and the request could go through. However, we realized, on Carrd, the POST method does not provide further actions whether the request is successful or not. Therefore, after consulting with AJ, we decided to switch to AJAX request.

Solution 2

AJAX request on Carrd provides more functionalities, as it enables actions after receiving the response from the API. By default, AJAX request also sends Form data to the API. A bit strangely, even though the Form data format of AJAX request and POST request is quite similar, but our API could not parse it properly.

We again consulted with AJ, and he suggested us to switch to JSON format. Bingo, the request can be processed with no issue. Since we want to present the response on the website if it's successful, we can configure on the Carrd site.

Carrd has a fixed timeout of receiving the response, and our request processing latency is beyond this timeout, so this is also no go to for us for the time being. However, AJ told us that he might take a look at this issue. Kudos to him.

Takeaways

1. With Carrd, there are unlimited possibilities. With its inituitive design and patient support from AJ, the cost of experiment is much lower comparing to other solutions.
2. If you would try this Custom Form function on Carrd, the easiest way is to use POST request sending Form data to your API.
3. If you would have more actions after receiving the response, you can choose using AJAX request sending JSON data to your API.
4. Building an easy-to-use product can attract more users with no prior experience.
5. Paying attention to custom service can make your users more loyal.
6. Huge thanks to AJ.