Developer-first, open source Typeform alternative

import { Composer } from "formsmd";
import { FormsmdComponent } from "formsmd-react";

// Create form with ID and submission endpoint
const composer = new Composer({
  id: "onboarding-form",
  postUrl: "/api/onboard",
});
 
// Choice input for position
composer.choiceInput("position", {
  question: "What's your position?",
  choices: ["Product Manager", "Software Engineer", "Founder", "Other"],
  required: true,
});
 
// Text input if user selects "Other" position
composer.textInput("positionOther", {
  question: "Other",
  required: true,
  labelStyle: "classic",
  displayCondition: {
    dependencies: ["position"],
    condition: "position == 'Other'",
  },
});
 
// Start new slide, progress indicator at 50%
composer.slide({
  pageProgress: "50%",
});
 
// Choice input for how user discovered the product
composer.choiceInput("referralSource", {
  question: "How did you hear about us?",
  choices: ["News", "Search Engine", "Social Media", "Recommendation"],
  required: true,
});
 
// Start new slide, show only if user was recommended, progress indicator at 75%
composer.slide({
  jumpCondition: "referralSource == 'Recommendation'",
  pageProgress: "75%",
});
 
// Email input for recommender email address
composer.emailInput("recommender", {
  question: "Who recommended you?",
  description:
    "We may be able to reach out to them and provide a discount for helping us out.",
});

// Initialize with template, container, and options
const formsmd = new Formsmd(
  composer.template,
  document.getElementById("onboarding-form-container"),
  {
    postHeaders: {
      Authorization: `Bearer ${localStorage.getItem("token")}`,
    },
  },
);
formsmd.init();

import { Formsmd } from "formsmd";

// Create template
const template = `
#! id = onboarding-form
#! post-url = /api/onboard

position* = ChoiceInput(
  | question = What's your position?
  | choices = Product Manager, Software Engineer, Founder, Other
)

::: [{$ position $}]
{% if position == "Other" %}
positionOther* = TextInput(
  | question = Other
  | labelStyle = classic
)
{% endif %}
:::

---
|> 50%

referralSource* = ChoiceInput(
  | question = How did you hear about us?
  | choices = News, Search Engine, Social Media, Recommendation
)

---
-> referralSource == "Recommendation"
|> 75%

recommender = EmailInput(
  | question = Who recommended you?
  | description = We may be able to reach out to them and provide a discount for helping us out.
)
`;

// Initialize with template, container, and options
const formsmd = new Formsmd(
  template,
  document.getElementById("onboarding-form-container"),
  {
    postHeaders: {
      Authorization: `Bearer ${localStorage.getItem("token")}`,
    },
  },
);
formsmd.init();

import { Composer } from "formsmd";
import { FormsmdComponent } from "formsmd-react";

// Create form with ID and submission endpoint
const composer = new Composer({
  id: "customer-survey-form",
  postUrl: "/api/customer-survey",
});

// Net Promoter Score®
composer.opinionScale("nps", {
  question:
    "How likely are you to recommend our product to a friend or colleague?",
  required: true,
});

// Start new slide, show only if NPS score is positive, progress indicator at 50%
composer.slide({
  jumpCondition: "nps >= 6",
  pageProgress: "50%",
});

// Email input for product updates
composer.emailInput("email", {
  question: "Would you like to receive product updates?",
  description:
    "If yes, please enter your email address. We only send high-quality updates and newsletters.",
});

// Initialize with template, container, and options
const formsmd = new Formsmd(
  composer.template,
  document.getElementById("customer-survey-form-container"),
  {
    postHeaders: {
      Authorization: `Bearer ${localStorage.getItem("token")}`,
    },
  },
);
formsmd.init();

import { Formsmd } from "formsmd";

// Create template
const template = `
#! id = customer-survey-form
#! post-url = /api/customer-survey

nps* = OpinionScale(
  | question = How likely are you to recommend our product to a friend or colleague?
)

---
-> nps >= 6
|> 50%

email = EmailInput(
  | question = Would you like to receive product updates?
  | description = If yes, please enter your email address. We only send high-quality updates and newsletters.
)
`;

// Initialize with template, container, and options
const formsmd = new Formsmd(
  template,
  document.getElementById("customer-survey-form-container"),
  {
    postHeaders: {
      Authorization: `Bearer ${localStorage.getItem("token")}`,
    },
  },
);
formsmd.init();

import { Composer } from "formsmd";
import { FormsmdComponent } from "formsmd-react";

// Create form with ID and submission endpoint
const composer = new Composer({
  id: "employee-feedback-form",
  postUrl: "/api/employee-feedback",
});
 
// Rating input for satisfaction
composer.ratingInput("rating", {
  question: "How satisfied are you with your current role?",
  required: true,
});
 
// Start new slide, progress indicator at 50%
composer.slide({
  pageProgress: "50%",
});
 
// Multiline text input for feedback
composer.textInput("feedback", {
  question: "Do you have any feedback to help us improve?",
  description: "Share your thoughts on how we can make our company a better place for everyone.",
  multiline: true,
});

// Initialize with template, container, and options
const formsmd = new Formsmd(
  composer.template,
  document.getElementById("employee-feedback-form-container"),
  {
    postHeaders: {
      Authorization: `Bearer ${localStorage.getItem("token")}`,
    },
  },
);
formsmd.init();

import { Formsmd } from "formsmd";

