Applications 5 steps · 15 fields

Partner or affiliate application

Affiliates describe their audience and channels, agencies their clients. Contact and payout email last.

Launch for free

Get a hosted link and a responses inbox in a minute. No backend, no credit card.

Or set it up yourself

Live preview

Form definition JSON · 172 lines

{  "id": "partner-application",  "title": "Become a partner",  "submit": { "label": "Apply" },  "steps": [    {      "id": "program",      "title": "Partnership type",      "next": false,      "fields": [        {          "key": "partnerType",          "type": "radio",          "label": "How would you work with us?",          "options": [            {              "value": "affiliate",              "label": "Affiliate: I share a link with my audience and earn a commission"            },            {              "value": "agency",              "label": "Agency or consultant: I recommend and set it up for clients"            }          ],          "validation": { "required": true },          "autoAdvance": true        }      ]    },    {      "id": "audience",      "title": "Your audience",      "show": [{ "field": "partnerType", "eq": "affiliate" }],      "fields": [        {          "key": "channels",          "type": "multiselect",          "label": "Where will you promote us?",          "helperText": "Pick all that apply.",          "options": [            { "value": "website", "label": "Blog or website" },            { "value": "youtube", "label": "YouTube" },            { "value": "newsletter", "label": "Newsletter" },            { "value": "social", "label": "Social media" },            { "value": "podcast", "label": "Podcast" },            { "value": "community", "label": "Community or course" },            { "value": "other", "label": "Other" }          ],          "validation": { "required": true }        },        {          "key": "audienceSize",          "type": "radio",          "label": "Total audience across those channels",          "options": [            { "value": "under-1k", "label": "Under 1,000" },            { "value": "1k-10k", "label": "1,000 to 10,000" },            { "value": "10k-50k", "label": "10,000 to 50,000" },            { "value": "50k-250k", "label": "50,000 to 250,000" },            { "value": "250k-plus", "label": "More than 250,000" }          ],          "validation": { "required": true }        },        {          "key": "audience",          "type": "textarea",          "label": "Who is your audience?",          "rows": 2,          "placeholder": "Freelance designers in the US and Europe",          "validation": { "required": true }        }      ]    },    {      "id": "clients",      "title": "Your clients",      "show": [{ "field": "partnerType", "eq": "agency" }],      "fields": [        {          "key": "clientCount",          "type": "radio",          "label": "How many active clients do you have?",          "options": [            { "value": "1-5", "label": "1 to 5" },            { "value": "6-20", "label": "6 to 20" },            { "value": "21-50", "label": "21 to 50" },            { "value": "50-plus", "label": "More than 50" }          ],          "validation": { "required": true }        },        {          "key": "services",          "type": "textarea",          "label": "What services do you offer clients?",          "rows": 2,          "validation": { "required": true }        }      ]    },    {      "id": "plan",      "title": "Your plan",      "fields": [        {          "key": "profile",          "type": "text",          "label": "Main website or profile",          "placeholder": "https://",          "validation": { "required": true }        },        {          "key": "promotion",          "type": "textarea",          "label": "How do you plan to promote or use the product?",          "rows": 3,          "validation": { "required": true }        },        {          "key": "usesProduct",          "type": "radio",          "label": "Do you use the product yourself?",          "layout": "inline",          "options": [            { "value": "yes", "label": "Yes" },            { "value": "trial", "label": "Trying it" },            { "value": "no", "label": "Not yet" }          ],          "validation": { "required": true }        }      ]    },    {      "id": "contact",      "title": "Your details",      "fields": [        {          "key": "name",          "type": "text",          "label": "Full name",          "validation": { "required": true }        },        {          "key": "email",          "type": "email",          "label": "Email",          "inputMode": "email",          "validation": { "required": true }        },        { "key": "company", "type": "text", "label": "Company" },        {          "key": "country",          "type": "text",          "label": "Country",          "helperText": "We need it for tax forms before the first payout.",          "validation": { "required": true }        },        {          "key": "payoutEmail",          "type": "email",          "label": "PayPal email for payouts, if different",          "inputMode": "email"        },        {          "key": "terms",          "type": "checkbox",          "label": "I accept the partner terms, including no paid ads on our brand name",          "validation": { "required": true }        }      ]    }  ]}

Use it with the npm packages

Copy the JSON into a file in your app, install the renderer and pass the definition to it. The same JSON works with @formhaus/vue.

npm i @formhaus/core @formhaus/react

tsx

import { FormRenderer } from '@formhaus/react';
import '@formhaus/core/style.css';
import definition from './form.json';

export function Form() {
  return (
    <FormRenderer
      definition={definition}
      onSubmit={(values) => console.log(values)}
    />
  );
}

See Getting started for validation, steps and custom components.

Partner or affiliate application

Use it with the npm packages ​

Use it with the npm packages