👉 Important Update About Horizontal Forms 

  • 2 November 2017
  • 32 replies
  • 110 views
Show first post

32 replies

M

You know for us novices, a short video of what you are talking would really be nice.

We appreciate your business, if there is anything further we can do please contact us.

Warmest regards,

Tony Bonifacic

Jess
Rank
Userlevel 7
Badge +1

Hey @Samantha_Blaser!

Are you using this workaround for local storage to autofill function? If that’s the case, you’re all good! 🙂

S

Hi @Jess, thanks for the update!
We use a javascript to autofill the field names in our forms. Just wanted to see if you thought the new changes would impact our form fields. (script is below)

<script type="text/javascript">
  lp.jQuery(function($) {
  
    // Define your placeholder texts here, corresponding to Unbounce's field names
    var placeholders = {
      "FirstName": "First Name",
      "LastName": "Last Name",
      "Email": "Email",
      "Phone": "Phone"
    };
    // Sets the HTML5 placeholders
    for(var id in placeholders){$("#"+id).attr("placeholder",placeholders[id])}  
    // Polyfill to add support for browsers like IE<=9
    if(document.createElement("input").placeholder===undefined){$("html").attr("data-placeholder-focus","false");$.getScript("//jamesallardice.github.io/Placeholders.js/assets/js/placeholders.jquery.min.js",function(){$(function(){var e=window.module.lp.form.data.validationRules;var t=window.module.lp.form.data.validationMessages;lp.jQuery.validator.addMethod("notEqual",function(e,t,n){return this.optional(t)||$(t).attr("data-placeholder-active")!=="true"||e!==n},function(e,n){return t[$(n).attr("id")].required});for(var n in placeholders){if($("#"+n).length){if(typeof t[n].required!=="undefined"){e[n].notEqual=placeholders[n]}else{e[n]={}}}}})})}
  });
</script>
Johnny_Opao
Userlevel 3

Hey @Canuck_Place @Zoe_Tattersall

Took a quick peek of those scripts. From quick glance those should work exactly as they did before. We tried to make our form code as backwards compatible as possible. If it’s a popular script found on this community it will likely still work.

A possible caveat is if you do use the new horizontal form feature to layout your fields into multiple columns. We can’t guarantee some of these scripts will work with this new dimension.

That said, before you hit that ‘publish’ button be sure to check the results in ‘preview’. Preview is a great way to validate any potential conflicts before you take those changes live.

Johnny

Zoe_Tattersall
Userlevel 6
Badge +3

This is SO exciting @Jess! I never got around to testing out the horizontal form script on my pages, but will definitely do this once it rolls out in the builder. 😍

I have a few scripts/css in place on most of my pages – will it affect these?

I had a scan through the Google doc, but not exactly clear …

  1. Form placeholders

  2. Form inline error messages/CSS

  3. Form CSS styling –

    <style>

#lp-pom-form-962 .lp-pom-form-field input[type=text] {
 color: #333;  
 }

#lp-pom-form-962 .lp-pom-form-field textarea {
color: #333;
} 

#lp-pom-form-962 
.form_elem_email, 
.form_elem_first_name, 
.form_elem_last_name, 
.form_elem_phone_number, 
.form_elem_how_did_you_hear_about_the_program, 
.form_elem_where_do_you_live {  
   font-family: 'Open Sans', sans-serif;
   font-weight: 300;
   color: #333;
}
</style>
We’re more than just your type. We do awesome, too. And website design, graphics, product photography, video content & more. https://sevahcreative.com
Jess
Rank
Userlevel 7
Badge +1

Hi there!

If you’re referring to the date picker found in our documentation here, your script won’t be affected. All good! If it’s a different script, let me know and I’ll make sure you have all the information you need!
(PS - Go Canucks go!)

C

We added a custom date picker to this page. Do you think it’ll be affected?
https://www.canuckplace.org/team-canuck-place-birthday-page/

Reply


Terms & ConditionsCookie settings