Kentico + Marketo Forms

Brendon McCarthy asked on September 27, 2014 18:47

Running Kentico 8.1 and migrating content from an existing site which is keeping Marketo forms for the foreseeable future. Looking for recommendations, best practices to load Marketo forms, which seem to only work with a tag. Adding the code directly as is, it is removed by the Kentico editor. Also, the issue of nesting a form within a form thanks to ASP.NET Webforms. Thoughts?

Recent Answers


Brenden Kehren answered on September 27, 2014 20:40

Most form engines like that allow an iframe implementation. Do you have an option for that?

0 votesVote for this answer Mark as a Correct answer

Brendon McCarthy answered on September 27, 2014 20:52

I believe it used to be an option, but I've been unable to find any current documentation for Marketo Forms "2.0" that uses an iframe...thus the question to the community. http://developers.marketo.com/documentation/websites/forms-2-0/

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on September 27, 2014 21:43

Ok, wasn't sure what you tried since it wasn't mentioned. If iframe isn't an option, you'd have to either create a webpart to handle that or your own form control.

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on January 7, 2016 00:05

Funny thing, I'm coming up on an issue with a site now that is using the same thing. Any suggestions you might have on this? Did you create a webpart or what was your solution?

0 votesVote for this answer Mark as a Correct answer

Brendon McCarthy answered on January 27, 2016 03:54

Hi Brendan. We ended up creating a custom webpart to collect Marketo form parameters and then writing the HTML, inserting it onto a page. The basic webpart itself was simple. However, we wanted to override the redirect and getting the correct URL on a multisite install was difficult. Next, we had to override the default Marketo styles (even if using "simple" form) to match the site theme/template which was accomplished using Bootstrap mixins and some hacky javascript (due to iframes) to strip Marketo classes from HTML tags. Its not the cleanest, but for what its worth, hope it helps.

WebPart

    protected void SetupControl()
    {
    ...
        var divId = "formMarketo_" + FormId;
        ltlPlaceholder.Text = "<div id=\"" + divId + "\"  class=\"marketo-reset marketo-panel\" style=\"visibility: hidden;\"></div>";
        ltlMarketo.Text = "<script src=\"//" + BaseUrl + "/js/forms2/js/forms2.min.js\"></script>";

        StringBuilder builder = new StringBuilder(512);
        builder.Append("MktoForms2.loadForm('//" + BaseUrl + "', '" + MunchkinId + "', " + FormId + ", function(form) {");
        builder.Append("MktoForms2.$('#" + divId + "').append(form.getFormElem());");
        builder.Append("form.onSuccess(function (values, followUpUrl) {");
        // OnSuccess Calls
        if (!string.IsNullOrEmpty(RedirectUrl))
        {
            var pageInfo = PageInfoProvider.GetPageInfo(CurrentSiteName, "", "", "", TreePathUtils.GetNodeIdByNodeGUID(new Guid(RedirectUrl), CurrentSiteName), true);
            builder.Append("location.href = '" + pageInfo.AbsoluteURL + "'; return false;");
        }
        builder.Append("});");
        builder.Append("});");

        ltlScript.Text = ScriptHelper.GetScript(builder.ToString());
   }

CSS

.marketo-reset button,
.marketo-reset input[type=button] {
    .btn;
    .btn-success;
}

JS

function marketoReset() {
    // Remove All Classes / Styles
    $('.marketo-reset .mktoForm').removeAttr("style");
    $('.marketo-reset .mktoLabel').removeAttr("style");
    $('.marketo-reset .mktoField').removeAttr("style");
    $('.marketo-reset .mktoButtonWrap').removeAttr("style");
    $('.marketo-reset .mktoForm').addClass("marketoForm");
    $('.marketo-reset .mktoForm').removeClass("mktoForm");

    // Set Visibility
    $('.marketo-reset').css("visibility", "visible");

    // Everything Ready - Send Message to Show Form
    if ('parentIFrame' in window) window.parentIFrame.sendMessage('Ready'); return false;
}

$(".mktoForm").waitUntilExists(marketoReset);
0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.