JSFiddle - React, Tailwind, and code Playground

by davehol

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
<script src="//app-lon04.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="contactform"></form>
<form id="mktoForm_1041" style="display:none;"></form>
<div class="formresponse" id="contactformresponse">
  <h2>Form response</h2>
</div>
<script>
  // BUILD FORM SETTINGS
  $("#contactform").buildForm({
    mktoFormId: 1041,

    formClasses: false,
    submitClasses: false,
    submitText: false,

    serverType: false,

    legacyanalytics: false,
    ppcid: false,
    ppclabel: false
  });
  $("#contactform").validate({
    rules: {
      FirstName: {
        required: true
      },
      LastName: {
        required: true
      },
      Title: {
        required: true
      },
      Company: {
        required: true
      },
      Email: {
        required: true,
        email: true
      },
      Phone: {
        required: true
      }
    },
    messages: {
      FirstName: "Please enter your name",
      Title: "Please enter your job title",
      Company: "Please enter your company name",
      Email: "Please enter a valid email address",
      Phone: "Please enter a valid phone number"
    },

    submitHandler: function(form) {
      $(form).ajaxSubmit({
        beforeSubmit: function(fields) {
          MktoForms2.loadForm('//app-lon04.marketo.com', '428-OTB-454', 1041, function(mktoForm) {
            var mktoValues = {};
            fields.forEach(function(field) {
              mktoValues[field.name] = field.value;
            });
            mktoForm.setValues(mktoValues);
            mktoForm.submit();
          })
          return false;
        },
        type: 'POST',
        error: function(response) {
          console.log(response);
        },
        success: function(response) {
          console.log(response);
         ...

CSS

.formresponse {
  display: block;
}

JavaScript

// MARKETO FORM BUILDER PLUGIN
// v1.0.0
(function ($) {
  "use strict";
  $.fn.buildForm = function (options) {

    var settings = $.extend({
      mktoFormId: null, // NEED TO SET A FALLBACK FORM ID
      mrktoUrl: 'app-lon04',
      munchkinId: '428-OTB-454',

      formClasses: false,
      submitClasses: false,
      submitText: false,

      serverType: false,

      legacyanalytics: false,
      ppcid: false,
      ppclabel: false
    }, options);

    // CHECK IF FORM CONTAINER IS FORM OR OTHER ELEMENT
    var formContainer = ($(this).not('form')) ? $(this).closest('form') : $(this);

    $.getJSON('https://' + settings.mrktoUrl + '.marketo.com/index.php/form/getForm?munchkinId=' + settings.munchkinId + '&form=' + settings.mktoFormId + '&callback=?', function (renderForm) {

      var formOutput = '',
        formOutputId = renderForm.Id,
        formOutputmunchkinId = renderForm.munchkinId,
        formAction = (!settings.serverType) ? '/process/marketo_local_post.php' : '/process/marketo_local_post.aspx',
        formName = renderForm.Name,
        buttonClass = (!settings.submitClasses) ? '' : ' class="' + settings.submitClasses + '"',
        buttonText = (!settings.submitText) ? renderForm.SubmitLabel : settings.submitText;

      $(formContainer).attr({
        //    action: formAction,
        method: 'post'
      });

      if (settings.formClasses !== false) {
        $(formContainer).addClass(settings.formClasses);
      }

      var colcount = 1;
      $.each(renderForm.rows, function (key, value) {

        // column divs
        var columncount = (colcount % 3 === 1) ? ' first' : '',
          opencolumnwrapper = (value.length > 1) ? '<div class="col3' + columncount + '">' : '',
          closecolumnwrapper = (value.length > 1) ? '</div>' : '';

        // open column divs
        formOutput += opencolumnwrapper;

        $.each(value, function (ikey, ivalue) {
          var InputRequired = (ivalue.hasOwnProperty('IsRequired') &&...