Question

Target Answer

  • 21 June 2021
  • 5 replies
  • 299 views

I’ve been using Typeform as a premium user for over over 7 years and everything is good but i need a bit more flexibility. One of our forms uses Picture Choice for colour swatches.

(Background Info: The Form acts like a Sample Request. The customer selects the colour and pay for sample. But not every colour is available for us to post out as we have stock deliveries of samples. So That is why we need to manage this, some weeks we have none of 1 colour and sometimes we do. Taking payments for items not in stock is not even fair for the customer)

Because some colours are not in stock, we don’t want the user to select this colour. But to continually change add / remove items from a picture choice that has over 200 options is not a feasible task. It is very time consuming.

The only way I can think of is adding JQuery on the page that it is embeded on and use Jquery to Find the picture classes and add an ID for which i can add the CSS on the page. 

The JQuery works but does not work on this embed. Anyone else had this issue? 

The JQuery that i’m using is this 

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(".base-choice__Root-sc-5koeqf-0").attr('id', function (index) {
return "sample-" + index;
});
</script>
<script>
$(".fBjgAF").attr('id', function (index) {
return "xsample-" + index;
});
</script>
<script>
$('.choices-layout__ChoicesLayoutWrapper-qpux4o-1').attr('id', function(i) {
return 'page'+(i+1);
});
</script>

Testing this in browsers work fine. The JQuery finds the classes and appends the ID to the element. 

I have added this in Header and before </body> and also within the embed code. I get no errors from Inspect Element > Console. So my code is working. But for some strange reason the output from the HTML Embed of Typeform does not show my ID’s that i’m asking it to change to. 

Not every business is the same. 

Typeform could easily solve this by 

  1. Allow Custom CSS - but TypeForm won’t allow this. 
  2. Typeform could solve this by adding ID’s elements. Easy!! 
  3. Typeform could solve this by allowing answers in choices to be hidden from view! Eas!

 

Any help would be much appreciated.

Oh, i cannot even add tags in the Developer’s corner: “Jquery”, “Javascript”, “HTML”

 

Thanks

 

 

 

 


5 replies

Badge +5

Hey @rr2021 , that’s a really good question. I’ll wait for the tech brains to pick this up, in the meantime I added those tags to your post! I’ll make sure they are available for future posts. 

Userlevel 7
Badge +5

Hi @rr2021 Apologies for missing this! We don’t currently support custom code on our forms, so any code that’s added is added at your own risk. 

That said, I’m tagging @mathio to see if they happen to have any advice that would be helpful for you. :grinning:

Userlevel 7
Badge +5

I think @picsoung did an article on this. Would something like this help you @rr2021 ?

https://medium.com/typeforms-engineering-blog/make-typeform-fields-dynamic-using-serverless-11f61a08003

Userlevel 7
Badge +5

Hi @rr2021 
As ​​​@mathio mentioned I would not recommend modifying the form directly via jQuery but instead use our Update form to modify your form when they are changes on your stock.
Or have a script regularly sync your stock with choices in your typeform.

If you really want to go the route you are exploring, you should probably build the logic using Google Tag Manager instead. the GTM tag would be included in your typeform, and you will have access to the DOM of the form and can modify it.

Hope this helps :)

Hi first of all thank you all above for your responses, especially from the TypeForm staff and developers! Wow! 

For Gabriel. Thank you Gabriel for trying to reach them and for adding the tags. Much appreciated. 

For Liz. Thank you for tagging Type form staff. 

For Mathio. Thank you! That article is amazing and shows that Dynamic elements can be integrated with TypeForms using API’s, Amazon Lambda and Serverless deployment. This is fantastic, and although this is something that i think is a great solution for large companies, but i don’t think my skillset or knowledge, I don’t think i’m capable of integrating this and will cost more. The cost for this work around development against the option of hiding an choice answer with a toggle seems more one sided. 

For Picsoung. wow!! Thank you for your amazing response. I do like that idea of the using the Update Form API, this seems like a manageable solution. So to confirm, if I understand what you mean, i have 3 choices?

  1. Update Form API
  2. Write a script to sync stock
  3. Google Tag Manager

You mentioned - “having a script to regularly sync stock with choices” - i presume this is separate than the Update Form API? If I use the script to regularly sync stock, where would i add this script?

I don’t want to use the JQuery hack method has that's unconventional and not a correct long term solution for a form that is live and taking payments! 

 

Thank you all TypeForm staff for your replies! 
Look forward to hearing back

Reply