Getting Started

Toggled Forms is an innovative new way to design the front-end for forms and then have your backend handle the requests easily.

Toggled Forms use the same principles as Toggled wesbites and documentation (MarkdownX).

Template

To get started, fork this template: https://github.com/toggledtech/Forms.

Setup

Here are the basic steps to setup Toggled Forms.

toggled-form.json

There are four things you must define in this.

• Schema
• Webhook
• Form (The file which your form is located in)
• Members (Required to verify your identity)

{
  "schema": "https://toggled.tech/schema.json",
  "webhook": "YOUR_WEBHOOK_URL",
  "form": "YOUR_MDX_FILE",
  "members": ["YOUR_USERNAME"] 
}

Setting up a webhook

In NodeJS, you can use Express.js to setup a webhook like this:

app.post('/form-webhook', (req, res) => {
  //Do what you want with the data
  console.log(req.body)
})

If you do not have a server, setup a request bin.

Designing the form

Here is a basic form template.

---
name: {Form Title}
description: {Form Description}
---

<!-- Each question (input) will be displayed separately. Only one question will be on the page at a time. -->

<Question data-type="string" data-placeholder="Enter a string" data-required="true" data-label="Enter a String" id="1"></Question>

<Question data-type="number" data-placeholder="Enter a number" data-required="true" data-label="Enter a Number" id="2"></Question>

<Question data-type="email" data-placeholder="Enter your email" data-required="true" data-label="Enter your Email" id="3"></Question>

<onSubmit display="✅ This Message Displays When a Form is Submitted"></onSubmit>

Deployment

Navigate to https://toggled.tech/create/form/, select a GitHub repository and press create.

Using your form

Once you have deployed it, you will automatically be given a URL that you can use permanently.

Embed

To embed a form, use the Toggled web SDK.

<script src="//toggled.tech/static/toggled.js"></script>

<div id="my-form"></div>

<script>
forms.init({
  container: '#my-form', //The query selector for your parent element
  form: 'YOUR_FORM_NAME' //{yourGitHubUsername}-{yourGithubProject} or the name that displays after site in the URL. /site/**toggledtech-Forms**/
})
</script>