Skip to main content
Answered

apply a custom theme to my Typeform using Zapier.

  • 27 May 2024
  • 8 replies
  • 44 views

Hi Typeform Community,

I’m trying to create and apply a custom theme to my Typeform using Zapier. The goal is to set the background to white and use red for the primary color (buttons and other accents). Here’s what I’ve done so far:

  1. Set up my Zap with the following steps:

    • Step 1: Trigger when a meeting transcript is ready in Tactiq.
    • Step 2: Generate quiz questions using ChatGPT.
    • Step 3: Run JavaScript to process the questions.
    • Step 4: Send an API request to create the Typeform.
    • Step 5: Make a custom request in Webhooks by Zapier to create the theme.

  2. API Request to Create a Theme:

    • Method: POST
    • URL: https://api.typeform.com/themes
    • Headers:
      • Authorization: Bearer my_api_key
      • Content-Type: application/json
    • Data: 
       
      json

      Copy code

      { "name": "Brand Theme", "colors": { "question": "#FF0000", "answer": "#000000", "button": { "background": "#FF0000", "text": "#FFFFFF" }, "background": "#FFFFFF" } }

However, I keep getting the following error message: "Failed to create a request in Webhooks by Zapier: unmarshal payload (HTTP Status Code: 400)".

I've ensured that the JSON payload is correctly formatted without any comments. Here’s the exact setup I have in Zapier for the Webhooks by Zapier step:

  • Method: POST
  • URL: https://api.typeform.com/themes
  • Headers:
    • Authorization: Bearer my_api_key
    • Content-Type: application/json
  • Data: 
     
    json

    Copy code

    { "name": "Brand Theme", "colors": { "question": "#FF0000", "answer": "#000000", "button": { "background": "#FF0000", "text": "#FFFFFF" }, "background": "#FFFFFF" } }

Can anyone help me understand why this isn’t working and how to resolve the error? Any guidance would be greatly appreciated!

Thank you!

8 replies

picsoung
Rank
Userlevel 7
Badge +5

Hey @Rafa1610 

If you try calling the API directly through Postman you will see details of the error. I am surprised Zapier doesn’t support more details for debugging.

This the response you get from the API

 

{
    "code": "VALIDATION_ERROR",
    "description": "The payload is invalid.",
    "details": [
        {
            "code": "INVALID_PAYLOAD",
            "description": "missing properties: 'font'",
            "field": "/required"
        },
        {
            "code": "INVALID_PAYLOAD",
            "description": "doesn't validate with '/definitions/color'",
            "field": "/properties/colors/properties/button/$ref"
        },
        {
            "code": "INVALID_PAYLOAD",
            "description": "expected string, but got object",
            "field": "/properties/colors/properties/button/$ref/type"
        }
    ]
}

 

font should be a reference to a supported Google Font.

there is not button.text or button.background property everything has to be first level in the colors object

Correct payload:

{
    "name": "Brand Theme",
    "font": "Aboreto",
    "colors": {
        "question": "#FF0000",
        "answer": "#000000",
        "button":"#FF99FF",
        "background": "#FFFFFF"
    }
}

But I am curious: why must you create a new theme every time?
you can reuse existing theme.

R
Badge +1

Hi @picsoung  thanks your reply.

I am just working with Claude to help me build it and it recommended to create a new theme…

CAn I incorporate it directly in STEP 4 or do I must have a new step as STEP 5, after step 4?

{
    "name": "Brand Theme",
    "font": "Aboreto",
    "colors": {
        "question": "#FF0000",
        "answer": "#000000",
        "button":"#FF99FF",
        "background": "#FFFFFF"
    }
}

 

picsoung
Rank
Userlevel 7
Badge +5

It looks like Claude hallucinated 🤣 No need to create 100x of the same theme.

My suggestion would be to create a theme for the UI. Find its id and apply it to he form by passing it when creating the form
Add the following to the payload

"theme":{
  "href":"https://api.typeform.com/themes/THEME_ID"
}


 

R
Badge +1

Man you are amazing! That’s the problem when u are not a coder, you have no way to verify.

So just to double check. Step 4, sending the quiz question and structure to TYPEFORM worked well, I used this in the API Request TYpeform body in Zapier:

{ "title": "Quiz from Transcript", "variables": { "score": 0 }, "fields": 3. Typeform Fields: [{"type":"short…quired":true}}] }

In order to add the design theme,  where should I add this :

"theme":{ "href":"https://api.typeform.com/themes/THEME_ID" }

in a step before Step 4 or after? + where can I see the THeme ID?

Thanks a lot!!!!

picsoung
Rank
Userlevel 7
Badge +5

it should be added to the JSON payload before you call the API to create the form.

To get a theme id:

In typeform ui, create form, apply the theme of your choice to it.
Publish the form.
open in your browser api.typeform.com/forms/{form_id}
and you should see a JSON describing the structure of the form, and the section theme just copy the URL from there.

R
Badge +1

https://admin.typeform.com/form/a9HA7yVS/create?block=01HYZ4RKFKVR9RPJE9E9FFMHAX

 

 

This is the URL I got after publishing it, where can I find the theme ID? Sorry for the ignorance, just really first time handling this kind of developers issues:)

picsoung
Rank
Userlevel 7
Badge +5

Your form URL is https://form.typeform.com/to/a9HA7yVS
Your form Id is a9HA7yVS

Access the form definition by calling https://api.typeform.com/forms/a9HA7yVS



The theme for this form is https://api.typeform.com/themes/dBADdiNW
if you open this link in the browser you will see the details regarding colors, fonts, .. for this theme.

voila :D

R
Badge +1

Succeeded! Thx, a lot!

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs