How to embed your form in your WordPress site
When your form structure is ready, you can embed your form on any position inside your WordPress site using the shortcode we provide.
About shortcodes
Shortcodes are a commonly used technique in WordPress to add snippets to your WordPress page. More information about shortcodes can be found at the website of WordPress.
Get the Tripetto shortcode
At the top menu bar of the form builder click Share
. The Share pane will show up on the right side of the form builder.
Over there you see the second method WordPress shortcode
and you will see the basic syntax of the shortcode for WordPress sites.

Basic shortcode
The basic syntax is: [tripetto id="#"]
, with the id
parameter representing the id (integer) of the Tripetto form.
Customize the shortcode
Inside the Share screen you can customize the shortcode to determine the implementation of the form in your WP site. You can just toggle the desired settings and the shortcode will update automatically.
Available settings
The following settings are available:
Allow pausing and resuming
Setting if the form can be paused and resumed.- Parameter in shortcode:
pausable
(optional) - Default value:
no
- Possible values:
yes
|no
- Parameter in shortcode:
Save and restore uncompleted forms
Setting for persisting data if users enter the form later on again.- Parameter in shortcode:
persistent
(optional) - Default value:
no
- Possible values:
yes
|no
- Parameter in shortcode:
Display form as full page overlay
Setting to show the form as a full page overlay.- Parameter in shortcode:
mode
(optional) - Default value:
inline
- Possible values:
inline
|page
- Parameter in shortcode:
Specify a fixed width
Setting to set the width of form container.- Parameter in shortcode:
mode
(optional) - Default value:
100%
- Possible values:
percentage value
+%
|pixel value
+px
- Parameter in shortcode:
Specify a fixed height
Setting to set the height of form container.- Parameter in shortcode:
height
(optional) - Default value:
auto
- Possible values:
auto
|percentage value
+%
|pixel value
+px
- Parameter in shortcode:
Display loading message
Option to show a loading message to the form.- Parameter in shortcode:
message
(optional) - Default value:
-
- Value:
your loading message
- Parameter in shortcode:
Disable asynchronous loading
Option to disable asynchronous loading of your form to enhance the form loading time (please be aware that caching plugins may have effect on your Tripetto forms if you use this option).- Parameter in shortcode:
async
(optional) - Default value:
-
- Possible values:
no
- Parameter in shortcode:
Specify custom CSS styles
Option to add custom CSS (see instructions below).- Parameter in shortcode:
css
(optional) - Default value:
-
- Value:
your custom css string
- Parameter in shortcode:

Copy shortcode
When you're done customizing the shortcode, you can copy the shortcode to your clipboard to use it in your WP site.
Use the shortcode
Now that you've got your shortcode, navigate to the position inside your WP Admin where you want to embed the Tripetto form. In that position add a shortcode block: Click the icon Click
Shortcode
. A shortcode block will be inserted. In that block you can now paste the shortcode of the Tripetto form. You can now save the draft and test it.

Custom CSS
It's possible to add custom CSS to parts of your embedded form. Please first have a look at the built-in advanced styling options to see if that's sufficient for your styling purposes.
Disclaimer for using custom CSS
The usage of custom CSS is totally at own risk. We don't offer support on the usage of custom CSS or forms that include custom CSS.
Custom CSS can only manipulate CSS inside (question) blocks of your form, using the css
parameter inside your shortcode. You can address a certain block by using the data-block
selector and referring to the desired block name. You can then add the custom CSS for that block as a string value.
We advise to always use the shortcode editor to add your custom CSS. For example, if you want to manipulate the color of the title of the text input blocks (referred to by tripetto-block-text
), add this to the custom CSS option in the shortcode editor:
[data-block='tripetto-block-text'] { h2 { color: blue; } }
Data control in the WordPress plugin
Both the form and collected data are hosted and stored in your own WordPress instance. Not a single connection related to Tripetto is ever made with an external host other than yours. It's all in your own instance, under your control.