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
- Allow Custom CSS - but TypeForm won’t allow this.
- Typeform could solve this by adding ID’s elements. Easy!!
- 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