> 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/KRfi0fHdeAFeAhiPrH7G/app-integration/form-with-gempages.md).

# Form with GemPages

This guide shows how to display a Powerful Form form on pages built with the 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="https://3488889492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEGgRVSDpMlcGFz1igK0s%2Fuploads%2FpBe0S6gW8GGrZqCjapfy%2Fimage.png?alt=media&amp;token=b6955da6-0896-46af-8ddf-ca978cdcad31" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3488889492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEGgRVSDpMlcGFz1igK0s%2Fuploads%2FpZDhETEiwZdvUpBnHX2x%2Fimage.png?alt=media&amp;token=35ae739b-07da-4c01-9f0e-286f8dfc9584" 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>
