# Forms **URL:** https://community.elfsight.com/c/css-codes/contact-form-form-builder/166.md [Latest](https://community.elfsight.com/latest.md) · [Categories](https://community.elfsight.com/categories.md) · [Tags](https://community.elfsight.com/tags.md) --- ## [Set custom font for all elements (Forms)](https://community.elfsight.com/t/set-custom-font-for-all-elements-forms/22930)
**Author:** [@Helga](https://community.elfsight.com/u/Helga)\ **Replies:** 0\ **Last updated:** [October 19, 2023, 3:20pm UTC](https://community.elfsight.com/t/set-custom-font-for-all-elements-forms/22930 "2023-10-19T15:20:42Z")
Although we do provide a list of fonts for you to choose for your widget, you might happen to need a custom code. If that is the case, add the code below to Custom CSS field on your Form widget’s Appearance tab: \[class… --- ## [Stack horizontal form vertically on mobile](https://community.elfsight.com/t/stack-horizontal-form-vertically-on-mobile/168909)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [July 22, 2026, 9:00pm UTC](https://community.elfsight.com/t/stack-horizontal-form-vertically-on-mobile/168909 "2026-07-22T21:00:00Z")
Horizontal forms are a great fit for desktop, but they may not look as good on mobile due to limited screen space. Fields can become too narrow, causing horizontal scrolling or cut-off labels. A simple solution is to sw… --- ## [Align the form to the left of the page](https://community.elfsight.com/t/align-the-form-to-the-left-of-the-page/92631)
**Author:** [@Sina](https://community.elfsight.com/u/Sina)\ **Replies:** 0\ **Last updated:** [January 4, 2025, 3:03pm UTC](https://community.elfsight.com/t/align-the-form-to-the-left-of-the-page/92631 "2025-01-04T15:03:58Z")
Add this code to the Custom CSS field on the Appearance tab of your Contact Form widget’s settings: \[class\*="Content\_\_WidgetContainer-sc"\] { margin-left: 0 !important; } --- ## [Change color of Submit button on hover](https://community.elfsight.com/t/change-color-of-submit-button-on-hover/77654)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 22, 2024, 2:20pm UTC](https://community.elfsight.com/t/change-color-of-submit-button-on-hover/77654 "2024-10-22T14:20:10Z")
Add the code below to the Custom CSS field on your Form widget’s Appearance tab: \[class\*="ButtonBase\_\_ButtonContainer-sc"\]:hover { background-color: black !important; transition: all 0.5s ease-out; } Guys, if this co… --- ## [Align title to the center](https://community.elfsight.com/t/align-title-to-the-center/140216)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 5:29pm UTC](https://community.elfsight.com/t/align-title-to-the-center/140216 "2025-10-01T17:29:39Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: \[class\*='WidgetTitle\_\_Header-sc'\] { text-wrap: unset; text-align: center; } --- ## [Make Smiley Scale field full-width](https://community.elfsight.com/t/make-smiley-scale-field-full-width/140215)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 5:27pm UTC](https://community.elfsight.com/t/make-smiley-scale-field-full-width/140215 "2025-10-01T17:27:45Z")
Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings: \[class\*='SmileyScale\_\_SmilesContainer-sc'\] { display: flex; justify-content: space-between;\*/ } --- ## [Change link color in Consent block](https://community.elfsight.com/t/change-link-color-in-consent-block/140214)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 5:25pm UTC](https://community.elfsight.com/t/change-link-color-in-consent-block/140214 "2025-10-01T17:25:11Z")
Add the code below to the Custom CSS field on your Form widget’s Appearance tab: \[class\*='FormFieldLayout\_\_Element-sc'\] a { color: red; } --- ## [Remove progress bar in multistep forms](https://community.elfsight.com/t/remove-progress-bar-in-multistep-forms/140213)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 5:21pm UTC](https://community.elfsight.com/t/remove-progress-bar-in-multistep-forms/140213 "2025-10-01T17:21:07Z")
Add the code below to the Custom CSS field on your Form widget’s Appearance tab: \[class\*="FormLayout\_\_ProgressBarContainer-sc"\] \[class\*="FormLayout\_\_Steps-sc"\], \[class\*="FormLayout\_\_ProgressBarContainer-sc"\] \[class\*="Fo… --- ## [Change font size of subheadings in Progress Bar](https://community.elfsight.com/t/change-font-size-of-subheadings-in-progress-bar/47950)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 2\ **Last updated:** [August 27, 2025, 5:47pm UTC](https://community.elfsight.com/t/change-font-size-of-subheadings-in-progress-bar/47950 "2025-08-27T17:47:03Z")
Add the code below to the Custom CSS field on your Form widget’s Appearance tab: \[class\*="FormLayout\_\_PageTitle-sc"\] { font-size: 20px !important; } Guys, if this code was helpful to you, please drop a line in the … --- ## [Align the Image Choice to the center](https://community.elfsight.com/t/align-the-image-choice-to-the-center/115126)
**Author:** [@Sina](https://community.elfsight.com/u/Sina)\ **Replies:** 0\ **Last updated:** [April 19, 2025, 2:43am UTC](https://community.elfsight.com/t/align-the-image-choice-to-the-center/115126 "2025-04-19T02:43:35Z")
Add the code below to the Custom CSS field on your Form widget’s Appearance tab: \[class\*="ImageChoice\_\_OptionsContainer-sc"\]{ justify-content: center; } --- ## [Change size of Pane Reopen button on mobile](https://community.elfsight.com/t/change-size-of-pane-reopen-button-on-mobile/77639)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 2\ **Last updated:** [December 12, 2024, 11:27am UTC](https://community.elfsight.com/t/change-size-of-pane-reopen-button-on-mobile/77639 "2024-12-12T11:27:46Z")
Add the code below to the Custom CSS field on your Form widget’s Appearance tab: @media screen and (max-width: 600px) { .global-styles, .es-forms-floating-button { font-size: 15px !important; } .global-styles, .es-form… --- ## [Block weekends for the selection in datepicker](https://community.elfsight.com/t/block-weekends-for-the-selection-in-datepicker/47946)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [April 17, 2024, 12:03pm UTC](https://community.elfsight.com/t/block-weekends-for-the-selection-in-datepicker/47946 "2024-04-17T12:03:39Z")
Add the code below to the Custom CSS field on your Form widget’s Appearance tab: .global-styles, .react-calendar\_\_month-view\_\_days\_\_day--weekend { pointer-events: none; opacity: 0.5; } Guys, if this code was help… --- ## [Make Datepicker smaller on mobile view](https://community.elfsight.com/t/make-datepicker-smaller-on-mobile-view/87616)
**Author:** [@Sina](https://community.elfsight.com/u/Sina)\ **Replies:** 0\ **Last updated:** [December 8, 2024, 10:37am UTC](https://community.elfsight.com/t/make-datepicker-smaller-on-mobile-view/87616 "2024-12-08T10:37:53Z")
Add this code to the Custom CSS field on the Appearance tab of your Formbuilder widget’s settings: @media(max-width: 500px){ .global-styles, \[class^="DatepickerLayout-sc"\] { transform: scale(0.85); margin-top:-65p… --- ## [Change background and text color in Dropdown fields](https://community.elfsight.com/t/change-background-and-text-color-in-dropdown-fields/77655)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 22, 2024, 2:22pm UTC](https://community.elfsight.com/t/change-background-and-text-color-in-dropdown-fields/77655 "2024-10-22T14:22:08Z")
Add the code below to the Custom CSS field on your Form widget’s Appearance tab: \[class\*="Dropdown\_\_DropdownContainer-sc"\] { color: red; background-color: green !important; } Guys, if this code was helpful to you, p… --- ## [Change error message text color](https://community.elfsight.com/t/change-error-message-text-color/23375)
**Author:** [@Helga](https://community.elfsight.com/u/Helga)\ **Replies:** 0\ **Last updated:** [October 24, 2023, 9:41am UTC](https://community.elfsight.com/t/change-error-message-text-color/23375 "2023-10-24T09:41:30Z")
Add the code below to Custom CSS field on your Form widget’s Appearance tab: \[class\*="FormLayout\_\_Error"\],\[class\*="FormFieldLayout\_\_Error"\] { color: rgb(143,0,255); } --- ## [Display 2 fields and 2 images on 1 row and reduce the field height on mobile](https://community.elfsight.com/t/display-2-fields-and-2-images-on-1-row-and-reduce-the-field-height-on-mobile/77651)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 22, 2024, 2:06pm UTC](https://community.elfsight.com/t/display-2-fields-and-2-images-on-1-row-and-reduce-the-field-height-on-mobile/77651 "2024-10-22T14:06:28Z")
Add the code below to the Custom CSS field on your Form widget’s Appearance tab: @media(max-width: 550px) { \[class^="FieldsGrid\_\_Row-sc"\] { display: inline-flex; } \[class\*="ImageOption\_\_Item-sc"\] { width: 120px; margin:… --- ## [Change padding on the sides on mobile](https://community.elfsight.com/t/change-padding-on-the-sides-on-mobile/77650)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 22, 2024, 2:04pm UTC](https://community.elfsight.com/t/change-padding-on-the-sides-on-mobile/77650 "2024-10-22T14:04:22Z")
Add the code below to the Custom CSS field on your Form widget’s Appearance tab: @media(max-width: 550px) { \[class\*="WidgetBackground\_\_Container-sc"\] { padding: 30px !important; } } Guys, if this code was helpful to … --- ## [Change height of the fields and Submit button](https://community.elfsight.com/t/change-height-of-the-fields-and-submit-button/77648)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 22, 2024, 2:02pm UTC](https://community.elfsight.com/t/change-height-of-the-fields-and-submit-button/77648 "2024-10-22T14:02:53Z")
Add the code below to the Custom CSS field on your Form widget’s Appearance tab: \[class\*='TextControlBase\_\_TextControlBaseContainer-sc'\] { padding: 42px 16px !important; } \[class\*='ButtonBase\_\_ButtonContainer-sc'\] { he… --- ## [Display floating pane form at the center of the page](https://community.elfsight.com/t/display-floating-pane-form-at-the-center-of-the-page/77644)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 22, 2024, 1:55pm UTC](https://community.elfsight.com/t/display-floating-pane-form-at-the-center-of-the-page/77644 "2024-10-22T13:55:40Z")
Add the code below to the Custom CSS field on your Form widget’s Appearance tab: .global-styles, \[class\*='Pane\_\_PaneContent-sc'\] { top: 0; left: 50%; right: auto; bottom: 0; opacity: 1; border-radius: 24px; transform: t… --- ## [Display Floating Pane form like Popup with Modal layout](https://community.elfsight.com/t/display-floating-pane-form-like-popup-with-modal-layout/77643)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 22, 2024, 1:54pm UTC](https://community.elfsight.com/t/display-floating-pane-form-like-popup-with-modal-layout/77643 "2024-10-22T13:54:28Z")
Add the code below to the Custom CSS field on your Form widget’s Appearance tab: .global-styles, \[class\*='Pane\_\_PaneContent-sc'\] { top: 50%; left: 50%; right: auto; bottom: 0; opacity: 1; border-radius: 24px; transform:… --- ## [Align Consent field to the center](https://community.elfsight.com/t/align-consent-field-to-the-center/77641)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 22, 2024, 1:51pm UTC](https://community.elfsight.com/t/align-consent-field-to-the-center/77641 "2024-10-22T13:51:24Z")
Add the code below to the Custom CSS field on your Form widget’s Appearance tab: \[class\*='FieldsGrid\_\_Grid-sc'\] \> :last-child { margin: 0 auto; } Guys, if this code was helpful to you, please drop a line in the comme… --- ## [Add dividers](https://community.elfsight.com/t/add-dividers/77640)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 22, 2024, 1:49pm UTC](https://community.elfsight.com/t/add-dividers/77640 "2024-10-22T13:49:14Z")
Add the code below to the Custom CSS field on your Form widget’s Appearance tab: \[class\*='FieldsGrid\_\_Row-sc'\]:nth-child(2), \[class\*='FieldsGrid\_\_Row-sc'\]:nth-child(3), \[class\*='FieldsGrid\_\_Row-sc'\]:nth-child(10) { bord… --- ## [Align Smiley Scale to center](https://community.elfsight.com/t/align-smiley-scale-to-center/77637)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 22, 2024, 1:42pm UTC](https://community.elfsight.com/t/align-smiley-scale-to-center/77637 "2024-10-22T13:42:57Z")
Add the code below to the Custom CSS field on your Form widget’s Appearance tab: \[class\*='SmileyScale\_\_SmilesContainer-sc'\] { display: flex; justify-content: center; align-items: center; } Guys, if this code was help… --- ## [Change size of Pane Reopen Button](https://community.elfsight.com/t/change-size-of-pane-reopen-button/77635)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 22, 2024, 1:41pm UTC](https://community.elfsight.com/t/change-size-of-pane-reopen-button/77635 "2024-10-22T13:41:31Z")
Add the code below to the Custom CSS field on your Form widget’s Appearance tab: .global-styles, .es-forms-floating-button { width: 80px; height: 80px; border-radius: 50% !important; } Guys, if this code was helpful … --- ## [Change background color of Success Message box](https://community.elfsight.com/t/change-background-color-of-success-message-box/60206)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [July 5, 2024, 11:37am UTC](https://community.elfsight.com/t/change-background-color-of-success-message-box/60206 "2024-07-05T11:37:49Z")
Add the code below to the Custom CSS field on your Form widget’s Appearance tab: \[class\*="SubmitMessage\_\_Container-sc"\] { background-color: red !important; } --- ## [Align reCAPTCHA disclaimer to the center](https://community.elfsight.com/t/align-recaptcha-disclaimer-to-the-center/47952)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [April 17, 2024, 12:15pm UTC](https://community.elfsight.com/t/align-recaptcha-disclaimer-to-the-center/47952 "2024-04-17T12:15:55Z")
Add the code below to the Custom CSS field on your Form widget’s Appearance tab: \[class^="Footer\_\_WidgetFooter"\] { text-align: center; } Guys, if this code was helpful to you, please drop a line in the comments. Yo… --- ## [Change dropdown arrow color](https://community.elfsight.com/t/change-dropdown-arrow-color/47951)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [April 17, 2024, 12:14pm UTC](https://community.elfsight.com/t/change-dropdown-arrow-color/47951 "2024-04-17T12:14:49Z")
Add the code below to the Custom CSS field on your Form widget’s Appearance tab: \[class\*="FieldsGrid\_\_Row"\] svg { fill: red; } Guys, if this code was helpful to you, please drop a line in the comments. Your feedbac… --- ## [Display text in pane reopen button vertically](https://community.elfsight.com/t/display-text-in-pane-reopen-button-vertically/47943)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [April 17, 2024, 11:56am UTC](https://community.elfsight.com/t/display-text-in-pane-reopen-button-vertically/47943 "2024-04-17T11:56:39Z")
Add the code below to the Custom CSS field on your Form widget’s Appearance tab: .global-styles, \[class\*='ButtonBase\_\_Ellipsis-sc'\] { writing-mode: vertical-rl; text-orientation: upright; } .global-styles, \[class\*=… --- ## [RTL mode for embedded widgets](https://community.elfsight.com/t/rtl-mode-for-embedded-widgets/22997)
**Author:** [@Helga](https://community.elfsight.com/u/Helga)\ **Replies:** 0\ **Last updated:** [October 20, 2023, 7:25am UTC](https://community.elfsight.com/t/rtl-mode-for-embedded-widgets/22997 "2023-10-20T07:25:49Z")
Add the code below to Custom CSS field on your Form widget’s Appearance tab: \[class\*="WidgetBackground\_\_Content"\] \* { direction: rtl; text-align: right; } --- ## [Block weekend dates in datepicker](https://community.elfsight.com/t/block-weekend-dates-in-datepicker/23377)
**Author:** [@Helga](https://community.elfsight.com/u/Helga)\ **Replies:** 0\ **Last updated:** [October 24, 2023, 9:45am UTC](https://community.elfsight.com/t/block-weekend-dates-in-datepicker/23377 "2023-10-24T09:45:06Z")
Add the code below to Custom CSS field on your Form widget’s Appearance tab: .global-styles, .react-datepicker\_\_day:first-child, .react-datepicker\_\_day:last-child{ pointer-events: none; opacity: 0.5 !important; } [Next page](https://community.elfsight.com/c/css-codes/contact-form-form-builder/166.md?page=1)