NB: I've also experimentally disabled the initCollapsibleInlineForms in experiment_form.js, and instead added the ['wide', 'collapse'] classes to the Inline classes. Let's compare what we like best after merging. I do think the custom solution looks nicer, but perhaps we can achieve this with styling rather than javascript?

Just a quick comment on what I see directly in the video, not code-related per se:

• The language is a bit hard to read on a (dark) blue background. Perhaps you can consider making the text white (with a text-shadow)
• The tabs' behavior isn't very dynamic. You have to save the experiment before you see the new sorting order or a newly added language. Would it be an idea to add some javascript to show (at least) the newly added language? Having the sorting order or the current language code of the tab in question be dynamic seems of less importance to me.

I implemented the suggested style changes, and also went down deeper in the form to control the behaviour of BlockTranslatedContent: instead of being able to add these independently of the ExperimentTranslatedContent, these will now always be set and prefilled with values from the ExperimentTranslatedContent objects of the Experiment parent. I decided to leave any dynamic behaviour for later: let's see first if users find the form usable enough without it.

Changing the order dynamically would be, by my estimate, easier than creating an extra tab with a selected language on the fly, which requires dealing with several forms which do not correspond to a database object. Requiring the user to save first before seeing a new ExperimentTranslatedContent object reflected as a tab may then just be the lesser evil, rather than potentially creating many forms on the fly, some of which won't be valid if the user only selected a language, but entered no text for the required Name field. With the tab / hidden forms setup, it would be hard to find back which of the translated content forms throws the validation error.