{"id":5927,"date":"2023-03-13T16:15:01","date_gmt":"2023-03-13T20:15:01","guid":{"rendered":"https:\/\/optinmonster.com\/?post_type=optinmonster_docs&p=5927"},"modified":"2025-08-22T07:36:39","modified_gmt":"2025-08-22T11:36:39","slug":"how-to-connect-optinmonster-with-any-custom-html-form","status":"publish","type":"optinmonster_docs","link":"https:\/\/optinmonster.com\/docs\/how-to-connect-optinmonster-with-any-custom-html-form\/","title":{"rendered":"How to Embed an HTML Form Into An OptinMonster Campaign"},"content":{"rendered":"\n

Creating forms is easy using our drag-and-drop editor, and connecting forms to the most popular Email Service Providers (ESP)<\/a> is too. But sometimes, you may need to use a custom form you’ve created yourself outside of OptinMonster, or to integrate with an email marketing platform we don’t yet support. Our Embed Form block<\/strong> is perfect for embedding an HTML or Javascript form into your OptinMonster campaign.<\/p>\n\n\n\n

In this article, you\u2019ll learn how to embed any HTML form into an OptinMonster campaign using the Embed Form block.<\/p>\n\n\n\n

Before You Start<\/h2>\n\n\n\n
\n

<\/p>\n\n\n\n

Are you looking to add extra fields to your optin form and prefer to use one of our native Integrations?

Field Mapping<\/strong> is a brand-new feature available for our most popular Email Service Providers. You can easily add radio buttons, phone fields, text areas, number fields, lists, and more!<\/p>\n\n\n\n

Learn more about Field Mapping<\/a><\/p>\n<\/div>\n\n\n\n

Custom HubSpot forms<\/strong> must be edited following this guide<\/a> to function correctly.<\/p>\n\n\n\n

Custom Marketo forms<\/strong> must be edited following this guide<\/a> to function correctly.<\/p>\n\n\n\n

Your custom form’s styling <\/strong>may need to be controlled using Custom CSS<\/a>.<\/p>\n\n\n\n

Looking to add a WordPress shortcode<\/strong> to your OptinMonster campaign? Learn how to add shortcodes<\/a>.<\/p>\n\n\n\n

Embed Form<\/h2>\n\n\n\n

To add an HTML form to your OptinMonster campaign, follow these steps:<\/p>\n\n\n\n

    \n
  1. Navigate to the Design<\/strong> view of the campaign builder.
    \"Design<\/li>\n\n\n\n
  2. If your OptinMonster campaign already contains a Fields block<\/strong>, you’ll need to delete it<\/strong>.
    \"Delete<\/li>\n\n\n\n
  3. You can now drag the Embed Form block<\/strong> into your campaign’s design where you want to show the HTML form.
    \"Add<\/li>\n\n\n\n
  4. In the left sidebar panel the Embed Form block settings will provide a field for you to paste your HTML form’s embed code into.
    \"Add<\/li>\n\n\n\n
  5. Optional<\/strong>: You can configure additional styling settings for the Embed Form block in the Advanced<\/strong> tab of the left sidebar panel.
    \"Advanced<\/li>\n\n\n\n
  6. Recommended<\/strong>: Update your HTML form embed code following the next section in this guide<\/strong> to track conversions and set cookies (to control how often the campaign can reappear).<\/li>\n\n\n\n
  7. When you’re finished, Save<\/strong> the campaign.<\/li>\n<\/ol>\n\n\n\n

    Form Events<\/h2>\n\n\n\n

    Conversions and Cookies<\/h3>\n\n\n\n

    There are two options to track conversions and set cookies<\/a> when your custom HTML form is submitted:<\/p>\n\n\n\n