Formulate

Gallery
HelpPricingBlogDocsGalleryBuild
Back to Gallery
Next:
Employee Engagement Survey

Customer Contact Form

Support
Sales & Marketing

Provide an easy way for your customers to contact you, either with a message or a structured Q&A.

The customer chooses whether they want to provide context in a freeform or structured way. The decision tree for the structured approach can be arbitrarily deep, allowing you to capture as much context as possible upfront.

Build
Build on this example by creating an editable copy of this form.
export default async function () {
  let {value: route} = await form.multi("Hello! Thanks for visiting our website.", [
    {label: "Write us a message", value: "message"}, 
    {label: "Answer a few questions", value: "questions"}
  ], {
    description: "Would you prefer to answer a few questions or write us a message?",
    single: true,
    banner: {
      full: true,
      unsplash: "landscape,nature"
    },
  });

  if (route === 'message') {
    await form.long("Sounds good! Please enter your message below.");
  }

  if (route === 'questions') {
    let {value: reason} = await form.multi('Perfect! Pick a reason you want to contact us.', [
      {label: "I need help", value: "help"},
      {label: "I'd like a refund", value: "refund"},
      {label: "Can I switch to a different plan?", value: "switch-plan"},
      {label: "Something else", value: "other"},
    ], {
      single: true
    });

    if (reason === 'refund') {
      await form.statement("You can request a refund at any point. Enter your email on the next page, and someone will be in touch shortly.");
    }
    if (reason === 'switch-plan') {
      await form.statement("Enter your email on the next page, and someone will be in touch shortly.", {
        description: 'Note that plan changes can take up to 5 days to take effect'
      });
    }
    if (['other', 'help'].includes(reason)) {
      await form.long("We're here to help! Please describe your problem below.");
    }
  }

  await form.short("Finally, please tell us your email address.", {
    description: "You should hear back from us within 24 hours",
    email: true,
  })
}