Connect Qödiak Forms to REST APIs – Quick Step‑by‑Step

Connecting Qödiak forms to REST APIs opens a world of automation, letting you push submissions straight into CRMs, send data to custom back‑ends, or trigger workflows in Zapier without writing a single line of server code. In this hands‑on tutorial you’ll see exactly how to bind a form component to an external API, handle responses with sandboxed JavaScript, and verify everything works before you publish.

Why Integrate Forms with REST APIs?

REST (Representational State Transfer) APIs are the lingua franca of modern web services. By connecting a Qödiak form to a REST endpoint you can:

Eliminate manual data entry – submissions go directly to your database, ticketing system, or marketing platform.
Enrich user experience – fetch live data (e.g., product prices, availability) while the user fills out the form.
Trigger real‑time actions – send a Slack notification, create a HubSpot contact, or start an approval workflow instantly.

"A single form can become a powerful integration hub when you pair Qödiak’s data source feature with a few lines of sandboxed JavaScript."

Prerequisites

What You Need Before You Start

A Qödiak account (Free tier works for the basics).
Access to a REST API you want to call – for the demo we’ll use the public jsonplaceholder.typicode.com/posts endpoint.
Basic understanding of HTTP methods (GET, POST) and JSON payloads.
Optional: API key or token if the endpoint requires authentication.

If you haven’t explored Qödiak yet, check out the Forms feature overview to see how the visual page builder works.

Step 1 – Build a Simple Form in Qödiak

1.1 Create a New App

From the Qödiak dashboard click New App, give it a name such as API‑Connected Form, and choose any industry theme you like. The AI will generate a multi‑page skeleton; you can delete extra pages and keep a single Contact page.

1.2 Add Form Components

Drag a Input component for Name.
Drag a Email component for Email Address.
Drag a TextArea component for Message.
Finish with a Button labeled Submit.

Give each field a clear fieldId – e.g., name, email, message. These IDs are used later when constructing the API payload.

1.3 Enable Form Submission Storage (Optional)

Even though you’ll send data to an external API, keeping a copy in Qödiak’s built‑in inbox is handy for audits. Toggle the Save submissions switch in the form settings.

Step 2 – Add an External API Data Source

2.1 Open the Data Sources Panel

In the left‑hand toolbar click Data Sources → Add New. Choose REST API as the source type.

2.2 Configure the Endpoint

Base URL: https://jsonplaceholder.typicode.com
Path: /posts
Method: POST
Headers: Add Content-Type: application/json. If your API needs an Authorization header, add it here as Bearer YOUR_TOKEN.

Save the data source with a memorable name, e.g., PostSubmissionAPI.

2.3 Test the Connection

Click Test Request. Qödiak will send a sample payload (you can edit it) and display the response. A successful 201 Created response means the connection is ready.

Step 3 – Bind the Form to the API Using JavaScript Scripting

3.1 Open the Form’s Script Editor

Select the Submit button and enable Advanced – JavaScript. Qödiak provides a sandboxed setField()/getField() API you can call when the button is pressed.

3.2 Write the Submission Script

async function onSubmit() {
  // Gather form values
  const payload = {
    name: getField('name'),
    email: getField('email'),
    body: getField('message')
  };
// Call the REST API data source
const response = await qodApi.call('PostSubmissionAPI', payload);
if (response.status === 201) {
showMessage('Success! Your message has been sent.', 'success');
resetForm();
} else {
showMessage('Oops, something went wrong. Please try again.', 'error');
}
}
onSubmit();

Explanation:

getField() pulls the user‑entered values.
qodApi.call() (a placeholder for the real call – Qödiak automatically maps the data source name) sends the JSON payload.
Based on the HTTP status we show a success or error toast.

3.3 Attach the Script to the Button

In the button’s Action dropdown select Run Custom JavaScript and paste the script above. Save the page.

Step 4 – Advanced Scenarios

4.1 Dynamic GET Requests Before Submission

Sometimes you need to fetch reference data (e.g., a list of valid product IDs) before the user submits. Create a second data source with method GET and call it on page load:

async function loadProducts() {
  const res = await qodApi.call('ProductListAPI');
  if (res.status === 200) {
    // Populate a dropdown component
    const options = res.data.map(p => ({ label: p.name, value: p.id }));
    setField('productId', options);
  }
}
loadProducts();

Bind the returned options to a Dropdown component’s choices property.

4.2 Handling Authentication Tokens

If the API uses OAuth2, store the token in a session variable:

setSession('apiToken', 'eyJhbGciOi...');

Then include it in the header of subsequent calls:

await qodApi.call('SecureAPI', payload, {
  Authorization: `Bearer ${getSession('apiToken')}`
});

4.3 Using Webhooks for Real‑Time Notifications

Qödiak also supports webhooks. After a successful API call you can fire a webhook to Slack or Zapier:

await qodApi.call('PostSubmissionAPI', payload);
await qodApi.call('ZapierWebhook', { submissionId: response.data.id });

Both data sources are defined in the Data Sources panel – the second one points to the Zapier webhook URL.

Step 5 – Test, Debug, and Publish

5.1 Preview Mode

Click Preview in the top bar. Fill out the form and watch the toast messages. Open the browser console (F12) to see any JavaScript errors printed by Qödiak’s sandbox.

5.2 Use the Built‑In Submission Inbox

Navigate to Data → Submissions to confirm the record was stored locally. Compare the payload with the response you received from the external API.

5.3 Deploy to a Custom Domain

When everything works, go to Publish → Custom Domain (available on the Pro plan) to attach your own URL. Remember to update the sitemap for SEO – Qödiak generates sitemap.xml automatically.

Conclusion – Turn Forms Into Live Integrations

By leveraging Qödiak’s External API Data Sources, JavaScript scripting, and Webhooks, you can connect any form to a REST API in just a few clicks. The same pattern works for creating tickets, updating inventory, or syncing leads, making your no‑code apps as powerful as custom‑coded solutions.

Start with a simple POST request, then layer in GET calls, authentication, and webhook notifications to build a fully automated workflow without leaving the Qödiak editor.

Ready to try it yourself? Build your first API‑connected form today and share your experience in the Qödiak community forum.