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 the runner JavaScript function
import { run } from "@tripetto/runner-autoscroll";
// Start the runner
run({
definition:
/* Supply your form definition here */,
onSubmit: (form) => {
/* Do something with the collected data */
}
});
// Import the runner component
import { AutoscrollRunner } from "@tripetto/runner-autoscroll";
// Drop the runner component in your React app
<AutoscrollRunner
definition={
/* Supply your form definition here */
}
onSubmit={(form) => {
/* 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(form) {
/* Do something with the collected data */
}
}
<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(form) {
/* Do something with the collected data */
}
});
</script>
</body>
</html>
<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(form) {
/* Do something with the collected data */
}
});
</script>
</body>
</html>
Building Forms | Build and edit 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. |
Hosting Setup | Self-host collected responses exclusively on your end for the forms you manage in the studio and run in your website or application. |
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 form builder, runners and blocks is not supported 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 the builder JavaScript function
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
};
// Import the builder React component
import { TripettoBuilder } from "@tripetto/builder/react";
// 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://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 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>
// Import the runner JavaScript function
import { run } from "@tripetto/runner-autoscroll";
// Start the runner
run({
definition:
/* Supply your form definition here */,
onSubmit: (form) => {
/* Do something with the collected data */
}
});
// Import the runner component
import { AutoscrollRunner } from "@tripetto/runner-autoscroll";
// Drop the runner component in your React app
<AutoscrollRunner
definition={
/* Supply your form definition here */
}
onSubmit={(form) => {
/* 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(form) {
/* Do something with the collected data */
}
}
<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(form) {
/* Do something with the collected data */
}
});
</script>
</body>
</html>
<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(form) {
/* 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. |
Hosting Setup | Build and run forms entirely inside your website or application, and exclusively self-host collected responses on your end. All without any dependencies on third-party infrastructure. |
Available Blocks | Build and run forms with the available stock blocks only. Customization of these question blocks and the development of your own original blocks is only supported in the custom setup. |
Customizations | Customizing the form builder, runners and blocks is not supported 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. |
Hosting Setup | Build and run forms entirely inside your website or application, and exclusively self-host collected responses on your end. All without any dependencies on third-party infrastructure. |
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, with the appropriate license, in place to customize and develop blocks. |
Customizations | Customizing and developing question blocks is supported in this setup. Customizing the form builder and runners is not. |
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!
Customizing runner UI/UX may require an additional license.
You’re in good company. The FormBuilder SDK’s components are used and trusted by Fortune 500 companies around the globe.