How to embed your form in your WordPress site

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

• 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

• 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

• 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

• 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

• Specify custom CSS styles

  Option to add custom CSS (see instructions below).
  • Parameter in shortcode: css (optional)
  • Default value: -
  • Value: custom css string

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.

For example, if you want to manipulate the color of the title of the text input blocks (referred to by tripetto-block-text):

customCSS: "[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.