name | description |
---|---|
Forms |
Toggled Forms |
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).
To get started, fork this template: https://github.com/toggledtech/Forms.
Here are the basic steps to setup Toggled Forms.
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"]
}
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.
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>
Navigate to https://toggled.tech/create/form/, select a GitHub repository and press create.
Once you have deployed it, you will automatically be given a URL that you can use permanently.
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>