Let the platform do the work
SugarClubContact+1 (877) 842-7276

Embedding Sugar Market Forms

Overview

Inline frames, or Iframes, are used to embed and isolate third-party content into a website, like one HTML page within another. For Sugar Market, Iframes are one way to feature a form on your website. Iframes are typically used when customers do not have the ability to create forms on their website, but still want the ability to capture prospect data within their website rather than directing prospects to a hosted landing page.

Accessing Legacy Tools

To access legacy tools: 

  1. Click the open button at the top of the navigation bar to view all available modules.
  2. Click the Legacy Features module.
    accesslegacyfeatures
  3. Select the tool you need to access from the Legacy Features section. 
    legacyfeaturesection

Embedding a Form

  1. Create your landing page in Sugar Market. You should create both the form and the thank you page.
  2. Open your website to edit the code on the page where you want the Iframe to appear. Here is an example of an Iframe on a website:
    <iframe src="html_intro.asp" width="100%" height="300"> <p>Your browser does not support Iframes.</p> </iframe>
  3. Within the opening <iframe> and closing <iframe> tags, define the source "src" of the content that will be pulled into the frame. This is where you define the Sugar Market landing page URL, which is located on the landing page's "Testing" tab (e.g. http://host.msgapp.com/af2?LinkID=CH00095550eR00000254AD). Make sure this link does not include "msgid" or "preview" since these are links that should not be shared in emails or websites. You should place default text within the <p> tags that will render if the user's browser does not support Iframes.
  4. Set the width and height of the frame. Confirm that these settings correspond with the landing page template to ensure the entire landing page fits into the frame. You can define an actual number of pixels within quotes, as in the height parameter in the example above, or use 100%, which allows the Iframe to expand and contract based on the content within the Iframe. If your form is too wide for the space defined on your website, adjust the containing width on the landing page itself in Sugar Market.
  5. Test completing the form in different browsers and with different size windows to confirm the form and the thank you page content appears within the Iframe.

Note: Any CSS or other styling on your website will not automatically affect the Iframe contents since the form is on Sugar Market servers. Therefore, you should style the form questions and answers on the landing page within Sugar Market.

Legacy Landing Pages on Secured Web pages

Legacy landing pages are not supported on secured web pages. We recommend you use our Pages and Forms since they are supported on secured web pages. If you still prefer to use the legacy landing page, then use the following workaround. Since this is a non-standard method, please use this at your own risk.

Workaround

Embed the following <meta> tag in your page's <head> tag: <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Example:

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width-device-width, initial-scale="1.0" />

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

<title>@ViewData["Title"]</title>

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />

</head>