{"__v":1,"_id":"57fd0701eaa77f19008b8204","category":{"__v":0,"_id":"57e104db9ff1e21900a721ab","project":"571f5e8cd8667f0e00a3c498","version":"571f5e8cd8667f0e00a3c49b","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-09-20T09:43:55.998Z","from_sync":false,"order":4,"slug":"form-api-jquery-plugin","title":"Form-API"},"parentDoc":null,"project":"571f5e8cd8667f0e00a3c498","user":"571f5e46d8e3cf1900762b33","version":{"__v":12,"_id":"571f5e8cd8667f0e00a3c49b","hasDoc":true,"hasReference":true,"project":"571f5e8cd8667f0e00a3c498","createdAt":"2016-04-26T12:26:52.312Z","releaseDate":"2016-04-26T12:26:52.312Z","categories":["571f5e8cd8667f0e00a3c49c","571f73cfcb4baa0e00d13a80","571f7451cb4baa0e00d13a88","571f7d2720695f3400f38797","571f7fb0ac2a080e0014c661","571f884be54f2d0e003ebb0a","572200c9ecb38d0e00d80ebd","572c301e7c8eff0e00aaa174","57df91b2c6348d0e0020c452","57e104db9ff1e21900a721ab","57fd04caeaa77f19008b8202","5899c7113514ce0f0014da84"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-10-11T15:36:33.994Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"For the sample forms we are using the [Bootstrap Framework](http://getbootstrap.com).\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Download\",\n  \"body\": \"**You can download all of our examples in a [ZIP-file](https://www.fundraisingbox.com/form-api-beispiele/fundraisingbox-formapi-examples.zip).** \"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Simple single step form\"\n}\n[/block]\nThis form is rendered completely dynamically base on the settings of your form. It contains some useful pattern like loading overlay, processing indicator, toggle the address depending on the receipt wish and toggle the recurring payment methods.\nYou can see the form live here: [https://www.fundraisingbox.com/form-api-beispiele/single-step-simple.html](https://www.fundraisingbox.com/form-api-beispiele/single-step-simple.html).\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/2f97980-FundraisingBox-FormAPI-single-step-form.png\",\n        \"FundraisingBox-FormAPI-single-step-form.png\",\n        1187,\n        1407,\n        \"#e2e2df\"\n      ],\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Designed multi step form\"\n}\n[/block]\nThis is a multi step form with a lot of gimmicks like an amount silder, project selection with images, payment icons, validation indicators and so on. This example is a combination of manual programmed HTML and dynamic Javascript manipulation. The fourth step is an overview page for the user.\nYou can see the form live here: [https://www.fundraisingbox.com/form-api-beispiele/multi-step-1.html](https://www.fundraisingbox.com/form-api-beispiele/multi-step-1.html).\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/1ce9358-FundraisingBox-FormAPI-mulit-step-form.png\",\n        \"FundraisingBox-FormAPI-mulit-step-form.png\",\n        1195,\n        1305,\n        \"#f2f0e7\"\n      ],\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"FundraisingBox form\"\n}\n[/block]\nOur FundraisingBox Bootstrap Form template with the Form-API as first aid to change from the iFrame-version. It's just a rough version, you have to adjust it for your needs.\nYou can see the form live here: [https://www.fundraisingbox.com/form-api-beispiele/fundraisingbox-form.html](https://www.fundraisingbox.com/form-api-beispiele/fundraisingbox-form.html).\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/f7443ef-FundraisingBox-FormAPI-fundraisingbox-form.png\",\n        \"FundraisingBox-FormAPI-fundraisingbox-form.png\",\n        1859,\n        1523,\n        \"#eeeeed\"\n      ],\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"form-api-sample-forms","type":"basic","title":"Sample forms"}
For the sample forms we are using the [Bootstrap Framework](http://getbootstrap.com). [block:callout] { "type": "info", "title": "Download", "body": "**You can download all of our examples in a [ZIP-file](https://www.fundraisingbox.com/form-api-beispiele/fundraisingbox-formapi-examples.zip).** " } [/block] [block:api-header] { "type": "basic", "title": "Simple single step form" } [/block] This form is rendered completely dynamically base on the settings of your form. It contains some useful pattern like loading overlay, processing indicator, toggle the address depending on the receipt wish and toggle the recurring payment methods. You can see the form live here: [https://www.fundraisingbox.com/form-api-beispiele/single-step-simple.html](https://www.fundraisingbox.com/form-api-beispiele/single-step-simple.html). [block:image] { "images": [ { "image": [ "https://files.readme.io/2f97980-FundraisingBox-FormAPI-single-step-form.png", "FundraisingBox-FormAPI-single-step-form.png", 1187, 1407, "#e2e2df" ], "sizing": "full" } ] } [/block] [block:api-header] { "type": "basic", "title": "Designed multi step form" } [/block] This is a multi step form with a lot of gimmicks like an amount silder, project selection with images, payment icons, validation indicators and so on. This example is a combination of manual programmed HTML and dynamic Javascript manipulation. The fourth step is an overview page for the user. You can see the form live here: [https://www.fundraisingbox.com/form-api-beispiele/multi-step-1.html](https://www.fundraisingbox.com/form-api-beispiele/multi-step-1.html). [block:image] { "images": [ { "image": [ "https://files.readme.io/1ce9358-FundraisingBox-FormAPI-mulit-step-form.png", "FundraisingBox-FormAPI-mulit-step-form.png", 1195, 1305, "#f2f0e7" ], "sizing": "full" } ] } [/block] [block:api-header] { "type": "basic", "title": "FundraisingBox form" } [/block] Our FundraisingBox Bootstrap Form template with the Form-API as first aid to change from the iFrame-version. It's just a rough version, you have to adjust it for your needs. You can see the form live here: [https://www.fundraisingbox.com/form-api-beispiele/fundraisingbox-form.html](https://www.fundraisingbox.com/form-api-beispiele/fundraisingbox-form.html). [block:image] { "images": [ { "image": [ "https://files.readme.io/f7443ef-FundraisingBox-FormAPI-fundraisingbox-form.png", "FundraisingBox-FormAPI-fundraisingbox-form.png", 1859, 1523, "#eeeeed" ], "sizing": "full" } ] } [/block]