Organizing smart form fields for progressive profiling

[Shay]

Migrated from legacy feedback forum with 23 votes.

With smart form fields, it would be great to organize the order of smart fields within the default form.

E.g. I have 2 clusters: personal information (name, email, phone number) followed by company info (company name, industry, job title).

I made phone number and job title 'smart' so they can be replaced by 'number of employees' and 'biggest marketing challenge'.

So this means that, when I already have the phone number of someone, it will be replaced by #employees. This is "weird" since in the order of the form, I ask #employees before asking the company name. But it's also weird to put phone number under all the company data. So re-ordering the form with smart fields would be the solution here.

This is just a detail, but this simple feature would increase the effectiveness of my forms.

[Shay]

Hi HubSpot Community,

My name is Joe, I'm the Ideas Forum Manager. I wanted to thank you for your thoughtful comments on this post. Your feedback helps us build better products.

I think this a great Idea! I'm happy to say we are currently reviewing this request and its feasibility. At this time I don’t have any details around timing or delivery, but all updates will be relayed on this thread.

I am changing the status of this idea to Being Reviewed as our team scopes out this work.

Best,
Joe

[liz-mavrck]

+1 

When using Hubspot smart fields, I want to maintain the integrity and design of the Hubspot form I've created, so that I can deliver a cohesive user experience to my prospective customer. Right now, "smart fields" are "replaced" at the bottom of the form, resulting in random questions that make no logical sense. 

This isn't smart, it's poor CX.  

[WebMechanix-CB]

Agreed - we're trying to swap out demographic fields on a contact form that includes a comments box. This is causing forms to display drop down options underneath the messages box -- weird and unnatural user experience.

[amon]

Agreed, poor CX. Makes smart forms not usable.

[Ruth_B]

To ensure that we are compliant for the new GDPR, I’ve added a new consent tick box to the end of our whitepaper download forms which users must tick if they want to download a whitepaper. I’ve added a rich text separator above this field which provides links to our privacy policy and terms of use. The form uses smart fields for everything apart from the email address.

I would like the consent tick box to not be a smart field so that it appears every time a user completes the form, however, if it isn’t a smart field, its position on the form changes as known fields are hidden and unknown fields are added to the bottom of the form. This is a problem as it looks strange having the consent field in the middle of the form. It would be really helpful if the position of certain fields could be fixed when using smart fields. 

[joerg]

 Same here, having checkboxes move to the middle of the form looks super strange and makes smart forms borderline unusable.

[pingle]

 Functionality to rearrange the queued progressive fields within forms. 

[Janneke]

Being able to organize the queued progressive fields within forms would make this functionality much more attractive. Asking their email preferences before asking their company name and phone number is just weird, but I'd like to keep asking their email preferences every time. 

[cherylfalk]

I have the same concern as @Ruth_B! I am trying to make current forms GDPR compliant by adding a Privacy Policy statement and an "I agree to receive..." checkbox at the bottom of all of my forms. When I have smart fields included in my forms, Hubspot is serving the rich text field and "I agree" field at the top of my forms.

Hubspot, will you please devise a way to ensure that the rich text field and "I agree..." field are always placed at the bottom of forms? Please help us keep our forms looking good and get GDPR compliant! Thank you! 

[JoeDavies]

@Ruth_B @cherylfalk I just discovered this issue now to my dismay, I was always under the impression that the progressive fields would just replace those that were filled, ie, the logical approach. This is a nightmare @Shay and makes acquiring consent with progressive forms that ALSO look natural, impossible.

[JoeDavies]

@Shay @liz-mavrck @WebMechanix-CB @amon @Ruth_B @joerg @pingle @Janneke @cherylfalk
I think we can all agree that this looks ridiculous!

[cherylfalk]

I called in Hubspot support about this one and they provided a couple of workarounds. These are not optimal, but might help.

1) Make your Privacy Policy statement a separate Rich Text field under your form. On Hubspot landing pages, this is fine and easy enough to implement. If you're using the embed code for forms on a WordPress site, there's a bit more involved. (Our web guy hates me right now.)

2) Make the checkbox (or in @JoeDavies' case, Yes / No) a dependent field on the email address. Then at least the consent is tied to the email address. *The problem with that one* is that I haven't found a way to have that dependent checkbox field visible at all times. Because it's a dependent field (in my case set to the condition that "email address is not empty"), the field pops up after the user clicks submit. The user then has to check the box and click submit again. UX is horrible. (Any ideas on this one, @Shay?)

Good luck!

[KevinOlleroch]

Would be great if the GDPR compliance statement "I agree to..." could be on the bottom of every formular. 

Currently the smart formular is not usable ...

Best Regards, 

Kevin

[Uusteri]

@KevinOlleroch I completely agree, Smart forms are not usable for the moment being... 

Would be really great if a fix could be found before the GDPR law comes in place.

Thanks!

Best regards,

Philip

[JordiSintes]

Hi,

I have created a workaround. It's techy but it works.

1. Set your form as a flex-box on CSS Style:

.hs-form {
    display: flex;
    flex-direction: column;
}

2. Get the field class and set it to the parent fieldset (change the bold text in your form code):

hbspt.forms.create({
    css: '',
    portalId: 'XXXX',
    formId: 'XXX',
    onFormReady: function($form, ctx){
      jQuery('.formHubspot fieldset').addClass(function(){
        return jQuery(this).find('.hs-form-field').attr('class').split(' ')[0];
      });
    },

 });

3. Use the the CSS property order on your CSS to set the order of the fieldsets:

Example:

.hs_firstname {
  order: 1;
}
.hs_email {
  order: 10;
}
.hs_company {
  order: 15;
}

.hs_num_employees { /*custom progressive field it will appear between email and company on progressive profiling*/
  order: 12;
}
.hs_i_want_to_receive_the_newsletter {
  order: 997;
}
.hs_submit.hs-submit {
  order: 999;
}

Hope it helps!

[rafael_ibrahimi]

Same here! Functionality to rearrange the queued progressive fields within forms.

[JoeMayall]

Hi HubSpot Community,

My name is Joe, I'm the Ideas Forum Manager. I wanted to thank you for your thoughtful comments on this post. Your feedback helps us build better products.

I think this a great Idea! I'm happy to say we are currently reviewing this request and its feasibility. At this time I don’t have any details around timing or delivery, but all updates will be relayed on this thread.

I am changing the status of this idea to Being Reviewed as our team scopes out this work.

Best,
Joe