How to customize the Form

forms

#1

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.

  1. 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)

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

  1. 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?


#2

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;
}
  1. 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).
  2. You can try the following to center the form submit button in it's container:
.hs_submit {
    text-align: center;
}

#3

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.

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


#4

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?