# Embed form - Change error message position

**URL:** <https://community.hubspot.com/t/embed-form-change-error-message-position/18739>\
**Category:** APIs & Integrations\
**Tags:** forms\
**Created:** [February 12, 2020, 3:34pm UTC](https://community.hubspot.com/t/embed-form-change-error-message-position/18739 "2020-02-12T15:34:19Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![VijaybabuR](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/vijaybabur/32/68653_2.png) [@VijaybabuR](https://community.hubspot.com/u/VijaybabuR)\
**Post date:** [February 12, 2020, 3:34pm UTC](https://community.hubspot.com/t/embed-form-change-error-message-position/18739/1 "2020-02-12T15:34:19Z")

</div>

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](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?_

---

<div class="post-metadata">

**Author:** ![WendyGoh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/wendygoh/32/42320_2.png) [@WendyGoh](https://community.hubspot.com/u/WendyGoh)\
**Post date:** [February 13, 2020, 5:23am UTC](https://community.hubspot.com/t/embed-form-change-error-message-position/18739/2 "2020-02-13T05:23:48Z")

</div>

Hey @VijaybabuR,

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

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

```

This would float all error message to the right.

Let me know if this works for you!

---

<div class="post-metadata">

**Author:** ![VijaybabuR](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/vijaybabur/32/68653_2.png) [@VijaybabuR](https://community.hubspot.com/u/VijaybabuR)\
**Post date:** [February 13, 2020, 7:57am UTC](https://community.hubspot.com/t/embed-form-change-error-message-position/18739/3 "2020-02-13T07:57:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![WendyGoh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/wendygoh/32/42320_2.png) [@WendyGoh](https://community.hubspot.com/u/WendyGoh)\
**Post date:** [February 14, 2020, 1:15am UTC](https://community.hubspot.com/t/embed-form-change-error-message-position/18739/4 "2020-02-14T01:15:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![VijaybabuR](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/vijaybabur/32/68653_2.png) [@VijaybabuR](https://community.hubspot.com/u/VijaybabuR)\
**Post date:** [February 14, 2020, 7:41am UTC](https://community.hubspot.com/t/embed-form-change-error-message-position/18739/5 "2020-02-14T07:41:33Z")

</div>

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

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![WendyGoh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/wendygoh/32/42320_2.png) [@WendyGoh](https://community.hubspot.com/u/WendyGoh)\
**Post date:** [February 17, 2020, 1:01am UTC](https://community.hubspot.com/t/embed-form-change-error-message-position/18739/6 "2020-02-17T01:01:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![VijaybabuR](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/vijaybabur/32/68653_2.png) [@VijaybabuR](https://community.hubspot.com/u/VijaybabuR)\
**Post date:** [February 17, 2020, 6:26am UTC](https://community.hubspot.com/t/embed-form-change-error-message-position/18739/7 "2020-02-17T06:26:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![WendyGoh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/wendygoh/32/42320_2.png) [@WendyGoh](https://community.hubspot.com/u/WendyGoh)\
**Post date:** [February 17, 2020, 8:29am UTC](https://community.hubspot.com/t/embed-form-change-error-message-position/18739/8 "2020-02-17T08:29:46Z")

</div>

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

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

```

to

```auto
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.

---

<div class="post-metadata">

**Author:** ![VijaybabuR](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/vijaybabur/32/68653_2.png) [@VijaybabuR](https://community.hubspot.com/u/VijaybabuR)\
**Post date:** [February 17, 2020, 10:14am UTC](https://community.hubspot.com/t/embed-form-change-error-message-position/18739/9 "2020-02-17T10:14:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![WendyGoh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/wendygoh/32/42320_2.png) [@WendyGoh](https://community.hubspot.com/u/WendyGoh)\
**Post date:** [February 18, 2020, 1:40am UTC](https://community.hubspot.com/t/embed-form-change-error-message-position/18739/10 "2020-02-18T01:40:40Z")

</div>

Hey @VijaybabuR,

For sure! Here you go: [https://info.wendyggx.com/testtform](https://info.wendyggx.com/testtform)

---

<div class="post-metadata">

**Author:** ![VijaybabuR](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/vijaybabur/32/68653_2.png) [@VijaybabuR](https://community.hubspot.com/u/VijaybabuR)\
**Post date:** [February 18, 2020, 6:35am UTC](https://community.hubspot.com/t/embed-form-change-error-message-position/18739/11 "2020-02-18T06:35:29Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![WendyGoh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/wendygoh/32/42320_2.png) [@WendyGoh](https://community.hubspot.com/u/WendyGoh)\
**Post date:** [February 18, 2020, 9:05am UTC](https://community.hubspot.com/t/embed-form-change-error-message-position/18739/12 "2020-02-18T09:05:58Z")

</div>

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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/9/c/9c399c2c2b1ffc1425e6b6600c983397cb5053ab.png)

Learn more here: [Style your embedded form on external pages](https://knowledge.hubspot.com/forms/how-do-I-style-my-embedded-form?KBOpenTab)

---

<div class="post-metadata">

**Author:** ![VijaybabuR](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/vijaybabur/32/68653_2.png) [@VijaybabuR](https://community.hubspot.com/u/VijaybabuR)\
**Post date:** [February 18, 2020, 11:01am UTC](https://community.hubspot.com/t/embed-form-change-error-message-position/18739/13 "2020-02-18T11:01:23Z")

</div>

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