How to customize the Form

[jini]

Hi,

I'd like to customize the HubSpot Forms.
Please see the below:

I'm trying to change the way the options are presented on a HubSpot Form.
For e.g - in a Radio button form field, instead of seeing the radio buttons aligned vertically (as it exists today), I'd like to change the radio button options to align horizontally.

2. Even after I have changed the form error text to Korean, there's still one line of text in English. (‘PLEASE COMPLETE ALL REQUIRED FIELDS.’)
   Please refer the attached file.
   (name: form-error-message-screenshot)
   
   

   form-error-message-screenshot.jpg744x197 12.1 KB

Also, I'd like to change the color of the error text.

3. I want to place the submit button on the center (as it is placed on the left by default).
   Also, I’d like to change the color of the submit button.

I tried to edit the page css file and added this css file to the landing pages.
But it didn't work.
Also I edited the custom HTML module in the landing pages, but it also didn't work.

Any idea?

[Derek_Gervais]

Hi @Eunjin,

I thought that the key for that message was required, but you seem to already have that included. Can you send me a link to the page in HubSpot so that I can take a closer look?

[jini]

Thanks, @Derek_Gervais

I'd like to ask about Qn2.

I already added the required key, but that message is still shown.
Please see the attached screenshot.

form-error-message.jpg453x545 46.7 KB

How can I find the key of that message?
I saw the referring links.

[Derek_Gervais]

Hi @Eunjin,

1. You can try something like this to get the checkbox inputs to sit in two columns:

li.hs-form-checkbox {
    float: left;
    width: 50%; /* This may need to be adjusted based on margins */
    list-style: none;
}

2. I believe that error message is tied to the required key; you should be able to customize the translation by passing language objects into the translations parameter of the form embed code (see below).
3. You can try the following to center the form submit button in it's container:

.hs_submit {
    text-align: center;
}

developers.hubspot.com

How to customize the form embed code

This is a list of options that you can use if you just need to tweak a default hubspot form. If you need complete control over the styles and actions of your form, you will still want to use the Forms API.

designers.hubspot.com

HubSpot form markup

This article explains the markup that is rendered by the form's embed code and includes selectors that can be used to style the various field types.