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.
Tip: To set a contact form on your site, check the Adding a contact/ lead generation form article.
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/fa84b4d83a50e800/mockup-75-1_bd8t4m.png)
In the form settings, open the Style tab and navigate to the Button section:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1027-7_1yq9fpk.png)
Here you can change the text in the button and customize its formatting:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1028-2_n9v4bv.png)
Tip: The font for the button text is adjusted to the global site's font. See the Changing site's font article.
You can also choose the style for your button, or select the alternative one:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1029-2_1qd0h8n.png)
Note: To change the style options for the buttons on your site, check the Changing the design of a button article.
Besides, you can upload an icon next to the button text, and change its alignment:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1030-2_1shkgxl.png)
To access these settings, switch to the Fields section in the Style tab:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1031-1_10j7twr.png)
Here you can choose the type of your fields — the style of its borders:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1032-4_ngkfk0.png)
You can also adjust the colors of each component in the form — borders, text, description, etc:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1033-1_woad13.png)
Publish your site for the changes to appear live.
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 article.
Tip: To set a contact form on your site, check the Adding a contact/ lead generation form article.
Customizing the style of the button in the contact form
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/fa84b4d83a50e800/mockup-75-1_bd8t4m.png)
In the form settings, open the Style tab and navigate to the Button section:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1027-7_1yq9fpk.png)
Here you can change the text in the button and customize its formatting:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1028-2_n9v4bv.png)
Tip: The font for the button text is adjusted to the global site's font. See the Changing site's font article.
You can also choose the style for your button, or select the alternative one:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1029-2_1qd0h8n.png)
Note: To change the style options for the buttons on your site, check the Changing the design of a button article.
Besides, you can upload an icon next to the button text, and change its alignment:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1030-2_1shkgxl.png)
Customizing the style of the fields in the contact form
To access these settings, switch to the Fields section in the Style tab:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1031-1_10j7twr.png)
Here you can choose the type of your fields — the style of its borders:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1032-4_ngkfk0.png)
You can also adjust the colors of each component in the form — borders, text, description, etc:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1033-1_woad13.png)
Publish your site for the changes to appear live.
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 article.
Updated on: 04/26/2024
Thank you!