Quick start

Introduction

HumanInput is designed to make it easy to gather data from a human. It makes it easy to build dynamic forms with dynamic destinations.

You define the forms via JSON. HumanInput is completely stateless and does not store your form. This also allows you to create dynamic forms on the fly.

Design a form

Use the Editor to design and preview the form. See example forms here.

Use the form

Copy the json from the editor. You can then make any changes in your code, and then encode it as base64.

You will always want to ensure you have at least one submit button in your form that will send the data to a destination.

const encoded = Buffer.from(JSON.stringify(raw, null, 2)).toString("base64url")

The final url should be `https://humaninput.app/input/<encoded>

Example url:

https://humaninput.app/input/ewogICJ2ZXJzaW9uIjogMSwKICAidGl0bGUiOiAiRnVsbCBmb3JtIGV4YW1wbGUiLAogICJkZXNjcmlwdGlvbiI6ICJUaGlzIGlzIHRoZSBmb3JtIGRlc2NyaXB0aW9uIiwKICAicHJvcGVydGllcyI6IFsKICAgIHsKICAgICAgImlkIjogImRlc2NyaXB0aW9uIiwKICAgICAgInR5cGUiOiAicGFyYWdyYXBoIiwKICAgICAgInZhbHVlIjogIlRoaXMgaXMgYSBiYXNpYyBkZW1vIG9mIEh1bWFuSW5wdXQuIFlvdSBjYW4gdXNlIGZvcm1zIGxpa2UgdGhpcyB0byBjb2xsZWN0IGlucHV0IGZyb20gaHVtYW5zIHdpdGhpbiBhbiBhdXRvbWF0ZWQgd29ya2Zsb3cuIgogICAgfSwKICAgIHsKICAgICAgImlkIjogIm5hbWUiLAogICAgICAibGFiZWwiOiAiTmFtZSIsCiAgICAgICJyZXF1aXJlZCI6IHRydWUsCiAgICAgICJ0eXBlIjogInN0cmluZyIKICAgIH0sCiAgICB7CiAgICAgICJpZCI6ICJhZ2UiLAogICAgICAibGFiZWwiOiAiQWdlIiwKICAgICAgImRlc2NyaXB0aW9uIjogIk1heGltdW0gYWdlIGFsbG93ZWQiLAogICAgICAidHlwZSI6ICJudW1iZXIiCiAgICB9LAogICAgewogICAgICAiaWQiOiAiY29uZmlybSIsCiAgICAgICJsYWJlbCI6ICJDb25maXJtIiwKICAgICAgImRlc2NyaXB0aW9uIjogIkkgdmVyaWZpZWQgdGhlIGRhdGEgaXQgY29ycmVjdCIsCiAgICAgICJ0eXBlIjogImJvb2xlYW4iLAogICAgICAiZGVmYXVsdCI6IHRydWUKICAgIH0sCiAgICB7CiAgICAgICJpZCI6ICJjYW5jZWwiLAogICAgICAibGFiZWwiOiAiQ2FuY2VsIiwKICAgICAgInR5cGUiOiAiYnV0dG9uIiwKICAgICAgInVybCI6ICJodHRwczovL2VvNHoyZHlwMGQ1bXlqNS5tLnBpcGVkcmVhbS5uZXQ_YnV0dG9uPWNhbmNlbCIsCiAgICAgICJ2YWxpZGF0ZSI6IGZhbHNlCiAgICB9LAogICAgewogICAgICAiaWQiOiAic3VibWl0IiwKICAgICAgImxhYmVsIjogIlN1Ym1pdCIsCiAgICAgICJ0eXBlIjogImJ1dHRvbiIsCiAgICAgICJ1cmwiOiAiaHR0cHM6Ly9lbzR6MmR5cDBkNW15ajUubS5waXBlZHJlYW0ubmV0P2J1dHRvbj1zdWJtaXQiLAogICAgICAidmFsaWRhdGUiOiB0cnVlCiAgICB9CiAgXQp9

If you need the form to contain dynamic data and/or submission urls, you can edit the json in your code.

Examples

Using in Pipedream

This is an example Pipedream step that generates and sends the form.

export default defineComponent({
	async run({ $, steps }) {
		const { resume_url, cancel_url } = $.flow.suspend();

		const raw = {
			"version": 1,
			"title": "Joke rating",
			"description": "Rate the joke generated by ChatGPT",
			"properties": [
				{
					"id": "joke",
					"type": "paragraph",
					"value": steps.chat.$return_value.generated_message.content
				},
				{
					"id": "score",
					"label": "Score",
					"type": "number"
				},
				{
					"id": "cancel",
					"label": "Cancel",
					"type": "button",
					"url": {
						"url": cancel_url,
						"method": "GET"
					},
					"validate": false
				},
				{
					"id": "submit",
					"label": "Submit",
					"type": "button",
					"url": resume_url,
					"validate": true
				}
			]
		}



		const encoded = Buffer.from(JSON.stringify(raw, null, 2)).toString("base64url")

		$.send.email({
			subject: "Please verifiy this joke.",
			text: `https://human-input.vercel.app/input/${encoded}`,
		});
	},
});
        

This is the full Pipedream workflow that uses ChatGPT to generate a joke. It then emails you the form that contains the joke and an input for a rating.

If you press cancel, it canceles the workflow. If you submit, it saves the joke and rating in a Google Sheet.

More examples coming soon

If you have use cases you'd like to share, please share it using the Contact form.