HS form not working Properly Using Icegram WP-plugin

[subin]

Hi this is Subin, last day i have passed the COS design exam, very excited about that!

At current moment, I am trying to integrate the HubSpot form into a jQuery form on our website: https://goo.gl/JUYvdH. You can notice a HS form on TAB on left top its not closing correctly when using HS form while its working well using normal form on right top Unfortunately, I haven’t had luck yet integrating the form correctly as shown in the screenshot attached.
Does anybody has advise?
Best regards.
Subin Das

[subin]

Thanks @zwolfson for your reply,

Did you noticed one thing the size of the forms in two tabs are different, if we use a fixed width the two forms are behaving differently, if we fix the left from top to -479px you can see full form and when validation messages come its not behaving correctly.
I have given a support message to Icegram but they also have no proper reply.

Thanks
Subindas

[zwolfson]

Hi @Subin_Das,

I’m not sure I’m following you, I was suggesting changing the vertical positioning, not changing anything to do with the width. Since one form has validation and the other one does not, we should expect them to behave differently when validation for one is triggered.

-Zack

[zwolfson]

Hey @Subin_Das,

Congrats the design certification!

The form seems to be working correctly for me, however I don’t see a form in the top right so I may not be comparing it against what you are looking at. When I looked at the examples on the icegram website it seems to match up with the behavior on your site. I also don’t see an attached screenshot. I was able to submit to the form correctly.

Could you maybe try attaching your screenshot again or pointing me a little more specifically so I can help you better?

-Zack

[subin]

Sorry @Zack Wolfson

i have just added my own custom CSS then the Tab on top right disappeared,
.ig_anim_slide_in{ top:-430px !important }
.ig_tab .ig_message { max-height: 27em !important;}

Can you please check the tab now its not working

Thanks
Subindas

[zwolfson]

Hey @Subin_Das,

No worries, when I looked at it just now it appears there is a difference in the inline styling on the form on the left. Specifically the left one shows top: -61px; when the one on the right shows top:-209px; for the div#icegram_message_##### elements.

When I adjusted the one on the left to 209, they behaved the same.

Hope that helps,
-Zack