Getting started

Embedding forms

The block, shortcodes, popups, menu links, widgets, Elementor, WPBakery and PHP.

A form shows only after it is published. Its styles and scripts load only on pages that contain a form.

Block editor

Add the Flavonto Form block (search for "form"). Choose the form in the block or in the sidebar. The sidebar also has:

• Title and Introduction: as set in the form, shown or hidden,
• Prefilled answers: name=value pairs joined with &, for example topic=sales&source=homepage (only fields that allow it in their Data settings accept values),
• Popup: open the form in a popup from a button, or from a link (see below), with the button text and popup width.

The block works in posts, pages, the site editor and block widget areas. The editor shows the real form.

The Form entry count block shows the number of entries of a form, the places left under its entry limit, or the limit itself, for example "12 places left". It is the block version of [flavonto_form_count].

Shortcodes

[flavonto_form id="3"]
[flavonto_form id="3" show_title="0" show_description="0" values="topic=sales"]
[flavonto_form_popup id="3" label="Contact us" width="640"]
[flavonto_form_popup id="3"]<img src="contact.png" alt="Contact us">[/flavonto_form_popup]
[flavonto_form_popup id="3" trigger="none"]
[flavonto_form_count id="3" type="remaining"]

Popups from links and menus

Any link to #flavonto-form-3 opens the popup of form 3, as long as that popup is on the page. To open a popup from a menu item:

1. Add the popup to the page or a widget area with trigger="none" (or the block with No button), so only the hidden popup is printed.
2. In Appearance, Menus (or the navigation block), add a custom link with the address #flavonto-form-3.

An element with the class flavonto-form-open-3 also opens it, and visiting a page address that ends with #flavonto-form-3 opens it on arrival. In a classic menu you can instead give the menu item that class under CSS Classes (shown through Screen Options); the item's own link is then not followed.

Popups are native dialogs: keyboard focus moves into the form, stays inside while it is open, the page behind does not scroll, Escape closes it, and focus returns to the link or button that opened it.

Classic widgets

In Appearance, Widgets (classic widgets), add Flavonto Form. Choose the form, a heading, whether to show a popup button instead, and optional prefilled answers.

Elementor

Search for Flavonto Form in the Elementor panel. The widget has the same options as the block, and a Style tab that sets the form's accent colour, text and field colours, corner radius, spacing and text size.

WPBakery Page Builder

Find Flavonto Form and Flavonto Form popup in the Content category. (WPBakery is a paid plugin that was not available to us for testing; the elements use WPBakery's documented vc_map registration with the shortcodes above.)

Classic editor

The Add form button next to Add Media opens a dialog to choose a form and inserts the shortcode. You can hide the button in Settings, Interface.

PHP

In a theme or plugin:

<?php if ( function_exists( 'flavonto_form' ) ) { flavonto_form( 3 ); } ?>
<?php echo flavonto_get_form( 3, array( 'show_title' => false, 'values' => array( 'topic' => 'sales' ) ) ); ?>
<?php flavonto_form( 3, array( 'popup' => true, 'label' => 'Contact us' ) ); ?>

Themes that print forms late

Form styles and scripts load only on pages that show a form. When the form is in the page content, its styles are added in the page head, so it never shows unstyled. The plugin ships no third party scripts (no jQuery or popup libraries), so there is nothing to turn off when a theme loads its own. Shortcodes return clean markup, so themes that wrap content in automatic paragraphs need no workaround.

Some page builders print content after the page head, too late to add the form's styles there. The form still works because its styles are added to the page footer. If you see the form unstyled for a moment, list the page in Settings, Interface, Always load form styles on these pages.