How to Embed Form to a page

How to Embed Form to a page


In Display > Open form in > select Embed Form if you want to display Contact Form in the page content, don't want to trigger form with a button.
If you use the form as Embed Form, you do NOT need to configure the Trigger Button settings
The Embed Form does not have a trigger button. It will display the form directly on your page.



Then you need to add this shortcode to the page content or liquid file: <div contactform-embed='FORM_ID'></div>
Remember to replace FORM_ID in the shortcode with the correct Form ID of your form.
You can the Form ID in the form settings.
NOTE: You must click the "Save" button to create the form first, then the Form ID will appear.


In our example, the shortcode will be: <div contactform-embed='224148'></div>
There are some ways to add this shortcode to embed the form:

Method 1: Add to the page content using the app block

  1. Go to your theme's customizer
  2. Go to the page you want to add the form (e.g. contact page)
  3. Click on "Add section" > Apps > Contact Form Embed
  4. Select form type as "Embed form" > add the Form ID
  5. Save > The form is embedded to your page successfully.

Method 2: Add to the page content using the Custom block

  1. Go to your theme's customizer
  2. Go to the page you want to add the form (e.g. contact page)
  3. Click on "Add section" > Sections.
    Here you can select the Custom block such as Custom Liquid, Custom HTML, etc.
  4. Add the whole shortcode with the form ID.
  5. Save > then the form will be embedded to your page.

Method 3: Add to the page content through Pages

  1. Go to your page in Shopify admin → Online Store → Pages → Choose the page you want to embed the form


  2. In the Content editor, click the <> button to CHANGE TO HTML EDITOR

  3. Paste the shortcode into the editor
  4. Save and Done

Method 4: Add to the liquid file of the page (NO RECOMMEND)

This method requires coding experience.
  1. Go to your Shopify admin → Themes → Edit code
  2. Find the template liquid that your page is using.
    For example, if you want to add to a "Contact" page, the template may be "contact-form.liquid"
    The page's template is different on different themes. If you are unsure which your template's page is, please Contact Us for help.
  3. Paste the shortcode to the position you want on the page

  4. Save and Done

If you are not tech-savvy or the instruction is too complicated with you, please Contact us then we can help you embed the form.