Fluent Forms Style Generator

Contact Form Generator
Padding
Background color
Text & Label color
Input fields background
Input fields font
Placeholders
Focus Background color
Focus font color
Submit Background color
Submit font color
Submit Background color on hover
Submit font color on hover
Warning text color
form.fluent_form_FF_ID,
form.fluent_form_FF_ID button,
form.fluent_form_FF_ID input,
form.fluent_form_FF_ID textarea,
form.fluent_form_FF_ID label,
form.fluent_form_FF_ID select {
	font-family: Roboto;
	color: #B2D8EE;
}

form.fluent_form_FF_ID {
	background-color: #1D475F;
	padding: 40px 50px 20px 50px;
}

/* all the input fieds + dropdown options */
form.fluent_form_FF_ID .ff-el-form-control,
form.fluent_form_FF_ID select.ff-el-form-control option {
	border: none;
	background-color: #0E2D3F;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1.2px;
	transition: 0.3s ease background, color;
	color: white;
	border-radius: 0;
}

/* dropdown */
form.fluent_form_FF_ID select.ff-el-form-control {
	appearance: none;
	-webkit-appearance: none;
	-mod-appearance: none;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJJJREFUeNpi/P//PwMpgImBRADSUAHEL4BYDY86NaiaCgagk779h4CHQCwDciIaloHKgcA3kEA4EP+FClwBYiEkxUJQsf9QNeEwidz/CHAciLmg+DiSeC44gJBMa0KS3A7FMNAEU4fu3pn/McFMZDXoGpiBeC2S4rVQMbgaRiwRxwbE26FsTyD+hSzJSPOYBggwAOSDBwz545m3AAAAAElFTkSuQmCC);
	background-repeat: no-repeat;
	background-position: calc(100% - 15px) center;
}

/* all the input fieds except dropdown */
form.fluent_form_FF_ID :not(select).ff-el-form-control {
	padding: 20px;
}

/* textarea */
form.fluent_form_FF_ID textarea.ff-el-form-control {
	resize: none;
}
form.fluent_form_FF_ID .ff-el-form-control:focus {
	color: #D75E5E;
	background-color: black;
	border: none;
	outline: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}
form.fluent_form_FF_ID .ff-el-form-control::-webkit-input-placeholder {
	color: white;
}
form.fluent_form_FF_ID .ff-el-form-control::placeholder {
	color: white;
}
form.fluent_form_FF_ID .ff-el-form-control:focus::placeholder {
	color: white
}
form.fluent_form_FF_ID .ff-btn {
	border-radius: 0;
	border: none;
}
form.fluent_form_FF_ID .ff-btn:focus,
form.fluent_form_FF_ID .ff-btn:hover {
	box-shadow: none;
	opacity: 1;
}
form.fluent_form_FF_ID .ff-btn-submit {
	background-color: #AC3232!important;
	color: white!important;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1.2px;
	padding: 20px;
	transition: 0.4s ease background;
	width: 100%
}
form.fluent_form_FF_ID .ff-btn-submit:hover {
	background-color: white!important;
	color: black!important;
}
form.fluent_form_FF_ID .text-danger {
	color: red
}
form.fluent_form_FF_ID .ff-message-success {
	color: white;
	box-shadow: none;
}

Instructions

1 - Play with the colors

2 - Click on the code to select the full CSS and copy it

3 - Paste it in the Form Custom CSS editor (Form Settings > Custom CSS/JS)

Changelog

1.0.3 (2019-11-27) - Dropdown fix part 2 + submit button fix

1.0.2 (2019-11-08) - Dropdown fix

1.0.1 (2019-11-07) - Removed the form's class input as we don't need it anymore (Fluent Form v3.0.7)

1.0.0 (2019-10-23) - Initial release

For more info, check my tutorial How to style a Fluent Forms form
Made with OXYGEN BUILDER by SUPADEZIGN