APIs & Integrations

VijaybabuR
Member

Embed form - Change error message position

SOLVE

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?

0 Upvotes
1 Accepted solution
WendyGoh
Solution
HubSpot Employee
HubSpot Employee

Embed form - Change error message position

SOLVE

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

 

Learn more here: Style your embedded form on external pages

View solution in original post

0 Upvotes
12 Replies 12
WendyGoh
HubSpot Employee
HubSpot Employee

Embed form - Change error message position

SOLVE

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!

0 Upvotes
VijaybabuR
Member

Embed form - Change error message position

SOLVE

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.

0 Upvotes
WendyGoh
HubSpot Employee
HubSpot Employee

Embed form - Change error message position

SOLVE

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.

0 Upvotes
VijaybabuR
Member

Embed form - Change error message position

SOLVE

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>

 

0 Upvotes
WendyGoh
HubSpot Employee
HubSpot Employee

Embed form - Change error message position

SOLVE

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. 

0 Upvotes
VijaybabuR
Member

Embed form - Change error message position

SOLVE

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

0 Upvotes
WendyGoh
HubSpot Employee
HubSpot Employee

Embed form - Change error message position

SOLVE

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.

0 Upvotes
VijaybabuR
Member

Embed form - Change error message position

SOLVE

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

0 Upvotes
WendyGoh
HubSpot Employee
HubSpot Employee

Embed form - Change error message position

SOLVE

Hey @VijaybabuR,

 

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

0 Upvotes
VijaybabuR
Member

Embed form - Change error message position

SOLVE

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?

0 Upvotes
WendyGoh
Solution
HubSpot Employee
HubSpot Employee

Embed form - Change error message position

SOLVE

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

 

Learn more here: Style your embedded form on external pages

0 Upvotes
VijaybabuR
Member

Embed form - Change error message position

SOLVE

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