topic Re: Form - Dependent fields repeating for 100 inputs. What's the best approach? in CMS Development

Form - Dependent fields repeating for 100 inputs. What's the best approach?

bg1 — Wed, 25 Jan 2017 22:28:24 GMT

Hi, I'm working on a complex project with multiple forms and dependent inputs, and I'm wondering what would be the best approach. Basically, the user is reviewing products he likes (in a list of 100 products, separated by categories). The users sees a checkbox + image of product + name of product (for each product). When a box is checked, 2 new fields have to appear right below it for rating and commenting on that checked product.

I was thinking of separating each category on a separate form (about 6 categories) so the page isn't too long to load.

1st question: Is there a way to reuse the rating and comment fields, or do I really have to create 100 rating, and 100 comment fields?

2nd question: Is there a way to work on my form in a text editor (Sublime) and once everything is to my liking, importing it to Hubspot?

3rd question: can I add content (let's say the product image for example) in jQuery on document load if it's not possible to add an image next to a checkbox? Or will that create problems? Or adding it with the css content value?

If someone has another idea on how to approach this, please let me know! Thanks!

Re: Form - Dependent fields repeating for 100 inputs. What's the best approach?

ndwilliams3 — Wed, 25 Jan 2017 23:28:01 GMT

From experience, Hubspot is not the best tool for complex, multipage forms with conditionals. I would suggest using Surveymonkey and the integration with Hubpsot for this. You can use rating and matrix fields that are better for your intended purpose.

Re: Form - Dependent fields repeating for 100 inputs. What's the best approach?

Ty — Thu, 26 Jan 2017 15:15:33 GMT

Hi there @bg1,

Conditionals in HubSpot forms are always tricky, but I'm going to do my best to help you out 🙂

1. The way the forms integrate with the Contacts DB won't allow you to reuse forms, because when you create a custom field/property, it updates that field on your contact record. So for example, if I checked favorite product 1, and I fill out the 2 conditionals that pop up, that data would be stored on my contact. But as soon as I feel out favorite product 2, that data is then overwritten, since there is only 1 "property" to write to that matches the paramaters.

2. The forms are auto generated by us on the server side, so you wouldn't be able to re upload. HOWEVER, there is a somewhat 'hacky' solution to this, that I'll explain below. *

3. I've never actually tried this, but from messing with inspect element, it seems plausible. But after looking at the code, you may be hard-pressed to be able to target down to a specific check box ( you would probably be utilizing a lot of nth-child).

** Long before I was working at HubSpot, I worked for a software company. My job title said "developer" but really it was more about pushing the capabilities of HubSpot's tools and COS. What I have found out is that, you can wite a form in complete HTML, and using the class/reactid on your embedded form, you can create a form that will successful update to your contacts DB. This solution actually doesn't use any custom JS to POST either.

Although I can't recommend this for a very serious implementation, My Fundraising Grader may be on the right track for what you are looking to to accomplish.

See the Pen &amp;amp;lt;a href='&amp;lt;a href="http://codepen.io/TyStelmach/pen/yNxMeJ/'&amp;amp;gt;Fundraising" target="_blank"&amp;gt;http://codepen.io/TyStelmach/pen/yNxMeJ/'&amp;amp;gt;Fundraising&amp;lt;/a&amp;gt; Grader&amp;amp;lt;/a&amp;amp;gt; by Ty Stelmach (&amp;amp;lt;a href='&amp;lt;a href="http://codepen.io/TyStelmach'&amp;amp;gt;@TyStelmach&amp;amp;lt;/a" target="_blank"&amp;gt;http://codepen.io/TyStelmach'&amp;amp;gt;@TyStelmach&amp;amp;lt;/a&amp;lt;/a&amp;gt;&amp;amp;gt;) on &amp;amp;lt;a href='&amp;lt;a href="http://codepen.io'&amp;amp;gt;CodePen&amp;amp;lt;/a" target="_blank"&amp;gt;http://codepen.io'&amp;amp;gt;CodePen&amp;amp;lt;/a&amp;lt;/a&amp;gt;&amp;amp;gt;.

Hope this helps you out!

-- Ty

Re: Form - Dependent fields repeating for 100 inputs. What's the best approach?

bg1 — Thu, 26 Jan 2017 19:36:43 GMT

Thanks for the quick reply!

Regarding #3: I found a way without using nth-child. It also englobes it in the label for, so clicking it also selects the checkbox. Then again, the only downside is I'll have to create a line for each of my 100 products. 😕

$('label[data-reactid*="nfoa_prods_hair1"]:not(label.hs-form-booleancheckbox-display)').append('<img src="product-img.png">');

Re: Form - Dependent fields repeating for 100 inputs. What's the best approach?

ndwilliams3 — Thu, 26 Jan 2017 19:48:15 GMT

@Ty

That's an awesome hack! Thanks for info.