What you need from the SDK’s extensive toolset depends on how far you want to take things in your website or app. You won’t always need everything.
Tripetto’s stock runners are for deploying forms in websites and applications. They run forms with stock blocks from our free, online Tripetto studio. So, if you don’t need the builder inside your website or app, this hybrid solution is your best and fastest fit.
import { run } from "@tripetto/runner-autoscroll";
// Start the runner
run({
definition:
/* Supply your form definition here */,
onSubmit: (instance) => {
/* Do something with the collected data */
}
});
// Drop the runner component in your React app
<AutoscrollRunner
definition={
/* Supply your form definition here */
}
onSubmit={(instance) => {
/* Do something with the collected data */
}}
/>
@Component({
selector: "app-root",
template: `
<tripetto-runner-autoscroll
[definition]="definition"
(onSubmit)="onSubmit($event)">
</tripetto-runner-autoscroll>
`
})
export class AppComponent {
definition =
/* Supply your form definition here */;
onSubmit(instance) {
/* Do something with the collected data */
}
}
<html>
<body>
<script src="https://unpkg.com/@tripetto/runner"></script>
<script src="https://unpkg.com/@tripetto/runner-autoscroll"></script>
<script>
// Start the runner
TripettoAutoscroll.run({
definition: /* Supply your form definition here */,
onSubmit: function(instance) {
/* Do something with the collected data */
}
});
</script>
</body>
</html>
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/@tripetto/runner"></script>
<script src="https://cdn.jsdelivr.net/npm/@tripetto/runner-autoscroll"></script>
<script>
// Start the runner
TripettoAutoscroll.run({
definition: /* Supply your form definition here */,
onSubmit: function(instance) {
/* Do something with the collected data */
}
});
</script>
</body>
</html>
Building Forms | Build forms in the free online studio at tripetto.app. No need to implement the builder into your website or application. |
Running Forms | Implement any of the stock runners into your website or application to run forms created in the studio. Implementing the runners is a matter of minutes and is possible using plain JS, React, Angular and HTML5. |
Available Blocks | Build and run forms with stock blocks only. It’s not possible to customize blocks or develop your own blocks, because of the use of the studio and implementation of stock runners. |
Customizations | Customizing the builder, runners and blocks is not possible in this setup. |
All components in the FormBuilder SDK can be neatly integrated fully into websites and applications. So, if you need to be fully independent of any Tripetto infrastructure and want to have total control, then implementing both the builder and runner is the way to go.
import { Builder } from "@tripetto/builder";
// Start the builder
const builder = Builder.open();
// Listen for the save event
builder.onSave = (definition) => {
// Save the form definition somewhere
};
// Drop the builder component in your React app
<TripettoBuilder onSave={(definition) => {
// Save the form definition somewhere
}} />
@Component({
selector: "app-root",
template: `
<tripetto-builder
(onSave)="formSaved($event)">
</tripetto-builder>
`
})
export class AppComponent {
// Invoked when the form is saved
formSaved(definition) {
// Save the form definition somewhere
}
}
<html>
<body>
<script src="https://unpkg.com/@tripetto/builder"></script>
<script>
// Start the builder
var builder = Tripetto.Builder.open();
// Listen for the save event
builder.onSave = function(definition) {
// Save the form definition somewhere
};
</script>
</body>
</html>
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/@tripetto/builder"></script>
<script>
// Start the builder
var builder = Tripetto.Builder.open();
// Listen for the save event
builder.onSave = function(definition) {
// Save the form definition somewhere
};
</script>
</body>
</html>
<html>
<body>
<script type="module">
import { Builder } from
"https://cdn.skypack.dev/@tripetto/builder";
// Start the builder
const builder = Builder.open();
// Listen for the save event
builder.onSave = (definition) => {
// Save the form definition somewhere
};
</script>
</body>
</html>
import { run } from "@tripetto/runner-autoscroll";
// Start the runner
run({
definition:
/* Supply your form definition here */,
onSubmit: (instance) => {
/* Do something with the collected data */
}
});
// Drop the runner component in your React app
<AutoscrollRunner
definition={
/* Supply your form definition here */
}
onSubmit={(instance) => {
/* Do something with the collected data */
}}
/>
@Component({
selector: "app-root",
template: `
<tripetto-runner-autoscroll
[definition]="definition"
(onSubmit)="onSubmit($event)">
</tripetto-runner-autoscroll>
`
})
export class AppComponent {
definition =
/* Supply your form definition here */;
onSubmit(instance) {
/* Do something with the collected data */
}
}
<html>
<body>
<script src="https://unpkg.com/@tripetto/runner"></script>
<script src="https://unpkg.com/@tripetto/runner-autoscroll"></script>
<script>
// Start the runner
TripettoAutoscroll.run({
definition: /* Supply your form definition here */,
onSubmit: function(instance) {
/* Do something with the collected data */
}
});
</script>
</body>
</html>
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/@tripetto/runner"></script>
<script src="https://cdn.jsdelivr.net/npm/@tripetto/runner-autoscroll"></script>
<script>
// Start the runner
TripettoAutoscroll.run({
definition: /* Supply your form definition here */,
onSubmit: function(instance) {
/* Do something with the collected data */
}
});
</script>
</body>
</html>
Building Forms | Implement the builder into your website or application to create forms. Implementing the builder is usually a matter of minutes and is possible using plain JS, React, Angular and HTML5. |
Running Forms | Implement any of the stock runners into your website or application to run forms created in builder. Implementing the runners is a matter of minutes and is possible using plain JS, React, Angular and HTML5. |
Available Blocks | Build and run forms with stock blocks, customize these blocks, or develop your own original blocks. Because of the implementation of both the builder and stock runners inside your project, it’s possible to customize and develop blocks. |
Customizations | Customizing and developing blocks is possible in this setup. |
With both the builder and runner implemented you can start to customize our question blocks, or enhance an application with your own to unlock API's and other amazing things. So, if you really need to bend or extend things, the custom setup is ideal for you.
import { tripetto, NodeBlock } from "@tripetto/builder";
import icon from "./icon.svg";
@tripetto({
type: "node",
identifier: "text-input",
label: "Text input",
icon
})
class TextInputBuilderBlock extends NodeBlock {
// Block implementation for builder here
}
import { tripetto, NodeBlock }
from "@tripetto/runner";
import { namespace, IAutoscrollRendering }
from "@tripetto/runner-autoscroll";
@tripetto({
type: "node",
namespace,
identifier: "text-input",
})
class TextInputRunnerBlock extends NodeBlock
implements IAutoscrollRendering {
// Render the text input block UI
render() {}
}
Building Forms | Implement the builder into your website or application to create forms. Implementing the builder is usually a matter of minutes and is possible using plain JS, React, Angular and HTML5. |
Running Forms | Implement any of the stock runners into your website or application to run forms created in builder. Implementing the runners is a matter of minutes and is possible using plain JS, React, Angular and HTML5. |
Available Blocks | Build and run forms with stock blocks, customize these blocks, or develop your own original blocks. Because of the implementation of both the builder and stock runners inside your project, it’s possible to customize and develop blocks. |
Customizations | Customizing and developing blocks is possible in this setup. |
The form runner smartly handles UI, complex logic and response collection during form execution. Its engine is headless and just begging for A-Team devs to wield its powers with custom UI and UX layers. There's a learning curve. But hey, no pain no gain!
You’re in good company. The FormBuilder SDK’s components are used and trusted by Fortune 500 companies around the globe.