How to embed an interactive form in WordPress

Connecting product choices to your store's cart? Follow the WooCommerce installation guide for the plugin, shortcode, and order reporting. The steps below cover a quote request form.

1. In the Offerandum panel open Home, find the published form and click Copy code under the website snippet. The snippet already carries your form's id.
2. In WordPress open the page that should hold the form and add a Custom HTML block. Paste both lines and update the page.
3. If you build pages in Elementor, add an HTML widget and paste the code into it. In WPBakery it is the Raw HTML element, in Divi the Code module.

The form fills the width of the block it sits in. At a typical 700-pixel content width it looks best in a single column, with no widgets beside it.

The first line loads the Offerandum script. You can leave it in the block with the form, or add it once to the header of the whole site and keep only the element on the page. The second way lets the form's statistics remember which page a customer landed on before reaching the form.

If you choose site-wide placement, use the header-code setting provided by your website tools or ask the site administrator to add the script. The location and availability of that setting depend on the WordPress setup.

• Permissions. Retaining scripts depends on the capability to publish unfiltered HTML. Ask the administrator to check it if part of the code disappears after saving; a role name alone does not establish the site's configuration.
• Caching and optimization plugins. Features like "delay JavaScript" or "defer scripts" (WP Rocket, LiteSpeed Cache, Autoptimize) can hold the form's script until the first click. Add offerandum.com/widget.js to the exclusions and clear the cache.
• External script blocking. If the script is not loading, ask your site administrator to review the site's configuration. Details about data processing are in the privacy policy .
• Themes with their own page editor. Some themes replace the HTML block with one of their own; look for the element that inserts code as is, without formatting.

The editor varies by WordPress version. From version 7.0, Custom HTML has separate HTML, CSS, and JavaScript areas; the CSS and JavaScript areas require the appropriate capability. Paste an embed snippet containing HTML tags into the HTML area. See the official WordPress documentation for the current block interface.

The form runs only on the sites listed under the snippet in the panel. We add the address you gave us during setup; add a staging site or a second domain yourself. The steps shared by every platform are in the installation guide .

Open the published page on a computer and a phone and go through the form to the summary. Send a trial request through the test link from the panel, or add the test-token attribute from that link to the element; such requests land in the panel marked as tests. Remove the attribute afterwards. The customer receives a PDF quote , you receive the lead with every parameter.

Rather not touch the site? Link to the form's hosted address from your menu or a button. Setup and plans are on the pricing page .

Need the form prepared first? Read how Offerandum sets up an interactive form for WordPress : what you send us, what our team builds, and how to review the result before launch.