Forms 2.0 - Better forms without code | Community
Skip to main content
February 10, 2012
Delivered

Forms 2.0 - Better forms without code

  • February 10, 2012
  • 126 replies
  • 35384 views
[Please add your comments below to help build a strong case]

Since the FORMS 2.0 idea from Glen Lipka has long been lost, it's time to bring it back and get it on the agenda.  It only been raised as an issue for 3 years and more than 2 versions of this community.  Even one of recent ideas from the community for the Amazing Race Idea was for form improvements: Form Widgets!.

Basically Forms need to be come way easier without manipulation through code.  There are a lot of small improvements that could be made to the form functionality that would be a great benefit to clients without access to a web developer skill set.  

At one time or another, I have had marketers request most of the following list of form improvements:

  • support for HTML5 form elements
  • allow pre-population on a field by field basis as a form designer attribute
  • allow text fields to optionally concatenate the new value with the existing data
  • field masking for phone, sin number etc.
  • add real-time (onblur) validation, validation test conditions and  contextual error msgs
    • email regex,
    • min and max for numbers etc. 
    • phone with or without extention
    • domain name for spam exclusion - i.e. mickmouse@example.com a@a.com
    • alpha-only for names/text fields
    • Automatic formating for proper case including whitespace trimming
  • better positioning of the field label and error msg
  • more form layouts in terms of 2-3 columns layouts as well as fields that can span the columns
  • more control over the submit button:
    • its style/image
    • dynamic button text both before and after click text to make the form reusable on more that one landing page within the landing page editor
    • enable/disable submit based upon required fields/validation
  • provide more advanced type of controls:
    • date pickers,
    • sliders (range),
    • dropdowns (combobox) with icons, option groups etc.
    • better support for checkboxes/radio with multi-select 
  • dependant selections or skip logic i.e. country/state and surveys
  • geo-ip support for country/state
  • automatic detection and support for iframes to get parent parameters, adjust the form's target = _top etc.
  • better (dynamic) follow up options - new windows, dynamic redirect based upon other form fields, parameters or cookies
  • Allow fields from SFDC objects other than contact and lead

Forms have been one of the least attended to areas of Marketo; it has literally been years since any significant improvements have been made while the competition has not been standing still waiting.

Below is a small list for just from this version of community:

126 replies

Rafael_Santoni1
New Participant
February 12, 2013
Having something like the below image available to configure that functionality would be really good.


I hope you can see the mock design I included here.
Rafael_Santoni1
New Participant
February 12, 2013
Edward, what you said is true. However, the idea here is to remove the dependency on coding to accomplish these tasks. If not, another approach could be to use Marketo's native url parameters functionality to pre-populate hidden fields, and use jQuery to change the field type from "hidden" to "text" or whatever else you may need.

The ideal scenario would be to simply allow to configure the functionality of url parameters to populate displayed fields (at least text fields).

Thank you,

Rafael
Edward_Masson
New Participant
February 12, 2013
Gregoire, You can pre populate the form from the URL (if the info is there) by using JQuery on your Marketo Landing page. I've not tried it but I'm sure some JQuery guru can confirm - I'm looking at Eric H... :-)
February 12, 2013
Another idea to add : have the possibility to populate a field from URL or Cookie while keeping the field unhidden. This would be useful when email is sent by third party with links toward my Marketo landing page. The URL in the third party email may contain info in URL parameters such as
info.mydomain.com/mylandingpage.html?lname=doe&fname=john&email=jdoe@mydomain.com

Using this, the form would appear pre-populated, even though the lead is not actually in the Marketo database.
February 12, 2013
And also : have a display value editor for select, radio or checkbox fields to make it easy to change display values. The :: notation that we have to use today is a nightmare for long lists...

My 2 cents
February 12, 2013
Another idea to add : have the possibility to populate a field from URL or Cookie while keeping the field unhidden. This would be useful when email is sent by third party with links toward my Marketo landing page. The URL in the third party email may contain info in URL parameters such as
info.mydomain.com/mylandingpage.html?lname=doe&fname=john&email=jdoe@mydomain.com

Using this, the form would appear pre-populated.
February 5, 2013
just an update to Brice's note

to always have the latest and greatest jqurey from google leave off the .8.3 and ie.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Cheers,
Eric 
February 4, 2013
Or partner with someone who knows forms!  Mail Chimp seems to be leading the way with reaching out to other industry leaders and integrating with them.  If this was an option, we'd do it. https://blog.mailchimp.com/unbounce-form-integration-with-mailchimp/ 
BDx
New Participant
February 4, 2013
@Ben R

Just saw your question. You can modify specific labels in the form using jQuery as long as those labels have unique text in them that you can reference. With jQuery you can find an item and modify it based on the item's contents.

I know you shouldn't have to do this, but today you can work around Marketo's lack of [Fill in the Blank] with a bit of code.

Say you have a label with the text "Check here to receive Wednesday emails."

You can address this label and set a new CSS class called "my_class" like this:

$('label:contains("Wednesday")').addClass("my_class");

You can paste that into a custom HTML block in your landing page and it should work. You can also test the jQuery in the JavaScript console in Chrome, for example. Then once it works you can paste it in.

I've found the ":contains()" qualifier a bit difficult at times. So an alternate approach is the following. It's more reliable, but also a bit more code:

// loop through all labels, find the one containing Wednesday and add the CSS class
$('label').each(function() {
  if ($(this).text().indexOf("Wednesday") > -1) {
     $(this).addClass("my_class");
  }
});

This can also be condensed down to one line as follows:
$('label').each(function() {if ($(this).text().indexOf("Wednesday") > -1) {$(this).addClass("my_class");}});

I know this is all a bit painful. But if you focus on the words "Wednesday" (a unique phrase in your label) and "my_class" (the class you want to use to style the label) and just replace those to fit your purpose, then this should work for you.

NOTE:
I've used the $ sign to reference jQuery. In your environment it might be "$jQ", depending on who created the template. You can view source and search for both and update my code accordingly. If neither one seem to work, then you can add this to the <head> of your template:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Hope that helps. Hope Marketo stops making me a better jQuery coder soon. :)
February 4, 2013
Yes thanks for offering to help Rafael, but Veronica is correct in asuming my underlying point. Yes I could research every possible work-around (cough-solution) but at that point... what's the point. Why pay large sums of money for tools that aren't up-to-date and fully functional? Why not just use a developer at a certain point?

Yes Brice, some sort of picket should be in order. Although since sending me to Summit to attend isn't even being considered, I can see my request to just go there and picket falling short as well.