Slots / Code Injection

There are many ways to inject code throughout your site. Slots are the primary method for doing this

Slots are definable HTML templates that can be inserted into various areas of BetterForms. Slots can be used for customizing the header area, navigation and footer areas (footer not developed yet). Slots can accept HTML and VueJs HTML.

Slot scope for VueJS HTML content will depend on the slot location. All slots can see window.formGen from there you can access formGen.formSchema.model etc.

Slots replace default slot content if there is a default content (Eg. logout)

To edit your site's slots, go to the Appearance > Slots tab of your site settings.

Slot Locations:

Slot NameDescription


To the left of the logo brand block


Company Name / Logo Area, if set, replaces default text


Replaces default sidebar hamburger toggle is set


Top Header area left most position to the right of the brand




Replaces the default logout code (This slot hides conditionally depending if the user is authenticated)


Footer area of page body


Footer area of entire page


Left navigation menu above menu items


Left navigation menu below menu items


Left navigation menu footer area, good for logos, You will need to add CSS to bottom align this `div`

DOM Header Insertion

If you need to insert HTML in the header of every page in your site, go to the Environment > DOM Header Insertions tab in your site settings. This feature is useful for installing custom fonts or a favicon for the browser tab. You may also need to use it for certain Custom Form Elements


Inserted tags will generally load and block other code execute that renders the page while the module loads. Since these modules are often used for only a small part of the work flow, you can delay their loading by using async and defer tags in the script tag.

<script async defer src="" type="text/javascript"></script>

Last updated