topic Re: How to hide email element in support form which was embedded into my website. in APIs & Integrations

How to hide email element in support form which was embedded into my website.

msrinivaskumar — Thu, 21 Mar 2019 19:09:21 GMT

How to hide email element in support form which was embedded into my website, and assign value from logged-in user email adderes to email field while document load using jqyery or java script

Re: How to hide email element in support form which was embedded into my website.

IsaacTakushi — Mon, 25 Mar 2019 18:22:19 GMT

Hi, @msrinivaskumar.

You can hide the email form field with CSS alone by selecting it and applying display: none.

You can fill the field with the user's email address a number of ways:

Append the value in an email query parameter in the URL. See this article for more information.
Pass the user's email to the identify function and trigger a page view before the form loads. This will pass the user's email into their hubspotutk cookie and HubSpot forms will detect this address.
Set the form's email field using jQuery and a variable. See this article and this article.

Re: How to hide email element in support form which was embedded into my website.

msrinivaskumar — Tue, 26 Mar 2019 16:26:04 GMT

Hi Isaac,

I could not able to find the email id field to apply CSS or apply some default value on form ready . I am using below code snippet:

hbspt.forms.create(

{

portalId: 'XXXXXX',

formId: 'aa8b5b4a-62ac-461b-a387-XXXXXXXXXXX',

onFormReady: function($form, ctx){ $('input[name="email"]').val('Brian@gmail.com').change()
} });

Re: How to hide email element in support form which was embedded into my website.

IsaacTakushi — Wed, 27 Mar 2019 21:07:04 GMT

Hi, @msrinivaskumar.

Once the form HTML renders in the DOM, you can use any of several classes and IDs to hide the email form field or its parent elements. I targeted the class hs-email. (I did not attempt to hide the field with code within the embed script.)

The same onFormReady code works for me. The only difference I see is that you do not include a ; after .change().

Is your form rendering but simply not populating the default value? Can you share a link to a sample page in your HubSpot account testing the code on this form?

Re: How to hide email element in support form which was embedded into my website.

msrinivaskumar — Thu, 04 Apr 2019 20:43:25 GMT

Thank you Isaac.

I resolved this issue using below code snippet:

});
</script>

It will hold email value on form load and hide emaild. And set the focus on email filed , reason is on keydown they applyign some validation . If ,not set focus on email field and trying to enter next field it casues to loose the value in email field (onblur validation will not happen and email id value will not persist) , it will fire required field validation on email. And then applied css to iframe head to override hubspot styles with my portal styles and branding.

Hope , it will be useful to other developers.

Re: How to hide email element in support form which was embedded into my website.

IsaacTakushi — Thu, 04 Apr 2019 19:23:26 GMT

Thanks for sharing, @msrinivaskumar!