> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Customizing the style of a contact form

The contact form that you add gets adjusted automatically to the overall site style. If you're not happy with the way it looks, you can always change the style of the button and the form fields.

| ${color}[#1aa900](Tip:)To set a contact form on your site, check the [Adding a contact/ lead generation form](/en-us/article/adding-a-contact-lead-generation-form-itr7sn/) article.

Contents:
[Customizing the layout of the contact form](#1-customizing-the-layout-of-the-contact-form)
[Customizing the style of the button in the contact form](#1-customizing-the-style-of-the-button-in-the-contact-form)
[Customizing the style of the fields in the contact form](#1-customizing-the-style-of-the-fields-in-the-contact-form)

# Customizing the layout of the contact form

1. Hover over to the contact form on your website and click on the "gear":
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stilyu-kontaktn_5cs9yy.png)

2. Navigate to the **Layout** tab, where you will be able to change the layout of the fields from vertical to horizontal and vice versa:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stilyu-kontaktn_z932lq.png)
# Customizing the style of the button in the contact form

1. For that, open the editor, hover over to the contact form on your site and click on the "gear":
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stilyu-kontaktn_48yh3m.png)
2. In the form settings, open the **Style** tab and navigate to the **Button** section: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stilyu-kontaktn_17sxwe5.png)
3. Here you can change the text in the button and customize its formatting: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stilyu-kontaktn_f0otsf.png)
| ${color}[#1aa900](Tip:)The font for the button text is adjusted to the global site's font. See the [Changing site's font](/en-us/article/changing-sites-font-1hqas9r/) article.

4. You can also choose the style for your button, or select the alternative one: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stilyu-kontaktn_1n5vul.png)
|| ${color}[#ffa800](Note:)To change the style options for the buttons on your site, check the [Changing the design of a button](/en-us/article/changing-the-design-of-a-button-les3mi/) article.

5. Besides, you can upload an icon next to the button text, and change its alignment: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stilyu-kontaktn_4j7nqu.png)
# Customizing the style of the fields in the contact form

1. To access these settings, switch to the **Fields** section in the  **Style** tab: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stilyu-kontaktn_oj9w77.png)
2. Here you can choose the type of your fields — the style of its borders: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stilyu-kontaktn_o4cbsz.png)
3. You can also adjust the colors of each component in the form — borders, text, description, etc: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stilyu-kontaktn_pvx69x.png)
[Publish your site](/en-us/article/publishing-a-site-tgxmch/) for the changes to appear live.

| ${color}[#1aa900](Tip:)Don't forget to personalize the fields in your contact form according to the instructions in the [Customizing the layout of a contact form](/en-us/article/customizing-the-layout-of-a-contact-form-1fgzcyj/) article.