Marketo form for Wistia

Do you have examples? URLs?

Best to ask someone on your web team.

Hi Nick, I can help you if you can share the page url where it's being used.

So, is there any info on how to properly set up marketo forms for wistia? I found all of the instruction on how to set up the conector and etc. but nothing on how to make the forms look nice and work within wistia

Or does everyone just use the wistia turnstyle form and just put them on a list in marketo and do actions that way?

Hey Nick-

This one was new to me (Wistia forms), thanks for bringing it to the community it was a good challenge. I dug in a little on the links you shared and noticed that Wistia is adding some styles that look like they're intended to be a reset but are causing some issues with the display of some elements in your Marketo form. Also, I noticed that writing the CSS in the inspector required me to prefix the normal Marketo form classes with the ".wistiaMarketoFormWrapper" class [*note: check out line 41 in the CSS at the bottom to see this in play w/ the Marketo form styles].

Here's a look at the Wistia styles (note they target divs [row, column, fieldwrap], spans [button wrap], input, button and form... so basically most of the elements in your form are getting set to 'initial'. Im sure in some context this is helpful, but it also means that styles written "normally" for Marketo aren't landing in the render (i.e. .mktoForm input[type=text]  {background-color:red; })

so, let's get to work around all that noise:

Step One: prefix stuff w/ the Wistia parent container's class, then do your "normal" Marketo CSS.

If we were building on the previous example, we'd add the bolded part below:

.wistiaMarketoFormWrapper .mktoForm input[type=text]  {background-color:red; }

Step Two: Setup a fieldset to create a 2-column layout for "some, but not all fields"

I had a look at the form on your website and noticed that you've got a combo of 1-column and 2-column form fields. I've setup some styles that would work to accomplish this, but they'll require you to put the first 6 inputs into 3 rows (2x3) and all of them inside a fieldset element. In the form editor, you can create a new fieldset (like adding rich text), then drag your inputs into the fieldset. You'll want to make sure to drag First Name and Last Name into the same row (next to each other) - same goes for the other 2 pairs. The reason you'll be adding them into a fieldset is so that we can delineate the column sizes between 100% and 50% based on them being (or not being) inside a fieldset element.  With this setup, anything you place into a fieldset will end up 2-column, so be aware of that if you change the form in the future. The last two rows (Products Being Requested and Coments:) are not inside a fieldset so they'll retain the 100% width. Here's what that looks like with a little color to highlight the different pieces.

Here's the CSS I wrote in the inspector, I'm thinking you could copy paste this to the end of the Custom CSS in your Form and it might snap in place. There are some styles at the top to modify the Wistia container as well (make it a bit wider and switch the box-sizing so stuff doesn't clip)

/* override box-sizing */
#wistia_grid_48_wrapper * {
    box-sizing:border-box !important;
}
/* expand Wistia form box 50% > 80% */
.wistiaMarketoFormWrapper {
    width:80%;
}
/* make 2-column rows inside a FIELDSET */
.mktoFormCol {
    max-width:50% !important;
}
/* override mkto fieldset CSS (zero spacing)*/
fieldset {
    padding:0px !important;
    margin:0px !important;
    border:0px !important;
}
/* hide fieldset label */
fieldset legend {
    display:none !important;
}
/* style labels */
.wistiaMarketoFormWrapper .mktoForm label.mktoLabel {
    color: #ffffff !important;
    display: block;
    font-weight: 700 !important;
    margin: 0 0 5px;
    font-size: 15px;
    line-height: 20px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    padding-top: 0 !important;
    width: 100% !important;
}
/* style inputs */
.wistiaMarketoFormWrapper .mktoForm input[type=url],
.wistiaMarketoFormWrapper .mktoForm input[type=text],
.wistiaMarketoFormWrapper .mktoForm input[type=date],
.wistiaMarketoFormWrapper .mktoForm input[type=tel],
.wistiaMarketoFormWrapper .mktoForm input[type=email],
.wistiaMarketoFormWrapper .mktoForm input[type=number], 
.wistiaMarketoFormWrapper .mktoForm textarea.mktoField, 
.wistiaMarketoFormWrapper .mktoForm select.mktoField {
    background: #ffffff;
    border: 0.2rem solid #f0f1f2;
    color: #555555 !important;
    font-family: 'Hind', Helvetica, Arial, sans-serif;
    display: block;
    font-size: 15px;
    height: 53px !important;
    line-height: 20px !important;
    outline: none;
    padding: 4px 6px !important;
    border-radius: 4px;
    box-shadow: none;
    transition: border linear 0.2s, box-shadow linear 0.2s;
    -webkit-appearance: none;
    display: inline-block;
    width: 100% !important;
}
/* center button */
.wistiaMarketoFormWrapper .mktoForm .mktoButtonWrap .mktoButton {
    float:none !important;
}

Plug that in and let me know if you get the same results?