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 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.

Options

Inside the Share screen you can customize the shortcode to determine the implementation of the form into your WP site. You can just toggle the desired options and the shortcode will update automatically.

The following options are available:

• Allow pausing and resuming

  Setting to determine if the form can be paused and resumed by your respondents.
  • Parameter in shortcode: pausable (optional)
  • Default value: no
  • Possible values: yes | no

• Save and restore uncompleted forms

  Setting to determine if data persists in the browser if a user enters 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 | [viewport-width value]vw

• 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 | [viewport-height value]vh

• Display loading message

  Option to show a loading message to the form.
  • Parameter in shortcode: message (optional)
  • Default value: -
  • Value: your loading message

• 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

• Specify custom CSS styles

  Option to add custom CSS (see instructions below).
  • Parameter in shortcode: css (optional)
  • Default value: -
  • Value: your 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.

Responsiveness

Tripetto forms are of course designed to work properly on all screen sizes. This is called 'responsiveness'.

If you embed a Tripetto form in your own page, the responsiveness of the form will depend on the responsiveness settings of your own page. In most cases that is controlled by the viewport settings in the head section of your website. We advise to configure that like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

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; } }

List of block names

For the full list of block names that you can use as data-block selector, please have a look at this overview of all our packages.

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.