On January 24, Marketo released the long awaited “Forms 2.0” creator, which changes the game for many of us non programmers. Instead of having to find a JQuery and Javascript programmer to assist with iFrames or making fancy looking forms, you can do nearly all of that yourself from the comfort of your own screen. I very much want to thank Eric Hollebone for championing this project with the Marketo product team.
So Forms 2.0 sounds great, but what can it do? How do you use it to avoid all of that complex programming? The simple choice is to turn it on and get in there. I did just that and this is what I learned.
Forms 1.0 vs. Forms 2.0
The new form system allows you to more easily tweak your forms for design as well as for specific situations. Here’s a quick rundown:
- Progressive Forms still exist, but now you activate them in a more intuitive manner.
- Form Masking is now available and super easy to use. (This is where you force the input to conform to a certain standard, such as a Phone Number: (XXX) XXX-XXXX). This is only if you change Input Type=Text.
- Design elements are easier to control, such as Instructions, Width, Defaults.
- Auto populate is now available at the field level. Wow that is a big change from doing this at the Form or Page level.
- Visibility – you can ask Marketo to show certain fields based on the fill out. This helps create Country > State as well as all sorts of other options. This should help you build more interesting forms with fewer initial fields.
- Custom CSS and Javascript options on the Form.
- Lightbox option.
- A wide variety of button styles that automatically pull in your CTA.
- Forms can now be in Draft Mode, taking away the worry of making a tweak. Of course, you will still have to approve the Form and pages with the form.
- Replace the form with a message if you already know the Lead.
- Add Rich Text anywhere in the Form.
- Multiple Columns – drag and drop.
In a word: wow.
As far as I know, no other system does all of these things for the Form editor. As you are now salivating in ecstasy, let’s see how this might work in real life.
Migrating From 1.0 to 2.0
According to the webinar, Marketo instances turned on from January 24, 2014 have access to only Forms 2.0. Of course 99% of us can still use Forms 1.0 editor and all existing forms will continue to work just fine.
But what if you are already thinking, “Let’s migrate now!”? Is that a good idea?
My recommendation is to use Forms 2.0 for all programs in the future. Yes, you will have to recreate many forms and you can now do so without calling up your web team. In fact, this might solve some of your issues just by setting up new Form 2.0 forms. A couple of points before we move on:
- Naming: add “2” or “Form 2.0” to the end of any new forms if you still have Form 1.0 forms.
- Organization: Keep your new forms in a separate folder.
Jeff Coveney at RevEngine had a deeper migration suggestion that may help everyone.
Starting Out with Forms 2.0
Most of this post will focus on the newest features. To get started with Forms 2.0, go to Design Studio > Forms and press New Form.
Here you get to choose which type of Form to use. Keep the defaults and press Create. Now you see Step 1: Form Theme and Settings. If you click the arrows, you can select from 1 of 7 Themes. A Theme is a basic look and feel. If you want, you can modify the CSS later using the gear icon.
Not happy with your Theme? Click on Settings to discover some new options including Social Form Fill and Thank You Page Choices. If you later decide to include custom CSS, please note that your code will overwrite Marketo’s default CSS.
What? TY Page choices?? Awesome. You might want to design the Form first, then return to this. You can always modify this when you bring in the Form to the Landing Page.
Now click Next to get to the juicy field editor. In the beginning, you are given three starter fields. Then you can add and modify to your heart’s content.
I will leave it to the webinar to go through every last detail, however, there are some very useful features worth discussing in-depth.
Conditional Fields (Country and State)
Always the bane of the marketer’s existence is setting up picklists and conditional fields like Country > State and Product interest. Now Marketo makes this incredibly easy.
Add your desired field, such as Country, and then change its Field Type to Select. Add Instructions and then click on Values > Edit.
When you click on Edit, you will insert the values for the picklist. Unfortunately, Marketo won’t bring in an existing value list (not a change from Forms 1.0). If you have a pipe delimited list, click on Advanced to enter it there. Note: you can also just enter in “Display Values” if they are the same as the Marketo Value and Marketo will populate the second column automatically.
Now you still have to make State show up conditionally if someone selects “USA”, “Canada”, and “Australia”. To do that, press Save and then select the State Field.
Click Visibility Rules. Now you have the familiar Choice Editor.
Remember that you can use this Visibility Rule choice to display fields of any type based on any other field on the Form. I believe this may work also with known records and fields that are not on the Form.
Field Groupings
This is a display feature that some people like to use. It is also useful for grouping fields that are conditional on another response. Just click on the big + and choose Fieldset.
Then drag fields into the box. This is a great tool if you want to ask product interest questions or have a guest at an event.
Progressive Form Changes
Similarly to Fieldsets, Progressive Forms involve dragging the desired fields into the Progressive Fields box. You can edit the number of blank fields to show regardless of the number of fields you drag in. Remember that fields outside of the progressive box are always shown.
Lightboxes are Built In
Once you are done with the Form, you can select the form in Design Studio and then do Form Actions > Embed Code. Select Lightbox for the form to appear as a light box on the page.
Adding the Form to a Page
This works almost exactly like it has, with the exception that if you defined a Thank You Page on the Form, you can choose to follow that or make a new follow up selection.
Troubleshooting Forms 2.0
As with any new major change, there have been a flurry of possible bug reports and ideas about how to best use Forms 2.0. Here’s one that could be important:
Marketo Forms 2.0 Video Tutorials
Remember to sign up for email updates!
Looks like the lightbox option by default automatically opens a lightbox when the page loads. What if you want that lightbox form to open when someone clicks a link or button instead? For example what if on a page I have a link that says “Register now”, and I want that to open the Marketo form lightbox?
You’d have to modify the javascript to do that.
I did do a quick writeup on the Marketo community that seems to work for most people. Here’s the link: https://community.marketo.com/MarketoDiscussionDetail?id=90650000000PlKsAAK (must be logged in)
Cool, thanks for the link Jason.
Hi Josh and Jason,
Just wondering if you have the new javascript code to open a “Thank you page” in a new window.
I don’t, sorry. Please ask the Community or request help from a freelance programmer. It’ll be a quick job for them.
Are the new field types available because Marketo is using JavaScript validation of input or are they just there for more hooks into the form?
Which new field types are you thinking of? I believe they are just adding more field types. They do some sort of validation on the form too.
Hi Josh,
I think I answered my own question with a little testing. I knew Marketo wouldn’t let you sumbit a form if a field was *required and left blank. I was curious if there was other validation going on in the background to make sure an email address was actually in the correct format of an email address. Turns out Marketo will throw up an error message if you don’t enter a correctly formatted email address (xxx@xxx.com), same with phone number etc….
Thanks for all your tips and guides.
Best,
David
Maria, I am trying to figure this out as well. If you come across a solution would love to know. Thanks 🙂
With Forms 2.0 you can add masking to any field. This is not the default behavior except for email address, so check your settings, go down to the bottom of the field settings column and look at Masking.
Maybe you already have the answer, but just in case and for everyone else:
Here is the javascript:
function setupFormSuccess (){
var form = MktoForms2.getForm(update with form id);
if(!form){
setTimeout(setupFormSuccess, 500);
}else{
form.onSuccess(function (values, url){
window.top.location.href = url;
return false;
});
}
}
setupFormSuccess();
Link to article in Marketo community site: https://community.marketo.com/MarketoDiscussionDetail?id=90650000000PlzWAAS
Hi Josh,
Is there a way to create forms with questions that allow for text? I’m looking to replicate the format of Google Forms (or even better) Form Assembly. But I’m stuck at just being able to ask for basics like name, email etc. (Any tutorial links you can provide would be highly appreciated).
Thank you!
Kind Regards,
Justin
Sure, you just need some questions and the appropriate fields already in Marketo. If you need to go beyond a basic survey form, then it’s better to go with SurveyMonkey or something like that.
1. Create Questions
2. Sketch out form on paper
3. create fields in Admin>Field Management
4. create form
Any instructions on how to modify the javascript to get the lightbox to open when a button is clicked?
The standard code should do that for you. Is it not?
Do a quick search of the community on lightbox as several people have code to modify this function.
Hi there. Is there a way to stop the default validation messages for items like “email” from automatically showing? We would rather show them when a user clicks submit
Hi,
You will have to adjust the javascript. Check out the Marketo Nation for ideas or developers.marketo.com on how to do this.
So how does one go about styling the form?
Im lost as to where to start getting actual results. The forms are not very responsive, not sure why thats the case in 2017. I try to work with the CSS, but its so bulky, im not sure what is really affecting what.
Basically, id love to see someone actually style the form and not just gloss over that there is a CSS file. Please EDIT the CSS file, and not in a generic, non-real world applicable way.
Hi there,
I’m not a programmer, but I can tell you that you can either 1) edit some CSS on the page or on the Form as described. OR 2) code the form and use jquery, API, or the direct form ID# and hack it together in the way you want it to look.
If you want further help, there are examples on github and nation.marketo.com. I believe Sanford has quite a few examples. Of course, it really depends on what you’re doing. So if you aren’t familiar with Forms, HTML, CSS, and javascript, then it will be harder to modify a form style.
Hi there,
If you aren’t familiar with CSS, HTML, jquery, javascript, then it’s worth it to get a coder or front end developer. You can modify the CSS on the Form asset or within the Page it lives on.
Examples are on the Nation.Marketo.com or github. Sanford probably has posted examples too. Sorry, I’m not a developer, so I don’t have better examples.
I am a front end coder, but the forms are generated with inline styling that is incredibly bulky. I was hoping that someone who bother to write about styling Marketo forms actually knows how to style them beyond the default cookie cutter.