CTA (Beta) On Submit and Display of Thank You Response not Updating in Size Correctly

[navroop]

We've started integrating the CTA (Beta) into our Wordpress Site (staging environment) to replace Gravity Forms. So far, we've found the experience to be mostly straightforward.

One consistent issue we're running into is for CTA Pop Ups that include a Form when the Form is submitted and a response (Thank you) message is shown, the Pop Up

• does not resize itself down to just the height needed without the Form being displayed 
• nor, does it retain the left hand column's formatting (column is a different color -- blue -- but on submit that column resizes, but overall Pop Up does not, suddenly leaving a weird white block under that left hand column)

Pictures below. Red on left masks static content, Red on right masks form field entries.

You can see part of the webpage (grayed out) behind the form before and after submission.

Ideally, the Window would resize down to just what's required to show the left hand column content and the form response, or the left hand column's blue color would continue down that column the entire vertical length of the still large pop up on the screen.

We've tried changing the background color for the whole form to blue, in the hopes that the right hand column where the response is (which has a background set to white) still takes up that whole side, but instead it just inverts the problem, the large "reverse-L" shaped block goes from white to Blue, which then makes the right side ugly.

Surely it's a bug as older Forms from Hubspot did not have this issue (we used them for ages, before devs moved to Gravity Forms, which we're migrating back off of due to security reasons).

Are others running into this? If so, how did you resolve it?

Please help!

[BérangèreL]

Hi @navroop,

Thank you for reaching out to the Community and I apologize for the delay in responding as HubSpot was observing the annual Week of Rest last week.

I understand that you are using the Beta CTAs with a popup form and you would like that, after the form is submitted, the popup resize automatically and also, the layout stays the same, is that right, please?

- When creating the CTA, were you using a HubSpot template or did you start from scratch? Which template did you use?
- In the design tab, in the "sizing" options, what did you select?

The more info, screenshots (without sensitive/confidential information), and details you can provide, the better the Community can assist.

I'd like to invite a couple of subject matter experts to this conversation: @HFisher7, @StjepanGrcic and @Phil_Vallender do you have any suggestions please, to help @navroop with the resizing and look of the CTA popup after submission?

Thanks a lot !

Have a good day!
Bérangère

[navroop]

Started from Scratch. Two column layout as depicted. Here are screenshots.

Support did confirm they were able to replicate, but did not have an immediate solution.

See screenshots below.

[BérangèreL]

Hi @navroop,

Thank you for the additional information and the screenshots!

You did right to contact our Technical Support Team: this is your best point of contact since it is included in your subscription and they will be able to provide real-time assistance for this matter 🙂

Since this feature is in Beta at the moment, it is indeed expected that such behavior happens.

I do not have a timeframe but our Product Team is working on enhancing this.

I hope this brings clarification!

Have a nice day!
Bérangère

[navroop]

Thanks. I'm assuming it's a bug, as it differs from all other auto-form layouts.

Is there a workaround you all can suggest? A CSS property / value that can be set under custom CSS on the pager that would address this?

Alternatively, has product dev provided any insights into when they'll be correcting it?

[BérangèreL · Accepted solution]

Hi @navroop,

Thanks for your message!

Our Product Team is investigating the cause of this behavior to confirm whether it is a bug or not. I don't have a timeframe at the moment, unfortunately.

I can see that you currently have a ticket open with our technical support team. It looks like the team is currently investigating this. They will get back to you on this before being able to explore possible workarounds for you.

I would invite you to continue working with them as this may require deep troubleshooting and direct access to your account.

Thank you!

Bérangère

[navroop]

They've managed to address the bug late last week / early this week. We've moved the CTA (beta) with submission response resizing fix into prod site as of last night.

[navroop]

I've provided the screenshots and information below to Support this morning. 

I was attempting to fix this via a CSS override myself, but this post from earlier this year leads me to believe that may not be possible for Popup Forms the way it is for embedded forms...

 https://community.hubspot.com/t5/CMS-Development/Custom-CSS-for-Pop-Up-CTA/td-p/737146

If it was possible the embedded forms' CSS can be edited in Wordpress via Custom CSS then it would probably look something like... 

The body part might need a '.' to be correct, always forget when that's needed vs not. But, I've tried the above and variations and it doesn't have an impact for Popup Forms the way that same custom css area has an impact on embedded forms. 

So, alternatively to fixing / solving my original question any insight into how to do CSS overrides for CTA PopUps on Wordpress?

The inclusion of a CTA Popup is accomplished through this section which works fine.

which is under here on the button setup:

[navroop]

The offending element appears to be this in the CSS for the form. 

Turning off {height: 100vh;} in <body>, per the images below, seems to make the form autocorrect size on its own. It displays correctly when showing the full form and then resizes to the right size on submission.

I'm trying to see if I can make this override work from Wordpress, but given this a CTA (beta) Popup and not an embedded form, not sure it'll work.

[navroop]

Will do. We've managed to perfectly address everything else with our transition off of Gravity Forms to straight embedded Hubspot Forms and / or CTA (beta) Popups from Hubspot. So, this is the last thing holding us up from transitioning to prod.