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

SOLVE
bg1
Member

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!

 

 

 

 

0 Upvotes
1 Accepted solution

Accepted Solutions
Ty
Solution
HubSpot Employee
HubSpot Employee

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.

Hope this helps you out!

-- Ty

View solution in original post

4 Replies 4
ndwilliams3
Key Advisor

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.

0 Upvotes
Ty
Solution
HubSpot Employee
HubSpot Employee

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.

Hope this helps you out!

-- Ty

View solution in original post

bg1
Member

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">');

 

0 Upvotes
ndwilliams3
Key Advisor

@Ty

That's an awesome hack! Thanks for info.

0 Upvotes