Insert a Form Manually

To Insert a form into a web page manually use this code.

[ form id="1" ]

Where 1 is the id of the form you want to include. (remove space before f and after ")

Then where you attach the form on the page, set the form position (the above content, below content part) to manual.

To insert a form manually as a collapsible button use the code below.

Make sure the bold attributes match and that you're using the correct form id#.

LEFT aligned button:

<div class="relative">

  <input type="checkbox" id="join-toggle-left" class="peer hidden">

  <label for="join-toggle-left" class="peer-checked:block hidden fixed inset-0 z-[999] cursor-default"></label>

  <label for="join-toggle-left" class="btn btn-primary cursor-pointer">Contact Us</label>

  <div class="peer-checked:block hidden absolute left-0 w-full max-w-md bg-white p-6 z-[1000] top-full shadow-lg rounded-b-lg">

    [ form id="#" ]

  </div>

</div>

Example: Aligned Left

CENTER aligned button:

<div class="relative flex justify-center">

  <input type="checkbox" id="join-toggle-center" class="peer hidden">

  <label for="join-toggle-center" class="peer-checked:block hidden fixed inset-0 z-[999] cursor-default"></label>

  <label for="join-toggle-center" class="btn btn-primary cursor-pointer">Contact Us</label>

  <div class="peer-checked:block hidden absolute left-1/2 -translate-x-1/2 w-full max-w-md bg-white p-6 z-[1000] top-full shadow-lg rounded-b-lg">

    [ form id="#" ]

  </div>

</div>

Example: Aligned Center

RIGHT aligned button:

<div class="relative flex justify-end">

  <input type="checkbox" id="join-toggle-right" class="peer hidden">

  <label for="join-toggle-right" class="peer-checked:block hidden fixed inset-0 z-[999] cursor-default"></label>

  <label for="join-toggle-right" class="btn btn-primary cursor-pointer">Contact Us</label>

  <div class="peer-checked:block hidden absolute right-0 w-full max-w-md bg-white p-6 z-[1000] top-full shadow-lg rounded-b-lg">

    [ form id="#" ]

  </div>

</div>

Example: Aligned Right

For Developers

Styling: Please be sure to use custom btn classes on every website as "btn btn-primary" are default ones and won't follow the theme of the website

Inserting menu shortcode in a blade file

{!! (new \App\CmsContent('[[short-code here]]'))->render() !!}