> For the complete documentation index, see [llms.txt](https://docs.powerfulform.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.powerfulform.com/~/revisions/zH3ocLtRhbVvMmUZwFWl/app-integration/form-with-gempages.md).

# Form with GemPages

**✏️ Create a new form**

If you don’t have a form yet, create one first in PowerfulForm (choose a template or start from scratch), then add the fields you need.

✅ Once your form looks good, move to publishing steps below.

***

### 🧾 Get embed code of a form

In the **Form Builder app**, you’ll copy the form shortcode.

1\. Open the app > click **Forms** > open  a form you want

2\. Click **Publish** button on the right corner

<figure><img src="/files/q80E1JQ6jwMwNszZvRQr" alt=""><figcaption></figcaption></figure>

3\. Click **Copy short code**&#x20;

<figure><img src="/files/jA7dqJdYM6A1Xye5iAni" alt=""><figcaption></figcaption></figure>

***

### 🧷 Display a form on a specific page

1\. In **GemPages** app, in the left side, find **Liquid** element, drag and drop it at the position you want on the page

<figure><img src="https://globosoftware.net/wp-content/uploads/2022/01/Screenshot_129-1024x534.png" alt=""><figcaption></figcaption></figure>

2\. In **Liquid** element editor, paste the code of the form

<figure><img src="https://globosoftware.net/wp-content/uploads/2022/01/Screenshot_130-1024x856.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://globosoftware.net/wp-content/uploads/2022/01/Screenshot_131-1024x632.png" alt=""><figcaption></figcaption></figure>

3\. Click **Save** to update the changes

**Preview** the page to confirm the form is showing correctly.

<figure><img src="https://globosoftware.net/wp-content/uploads/2022/01/Screenshot_133-1024x544.png" alt=""><figcaption></figcaption></figure>
