1) Iframes on iOS devices are shown not in a window but on full length except if you enclose them specifically in a div. This is not the case for CB terms field. If I set a height for the div#field_id, then the label is enclosed and will appear only after scrolling ALL the iframe length

The solution is to separate the check-box/label from the iframe and enclose each in a separate div.

The label and the iframe are already separate. The iframe is not inside the label. However you're setting the height incorrectly causing an overflow issue, which is why you're seeing strange behavior. Do not set a height on "div#field_id" use the "Height" parameter in the Terms & Conditions field under Parameters > Display to set a height on the iframe only.



There could even be some other styling present on your site causing this. Have you tried with default protostar template to see if issue persists?

2) EU law for double opt in to accept terms is valid since a couple of years already. Basically you need to click on the check box to show your acceptation, then it launches a javascript alert window asking you to clic to accept the terms a second time (double opt in) or giving you a second chance to cancel it. (see iTunes terms for instance)

Can you please provide proof of this law and some examples that I can review. All I can find in regards to double opt-in is regarding newsletters for spam protection, but nothing in regards to accepting terms. Regardless am very interested in your findings so we can work towards fixing this.

The height parameter sets a height directly on the iframe. You're setting a height on the field row. Since the iframe has a static height set on it you're probably going to have overflow problems. For example if the div has 100px height and the iframe has 200px height you'll have overflow and things won't behave properly. You need to remove the height being applied to the div via CSS and set the height only on the iframe. The checkbox is then below the iframe properly.

One option could also be to have your terms and conditions as a language string then use the Text usage and specify the terms and conditions as your language string. Next you can add overflow CSS to the container div to have it scrollable. This avoids having to use an iframe entirely and maybe fit your needs better.

As for EU laws, as soon as your conditions mention user data and email, you have to have this double clic setting. This is why ALL big websites use them.
If you need the law, I can retrieve it but honestly this is really usual stuff....

Again, I can't find any information confirming this. Facebook doesn't even have double opt-in and simply has "By clicking Sign Up, you agree to our Terms and that you have read our Data Policy, including our Cookie Use.". So with that Facebook isn't even EU compliant. Google is also a simple 1 checkbox without a double click. Yes, providing further information would be of great help. No, this is not usual stuff; I'm in the US and I have no idea what your country by country laws are and how they apply to the web.

No ! this is a must for iOS devices, please google it to check that iframe MUST be within a div with height set to be displayed properly on iOS

Ok, so you're just wanting to do a responsive iframe. I understand, will implement responsive iframe support directly built into it for a later release. This is actually directly supported by Bootstrap as seen below.

getbootstrap.com/components/#responsive-embed

forge.joomlapolis.com/issues/5573

As for Facebook and Google, there is a simple opt in as they dont sell things. If you combine acceptation and selling best practice is to have TWO clics, one to accept and one to confirm, which is Apple policy since two years and which is what we would like to implement also.

Then you'll need to implement a custom solution as we don't have anything to fit your needs at this time.