👉 Important Update About Horizontal Forms 

  • 2 November 2017
  • 32 replies
  • 108 views
Jess
Rank
Userlevel 7
Badge +1
  • Jess Unbouncer
  • Former Community Manager @ Unbounce
  • 831 replies

Big news from Unbounce HQ! :spinbounce:

We’re excited to announce that in the coming weeks, you’ll be able to set your landing pages and overlay forms horizontally natively within the Unbounce app! No more workarounds or custom scripts, just drag, drop and convert!

⚠️ However, there’s some important information that goes along with this. Please read on…

Although native horizontal forms will be starting to roll out November 14, and should be available to everyone by November 30th, we wanted to give you a heads-up as we’ve had to make a few changes to how our forms are built.

If you’ve added custom code that targets the forms on your pages or overlays, there is a possibility that your forms may be adversely affected by this release (i.e. your forms may no longer look or function as before).

PLEASE NOTE: Our new form functionality will only take effect, possibly compromising your custom code, if you re-publish your landing page or overlay. If your page or overlay is currently published and remains that way, it will continue to function as normal. If you’d like further clarification on whether your scripts will be effected, comment on this thread and we’ll sort you out.

If you haven’t created any custom code targeting forms, feel free to ignore this warning and just bask in the exciting glow of new features coming to our page builder! 🎉

For those of you who have created custom scripts, there’s more information here into the changes we’ve made on the forms. We hope this will help you in making any applicable changes needed to your scripts.

If you have any questions, hit reply on this post and we’ll be happy to provide more information! 👇

32 replies

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

Brian_Holt

Hi @mae!

The label placeholder script won’t be affected. And we’ll have native placeholder text available after a bit more testing so you won’t need to use the custom script anymore 🙂

Brian_Holt

Hi @Etienne! It looks like both your scripts, Mask and CTM, will be fine. These scripts deal with the input values and the change to forms is strictly visual.

You’re probably already aware, but if you add or remove form fields that are using Mask, you may need to reconnect them. For example, if you’re using Mask on a field named “#phone_a” like:

<script>
$j(function($j){
  $j("#phone_a").mask("+33 1 99 99 99 99");
});
</script>

and you replace that field with a new one named “#phone_b”, you’ll need to update your function like:

<script>
$j(function($j){
  $j("#phone_b").mask("+33 1 99 99 99 99");
});
</script>

Feel free to reach out if you need a hand!

E

Tx a ton Brian.

M

You guys rock! Thanks @Brian_Holt

M

Form boxes are side by side in columns vs. stacked on top of one another 🙂

Brian_Holt

Hi @leah.ann!

I don’t believe your script will be affected. We haven’t changed the submit button itself, but we have changed some of the structure and classes wrapping the fields.

You should be in the clear!

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!)

Zoe_Tattersall
Userlevel 6
Badge +3

Awesome, I’ll be sure to test it out first 🙂

We’re more than just your type. We do awesome, too. And website design, graphics, product photography, video content & more. https://sevahcreative.com
iumbs

Hi @Jess, thank you for the update.

We are using custom scripts heavily inside our landing pages, in order not to just collect emails, but to let people signup to our website right inside Unbounce (so server-side data validation is necessary).

Some examples are:
• https://benvenuto.cortilia.it/spesa-online/ —> cortilia_1_1.js
• https://benvenuto.cortilia.it/spesa-online-classico/ —> cortilia_1_0.js

The scripts are identical for the most part, but version _1_1 also inject a second button to the form to redirect visitors to a dedicated page in our website to let them signup with Facebook/Google.

Do you think our scripts will be affected by the update?

Thank you,
Umberto

M

This is awesome!!! Can’t wait to try it out, thanks guys!

We have a form label script to our pages, do you think it’ll be affected? From: Form titles in fields

Brian_Holt

Hi @iumbs! I’m one of the developers who worked on this feature. I looked into your scripts and I believe they should be okay, but I recommend duplicating the page to test it out when the feature rolls out. Specifically, I have concerns on the inline errors that are attached to the form, presumably used for the server-side validation you mentioned. There’s a possibility they may not appear where you’re expecting them to.

Horizontal forms changes our element wrappers (the divs that contain the label, input, and error field) to flex box elements to ensure the inputs span the entire width of the form. If your inline errors rely on absolute positioning they may not appear in the correct spot. If they’re simply inserted into our element wrapper, as it looks like they are, I think you should be fine.

If you’d like more details or have any other questions please reach out!

Brian_Holt

Hi @Daniel_Gillen

When fields within a form (like inputs, checkboxes, etc) are displayed side by side, the community has called that “Horizontal Forms”. By default, Forms in Unbounce are “vertical” as in each field takes its own row, stacking on top of each other.

The community has used JavaScript to get this effect, but we’re about to release as a standard option in the Unbounce Builder.

I’ve included a little gif that toggles between a “vertical” form and a “horizontal” to make things a little clearer. When there is 1 column, it’s vertical. When there are 2 (or more) columns, it’s horizontal.

horizontal-forms

Hope that makes sense, but let me know if you’d like more clarification!

B

We’re in the same boat as Chris. Was the horizontal form feature not rolled out on Nov 14th?

Jess
Rank
Userlevel 7
Badge +1

Hey @Chris_Collis and @BrunoLifts!

Thanks for reaching out (and apologies for the delay in my response!)

We did a slow release of the horizontal forms in the builder. The process began on November 14 and will be available to everybody on November 30th.

If this is something you’d like to be enabled sooner than the listed dates, please send me a DM and I’ll get you set up. Sorry for any confusion!

R

Hi

were using multi part forms using a script the Unbounce team recommended
(but not an unbounce product), we did have some issues the other day but
seems ok now. Can we continue to use them?

Sean

Jess
Rank
Userlevel 7
Badge +1

Hey Sean!

If the problem has resolved itself I would assume that you’re in the clear, however, to be sure, would you mind telling me which workaround you’ve implemented on your page?

I’ll keep an eye out for your response 🙂

K

Hi, in the editor my forms are hosed. I cannot republish my pages with because the form field widths have all been automatically adjusted somehow and I cannot get them back to the right width. I need some help asap and cannot get anyone on phone or chat.

Ken

Jess
Rank
Userlevel 7
Badge +1

Hey Ken!

I’m going to send you a direct message because I’ll need a bit more information in regards to which page this is effecting.

I’ll also be able to find out if this is something that our Support team is more fit to handle. I’ve notified to team to keep a heads up for your message, however they take tickets in a first-come-first-serve basis.

Hang tight!

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/

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
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>
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! 🙂

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

Hi Tony! That’s really great feedback. I’ll see what I can come up with to help make this a bit more clear 🙂

Reply


Terms & ConditionsCookie settings