Embed form - Change error message position

Develop, Build & Integrate APIs & Integrations
1

I am trying to create Email form in my website as “form embed code”. Using JQuery, i have changed all the elements styles as per my website design. But when i try to change error message position, its not allowing me. I am using below page as reference

https://developers.hubspot.com/docs/methods/forms/advanced_form_options

In the given page, i found errorMessageClass property is used to change error message styles. But using that i cant change the position (left to center). Is there any other option available to change error message position?

2

Hey @VijaybabuR,

Could you try using css to position the errorMessage? An example:

label.hs-error-msg {
float: right;
 }

This would float all error message to the right.

Let me know if this works for you!

3

Thanks Wendy for your reply. I tried below code. But its not working.

label.hs-error-msg {
color: green;
float: right;
text-align: right;
}

i believe this error message element is getting created when user enters wrong mail address & default style is also created for hs-error-msg. We dont have any option to override this. Please let me know if any options there.

4

Hey @VijaybabuR,

Do you mind sharing with me the page that has the HubSpot form on it? I would like to do some testing on my end.

5

Attached my test script. Update Portal ID, Form ID & try it.

<html>
<head>
<style>
.testsubmit {
background: #0066A2;
color: white;
border-style: outset;
border-color: #0066A2;
height: 50px;
width: 100px;
font: bold 15px arial, sans-serif;
text-shadow:none;
}
.testform input[type=text] {
color: #f23;
 font-size: 100px;
 height: 18px;
 padding-left: 5px;
 margin-top: 3px;
 outline:none;
}
.validationClasses {
 color: blue;
 float: 'right';
 text-align: 'center';
 margin-bottom: 30px;
}
label.hs-error-msg {
color: green;
float: right;
text-align: right;
 }

label.inputs-list {
float: right;
text-align: right;
 }

.invalid.error{

 color:green;
 text-align: center;
 font-size: 20px;
 float: right;
 }
</style>
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script charset="utf-8" type="text/javascript" src="http://js.hsforms.net/forms/v2.js"></script>

<script>
hbspt.forms.create({
 portalId: "xxxxxxx",
 formId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
 errorClass : "invalid.error",
 // errorClass : "validationClasses",
 // locale: 'en',
 // translations: {
 // en: {
 // invalidEmail: "gggg",
 // blockedEmail: "Please eter nnfff"

 // }
 // },
 errorMessageClass: "invalid.error",
 onFormReady: function($form) {

 $('input[type="email"]', $form).css({
 'height': '44px',
 'width': '382px',
 'border': '1px solid #979797',
 'background-color': '#FFFFFF',
 'font-family': 'Roboto Regular, sans-serif',
 'font-size': '16px',
 'line-height': '21px',
 'text-align': 'center'

 }); 
 $('input[type="submit"]', $form).css({
 'height': '38px',
 'width': '158.97px',
 'border-radius': '9px',
 'background-color': '#000000',
 'font-size': '16px'
 });

 //$('.inputs-list label', $form).css({ 'text-align': 'center' });
 $('.input', $form).css({ 'text-align': 'center' });

 //$('.hbspt-form').css({ 'text-align': 'center' }); // to be changed

 $('input[type="email"]', $form).on( "mouseover", function() {
 $( this ).css( "border", "2px solid #115EA5" );
 });
 $('input[type="email"]', $form).on( "mouseout", function() {
 $( this ).css( "border", "1px solid #979797" );
 });
 $('input[type="submit"]', $form).on( "mouseover", function() {
 $( this ).css( "border", "2px solid #F6921E" );
 });
 $('input[type="submit"]', $form).on( "mouseout", function() {
 $( this ).css( "border", "1px solid black" );
 });

 $('label',$form).css({"display":"none" });

 },
 onFormSubmit: function($form) {
 //$('.inputs-list',$form).css({ 'text-align': 'center' });
 //$('.inputs-list label', $form).css({ 'text-align': 'center' });
 alert('hi');

 },
 onFormSubmitted: function($form) {
 $('p',$form).css({'text-align': 'center' });
 //$('label',$form).css({'text-align': 'center' });
 $('.inputs-list label', $form).css({ 'text-align': 'center' });
 }
 });
</script>
</body>
</html>
6

Hey @VijaybabuR,

Thanks for sharing the code with me.

Would you mind sharing with me the HubSpot page/external page that the page is on? Together with the steps you took to generate the form error message? If it’s more comfortable for you, you can send this information via DM to me.

The reason I asked this is so that I’m seeing the exact same error message that you’re seeing so that we’re on the same page.

7

Sorry, i cant share those information. Its a simple Email form, you can create it yourself & try it.

8

Hey @VijaybabuR,

Great, I have tried the above code using a form from my portal and I’m able to see that the error message is currently float to the right. The error message that I’m seeing is - “Email must be formatted correctly.”

I understand that you’d like to center it and what I did was to edit the css style from

label.hs-error-msg {
color: green;
float: right;
text-align: right;
 }

to

label.hs-error-msg {
color: green;
 text-align: center;
 display:flex;
 justify-content:center;
 }

and now I’m seeing the “Email must be formatted correctly.” error message is display on the center of the page.

Let me know if the above works for you.

9

No, its not working for me. Can you please send me your website URL.

10

Hey @VijaybabuR,

For sure! Here you go: https://info.wendyggx.com/testtform

11

Thanks Wendy, am seeing that its working fine.

But in my case, all the forms are generated inside iframe. I think thats why we couldnt able to control. How do we change loading all the components inside iframe into Div? is it a Server side configuration?

12

Hey @VijaybabuR,

Ahh, I think we are definitely closer to resolving the issue.

Can we check if the form setting - ‘Set as raw HTML form’ is toggled on? When this settings is toggle on, form will render as a raw HTML element on your website as opposed to inside an iFrame.

form.png
form.png1278×238 68.5 KB

Learn more here: Style your embedded form on external pages

13

Thanks Wendy for your time in completing this issue. Its really helpful for us