// Create template
const template = `
#! id = employee-feedback-form
#! post-url = /api/employee-feedback

rating* = RatingInput(
  | question = How satisfied are you with your current role?
)

---
|> 50%

feedback = TextInput(
  | question = Do you have any feedback to help us improve?
  | description = Share your thoughts on how we can make our company a better place for everyone.
  | multiline
)

`;

// Initialize with template, container, and options
const formsmd = new Formsmd(
  template,
  document.getElementById("employee-feedback-form-container"),
  {
    postHeaders: {
      Authorization: `Bearer ${localStorage.getItem("token")}`,
    },
  },
);
formsmd.init();

import { Composer } from "formsmd";
import { FormsmdComponent } from "formsmd-react";

// Create form with ID and submission endpoint
const composer = new Composer({
  id: "mailing-list-form",
  postUrl: "/api/mailing-list",
});

// Email input
composer.emailInput("email", {
  question: "Join our mailing list",
  description:
    "Stay informed of every update that matters - we'll deliver the latest news straight to your inbox.",
  required: true,
});

// End slide with custom message and data-binding
composer.endSlide();
composer.h1("Thank you", {
  classNames: ["text-center"],
});
composer.p("Subscribed to mailing list with {$ email $}.", {
  classNames: ["text-center"],
  attrs: [
    {
      name: "style",
      value: "font-size: 18px;",
    },
  ],
});

// Initialize with template, container, and options
const formsmd = new Formsmd(
  composer.template,
  document.getElementById("mailing-list-form-container"),
  {
    postHeaders: {
      Authorization: "Basic <API_KEY>",
    },
  },
);
formsmd.init();

import { Formsmd } from "formsmd";

// Create template
const template = `
#! id = mailing-list-form
#! post-url = /api/mailing-list

email* = EmailInput(
  | question = Join our mailing list
  | description = Stay informed of every update that matters - we'll deliver the latest news straight to your inbox.
)

---
-> end

# [.text-center] Thank you

[.text-center style="font-size: 18px;"]
Subscribed to mailing list with {$ email $}.
`;

// Initialize with template, container, and options
const formsmd = new Formsmd(
  template,
  document.getElementById("mailing-list-form-container"),
  {
    postHeaders: {
      Authorization: "Basic <API_KEY>",
    },
  },
);
formsmd.init();

import { Composer } from "formsmd";
import { FormsmdComponent } from "formsmd-react";

// Create form with ID, form styles, and submission endpoint
const composer = new Composer({
  formStyle: "classic",
  id: "job-post-form",
  pageProgress: "hide",
  placeholders: "hide",
  postUrl: "/api/apply",
  submitButtonText: "Apply",
});

// Text input for full name
composer.textInput("fullName", {
  question: "Full name",
  required: true,
  classNames: ["col-6"],
});

// Email input for email address
composer.emailInput("email", {
  question: "Email",
  required: true,
  classNames: ["col-6"],
});

// File input for CV
composer.fileInput("cv", {
  question: "CV",
  required: true,
});

// Initialize with template, container, and options
const formsmd = new Formsmd(
  composer.template,
  document.getElementById("job-post-form-container"),
  {
    postHeaders: {
      Authorization: "Basic <API_KEY>",
    },
  },
);
formsmd.init();

import { Formsmd } from "formsmd";

// Create template
const template = `
#! form-style = classic
#! id = job-post-form
#! page-progress = hide
#! placeholders = hide
#! post-url = /api/apply
#! submit-button-text = Apply

[.col-6]
fullName* = TextInput(
  | question = Full name
)

[.col-6]
email* = EmailInput(
  | question = Email
)

cv* = FileInput(
  | question = CV
)
`;

// Initialize with template, container, and options
const formsmd = new Formsmd(
  template,
  document.getElementById("job-post-form-container"),
  {
    postHeaders: {
      Authorization: "Basic <API_KEY>",
    },
  },
);
formsmd.init();

import { Composer } from "formsmd";
import { FormsmdComponent } from "formsmd-react";

// Create form with ID, localization, submission endpoint, and border radius
const composer = new Composer({
  id: "ja-customer-survey-form",
  localization: "ja",
  postUrl: "/api/customer-survey",
  rounded: "none",
});

// Net Promoter Score®
composer.opinionScale("nps", {
  question: "当社の製品を友人や同僚に推薦する可能性はどの程度ありますか？",
  required: true,
});

// Initialize with template, container, and options with theming
const formsmd = new Formsmd(
  composer.template,
  document.getElementById("ja-customer-survey-form-container"),
  {
    postHeaders: {
      Authorization: "Basic <API_KEY>",
    },
    themeDark: {
      accent: "#dfdfdf",
    },
    themeLight: {
      accent: "rgb(26, 26, 26)",
    },
  },
);
formsmd.init();

import { Formsmd } from "formsmd";

// Create template
const template = `
#! id = ja-customer-survey-form
#! localization = ja
#! post-url = /api/customer-survey
#! rounded = none

nps* = OpinionScale(
  | question = 当社の製品を友人や同僚に推薦する可能性はどの程度ありますか？
)
`;

// Initialize with template, container, and options with theming
const formsmd = new Formsmd(
  template,
  document.getElementById("ja-customer-survey-form-container"),
  {
    postHeaders: {
      Authorization: "Basic <API_KEY>",
    },
    themeDark: {
      accent: "#dfdfdf",
    },
    themeLight: {
      accent: "rgb(26, 26, 26)",
    },
  },
);
formsmd.init();