Skip to main content

How to embed an order form on your website

Copy your order form's embed code from the Publish tab and paste it into your website so visitors can order without leaving your page.

Written by Gabriel Lecointere

Use case: You want visitors to order straight from your own website, for example from a pricing or "Start a project" page, without being sent to a separate link first.

Every order form you build in ManyRequests comes with two ways to share it: a link, and an embed code you paste into your website. The embed code shows the full order form, including all its steps, inside your page.

This article covers embedding. To build the form itself (fields, steps, conditions and what happens after submission), see Using custom order forms.

Before you start

  • You need to be a portal admin or admin.

  • The Services menu, including Order forms, only shows when the billing module is turned on in Settings > Modules and extensions > Billing.

  • You need an order form. If you don't have one yet, create it first with Create order form.

Copy the embed code

  1. In the sidebar, go to Services > Order forms.

    Order forms list with the Order forms item highlighted in the Services menu

  2. Click the title of the form you want to embed. The form opens in the builder.

  3. At the top, open the Publish tab. (You can also click Next twice, from Build to Settings to Publish.)

  4. Under Embed in your website, click Copy embed. The button briefly shows Copied!.

    Publish tab with the Order form link section and the Embed in your website section, Copy embed highlighted

  5. Click Save to save and publish the form.

The code you copy looks like this:

<iframe src="https://your-portal-address/order/your-form" width="100%" height="100%"></iframe>

Paste it into your website

  1. Open the page you want to edit in your website builder (for example WordPress, Webflow, Wix or Squarespace).

  2. Add an HTML or "embed code" block where the form should appear.

  3. Paste the code and publish the page.

Visitors now see the order form inside your page, with the order summary, coupon field and payment step, just as they would on the link.

The Website Project Inquiry order form as a visitor sees it, with the order summary on the right

Tips

  • Form looks cut off? Some website builders don't give the embed block a height. Change height="100%" in the code to a fixed value, for example height="1200", and adjust until the whole form fits.

  • Link or embed? Use Copy link under Order form link for buttons, emails and social posts. Use the embed when the form should live on the page itself.

  • Changing the link changes the embed. The Shareable link field on the Publish tab sets the end of the form's address, and the embed code uses the same address. If you change it, copy the embed code again and replace it on your website.

  • Custom domain. If you've set up a custom portal domain, the link and embed code use it automatically.

  • Single services. To send people to the checkout of one service instead of an order form, see How to integrate your checkout form on your website.

Did this answer your question?