iFrame responsive to changing content height

Site URL: https://heidiandscott.squarespace.com/

I am trying to embed the following on my site:

<iframe src="https://www.online-rsvp.com/event/index.php?event_id=4982&embed=1&token=b3fc3df4027237dc117fd5f5ba582986" style="min-height:800px; width:100%; border:none" title="Online-RSVP.com event" onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';"></iframe>

The form is dynamic and the height is variable based on what is entered. Type "Joe Smith" into the first and last name fields.

I've tried adjusting the height to 1500px which gets the job done (no scroll bar) but it's not elegant as it leaves the too much empty space. Once the form is submitted, the content shrinks to ~300px and you won't be able to see the "Success" message unless you scroll all the way back up.

I've tried using CSS to create a responsive container, like this: https://blog.theodo.com/2018/01/responsive-iframes-css-trick/ But the content still gets cut off and the scroll is enabled.

Any suggestions to have the iframe increase and decrease in height as the form is filled out? Thanks in advance!

No way to set dynamic height with iframe. You able to set fixed height value only.