ShareFile

Styling Webforms with CSS and HTML

July 29, 2025

Contributed by:

Hide field

[data-id="field external id"] {
display: none;
}
<!--NeedCopy-->

Button styling

button[type="submit"] {
background-color: #b6fbfb;
color: #000;
border: 2px solid #b6fbfb; /* Border matches the button color */
transition: background-color 0.3s ease; /* Smooth transition effect */
}

button[type="submit"]:hover {
background-color: #a0e0e0; /* Slightly darker shade when hovered */
border-color: #a0e0e0; /* Matching border color */
}
<!--NeedCopy-->

Change Submit Button Shape

button[type="submit"] {
border-radius: 999px;
padding: 10px 30px; /* optional: better visual spacing */
}
<!--NeedCopy-->

Change Help Text Color

.help-block {
color: #ff9933; /* Replace with your desired color */
}
<!--NeedCopy-->

Fix Mobile Sizing and Focus Zoom Issue

div.container {
width: 100% !important;
}
form#webform.webforms {
width: 100% !important;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="text"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
textarea:hover,
select:hover{font-size: initial;}
}
@media (min-width: 768px) {
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="text"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
textarea:hover,
select:hover{font-size: inherit;}
}
<!--NeedCopy-->

Remove Phone/Email Type Select Box

span.input-group-addon {
display: none;
}
div.input-group {
display: block;
}
select {
display: none;
}
button.field-add-another {
margin-top: 5px;
}
.input-group .form-control:last-child {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
<!--NeedCopy-->

Remove ‘Add another’ from All

button.field-add-another {

display: none;

}

.input-group .form-control:last-child {
margin-bottom: 15px;
}

Remove 'Add another' from Phone and Email Only
.webforms__field[data-id="phone"] .field-add-another,
.webforms__field[data-id="email"] .field-add-another {
display: none;
}
<!--NeedCopy-->

Logo and Title

<div style="text-align:center;padding:0px 0;">

<img style="height:75px;vertical-align:middle;margin-bottom:20px;" src="LINK TO IMAGE?format=1500w;" />

<h1 style="margin: 0;">CONTACT FORM</h1>

<p style="font-size:24px;color:#333;max-width:600px;margin-top:20px;">

Please fill out the details below and we'll get back to you shortly.

</p>

</div>
<!--NeedCopy-->

Redirect Page

<div style="text-align:center; padding: 20px 0;">

<img style="height:75px; vertical-align:middle; margin-bottom: 10px;" src="LINK TO IMAGE?format=1500w" alt="Progress Podio Logo" />

<br />

<span style="font-size: 40px;"><b>SUBMISSION MESSAGE.</b></span>

</div>
<!--NeedCopy-->

CSS EXAMPLE

button[type="submit"] {

background-color: #5CE500;

color: #000;

border: 2px solid #5CE500;

transition: background-color 0.3s ease;

}

button[type="submit"]:hover {

background-color: #43A700;

border-color: #43A700;

}

button.field-add-another {

display: none;

}

.input-group .form-control:last-child {

margin-bottom: 15px;

}

span.input-group-addon {

display: none;

}

div.input-group {

display: block;

}

select {

display: none;

}

button.field-add-another {

margin-top: 5px;

}

.input-group .form-control:last-child {

border-bottom-left-radius: 4px;

border-top-left-radius: 4px;

}
<!--NeedCopy-->

The official version of this content is in English. Some of the Cloud Software Group documentation content is machine translated for your convenience only. Cloud Software Group has no control over machine-translated content, which may contain errors, inaccuracies or unsuitable language. No warranty of any kind, either expressed or implied, is made as to the accuracy, reliability, suitability, or correctness of any translations made from the English original into any other language, or that your Cloud Software Group product or service conforms to any machine translated content, and any warranty provided under the applicable end user license agreement or terms of service, or any other agreement with Cloud Software Group, that the product or service conforms with any documentation shall not apply to the extent that such documentation has been machine translated. Cloud Software Group will not be held responsible for any damage or issues that may arise from using machine-translated content.

Was this article helpful

Styling Webforms with CSS and HTML

July 29, 2025

Contributed by:

July 29, 2025

Contributed by:

Styling Webforms with CSS and HTML

Hide field

Button styling

Change Submit Button Shape

Change Help Text Color

Fix Mobile Sizing and Focus Zoom Issue

Remove Phone/Email Type Select Box

Remove ‘Add another’ from All

Logo and Title

Redirect Page

CSS EXAMPLE

In this article