← Theme Factory Dev
Form

CTF15 Draft Nerdworks Forms
Get in Touch

Got a question about a product, want to sell your collection, or just want to chat? Drop us a line.
First Name *
Last Name *
Email Address *

We’ll never share your email with anyone.
Phone Number
What’s this about? *
Your Message

Tell us as much as you can and we’ll get back to you within 24 hours.
Message *
Attach Photos

Upload photos of your collection for valuation. Max 10MB per file.
I agree to the privacy policy and consent to being contacted about my enquiry.
Reply by email
Call me back
Validation States

There was a problem with your submission. Please check the fields below.
Email Address *

Please enter a valid email address.
Success State

Thanks for getting in touch! We’ve received your message and will get back to you within 24 hours. Keep an eye on your inbox.
/* ============================================================
   Gravity Forms — CNW15
   Nerdworks SNW1 tokens — dark theme
   ============================================================ */

/* ─── Form wrapper ─────────────────────────────────────────── */

.gform_wrapper {
	font-family: var(--ff-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--text-on-dark);
	max-width: 720px;
}

/* ─── Form header ──────────────────────────────────────────── */

.gform_heading {
	margin-bottom: var(--space-6);
}

.gform_title {
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	line-height: var(--lh-ui);
	color: var(--text-on-dark);
	margin: 0 0 var(--space-3);
}

.gform_description {
	font-size: var(--fs-body);
	color: var(--text-on-dark-muted);
	margin: 0;
}

/* ─── Field list ───────────────────────────────────────────── */

.gform_fields {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
}

/* ─── Field containers ─────────────────────────────────────── */

.gfield {
	flex: 0 0 100%;
	min-width: 0;
}

.gfield--width-half {
	flex: 0 0 calc(50% - (var(--space-5) / 2));
}

@media (max-width: 600px) {
	.gfield--width-half {
		flex: 0 0 100%;
	}
}

.gfield--width-third {
	flex: 0 0 calc(33.333% - (var(--space-5) * 2 / 3));
}

@media (max-width: 600px) {
	.gfield--width-third {
		flex: 0 0 100%;
	}
}

.gfield_label {
	display: block;
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	color: var(--text-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: var(--lh-ui);
	margin-bottom: var(--space-2);
}

.gfield_required {
	color: var(--accent-red);
	margin-left: var(--space-1);
}

.gfield_description {
	font-size: var(--fs-body-sm);
	color: var(--text-on-dark-muted);
	margin-top: var(--space-2);
	line-height: var(--lh-body);
}

/* ─── Text inputs ──────────────────────────────────────────── */

.ginput_container_text input,
.ginput_container_email input,
.ginput_container_phone input,
.ginput_container_number input,
.ginput_container_website input,
.ginput_container_date input,
.ginput_container_password input,
.ginput_container_textarea textarea,
.ginput_container_select select {
	display: block;
	width: 100%;
	background-color: var(--bg-surface-dark);
	color: var(--text-on-dark);
	border: var(--border-hairline) solid var(--border-hairline-dark);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	font-family: var(--ff-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: var(--lh-ui);
	outline: none;
	box-shadow: var(--shadow-sm);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
}

.ginput_container_text input::placeholder,
.ginput_container_email input::placeholder,
.ginput_container_phone input::placeholder,
.ginput_container_number input::placeholder,
.ginput_container_website input::placeholder,
.ginput_container_date input::placeholder,
.ginput_container_password input::placeholder,
.ginput_container_textarea textarea::placeholder {
	color: var(--text-on-dark-muted);
	opacity: 0.6;
}

.ginput_container_text input:hover,
.ginput_container_email input:hover,
.ginput_container_phone input:hover,
.ginput_container_number input:hover,
.ginput_container_website input:hover,
.ginput_container_date input:hover,
.ginput_container_password input:hover,
.ginput_container_textarea textarea:hover,
.ginput_container_select select:hover {
	border-color: var(--mid-grey);
}

.ginput_container_text input:focus,
.ginput_container_email input:focus,
.ginput_container_phone input:focus,
.ginput_container_number input:focus,
.ginput_container_website input:focus,
.ginput_container_date input:focus,
.ginput_container_password input:focus,
.ginput_container_textarea textarea:focus,
.ginput_container_select select:focus {
	border-color: var(--nw-green);
	box-shadow: 0 0 0 3px rgba(69, 168, 89, 0.18), var(--shadow-sm);
}

/* ─── Textarea ─────────────────────────────────────────────── */

.ginput_container_textarea textarea {
	min-height: 150px;
	resize: vertical;
}

/* ─── Select dropdown ──────────────────────────────────────── */

.ginput_container_select select {
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-4) center;
	padding-right: var(--space-7);
}

.ginput_container_select select option {
	background-color: var(--bg-surface-dark);
	color: var(--text-on-dark);
}

/* ─── Checkboxes & Radio buttons ───────────────────────────── */

.gfield_checkbox,
.gfield_radio {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.gfield_checkbox li,
.gfield_radio li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.gfield_checkbox input[type="checkbox"],
.gfield_radio input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-color: var(--bg-surface-dark);
	border: var(--border-regular) solid var(--border-hairline-dark);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	position: relative;
	margin: 0;
}

.gfield_checkbox input[type="checkbox"]:hover,
.gfield_radio input[type="radio"]:hover {
	border-color: var(--nw-green);
}

.gfield_checkbox input[type="checkbox"]:focus,
.gfield_radio input[type="radio"]:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(69, 168, 89, 0.18);
}

.gfield_checkbox input[type="checkbox"]:checked {
	background-color: var(--nw-green);
	border-color: var(--nw-green);
}

.gfield_checkbox input[type="checkbox"]:checked::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -60%) rotate(45deg);
	width: 5px;
	height: 9px;
	border: 2px solid var(--pure-white);
	border-top: none;
	border-left: none;
}

.gfield_radio input[type="radio"] {
	border-radius: 50%;
}

.gfield_radio input[type="radio"]:checked {
	background-color: var(--bg-surface-dark);
	border-color: var(--nw-green);
}

.gfield_radio input[type="radio"]:checked::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--nw-green);
	border: none;
}

.gfield_checkbox label,
.gfield_radio label {
	font-size: var(--fs-body);
	color: var(--text-on-dark);
	cursor: pointer;
	line-height: var(--lh-ui);
}

.gfield_checkbox label a,
.gfield_radio label a {
	color: var(--nw-green-light);
	text-decoration: underline;
}

.gfield_checkbox label a:hover,
.gfield_radio label a:hover {
	color: var(--nw-green);
}

/* ─── File upload ──────────────────────────────────────────── */

.ginput_container_fileupload {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	border: var(--border-hairline) dashed var(--border-hairline-dark);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	text-align: center;
	background-color: var(--bg-surface-dark);
	transition: border-color 0.2s ease;
}

.ginput_container_fileupload:hover {
	border-color: var(--nw-green);
}

.ginput_container_fileupload input[type="file"] {
	font-family: var(--ff-body);
	font-size: var(--fs-body-sm);
	color: var(--text-on-dark-muted);
	cursor: pointer;
	width: 100%;
}

.ginput_container_fileupload input[type="file"]::file-selector-button {
	background-color: var(--bg-surface-dark);
	color: var(--nw-green-light);
	border: var(--border-hairline) solid var(--nw-green);
	border-radius: var(--radius-sm);
	padding: var(--space-2) var(--space-4);
	font-family: var(--ff-body);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-medium);
	cursor: pointer;
	margin-right: var(--space-3);
	transition: background-color 0.2s ease;
}

.ginput_container_fileupload input[type="file"]::file-selector-button:hover {
	background-color: var(--nw-green);
	color: var(--pure-white);
}

.ginput_container_fileupload .gfield_description {
	font-size: var(--fs-body-sm);
	color: var(--text-on-dark-muted);
	margin-top: 0;
}

/* ─── Section break ────────────────────────────────────────── */

.gsection {
	flex: 0 0 100%;
	border-bottom: var(--border-hairline) solid var(--border-hairline-dark);
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-2);
}

.gsection_title {
	font-size: var(--fs-body-lg);
	font-weight: var(--fw-bold);
	line-height: var(--lh-ui);
	color: var(--text-on-dark);
	margin: 0 0 var(--space-2);
}

.gsection_description {
	font-size: var(--fs-body-sm);
	color: var(--text-on-dark-muted);
	margin: 0;
}

/* ─── Validation / Errors ──────────────────────────────────── */

.gform_validation_errors {
	background-color: rgba(220, 38, 38, 0.1);
	border: var(--border-hairline) solid var(--accent-red);
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-5);
	margin-bottom: var(--space-5);
}

.gform_validation_errors p {
	font-size: var(--fs-body-sm);
	color: var(--accent-red);
	margin: 0;
	font-weight: var(--fw-medium);
}

.gfield_error .ginput_container_text input,
.gfield_error .ginput_container_email input,
.gfield_error .ginput_container_phone input,
.gfield_error .ginput_container_number input,
.gfield_error .ginput_container_website input,
.gfield_error .ginput_container_date input,
.gfield_error .ginput_container_password input,
.gfield_error .ginput_container_textarea textarea,
.gfield_error .ginput_container_select select {
	border-color: var(--accent-red);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.gfield_error .ginput_container_text input:focus,
.gfield_error .ginput_container_email input:focus,
.gfield_error .ginput_container_phone input:focus,
.gfield_error .ginput_container_textarea textarea:focus,
.gfield_error .ginput_container_select select:focus {
	border-color: var(--accent-red);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}

.gfield_error .gfield_label {
	color: var(--accent-red);
}

.validation_message {
	font-size: var(--fs-body-sm);
	color: var(--accent-red);
	margin-top: var(--space-2);
	font-weight: var(--fw-medium);
	display: block;
}

/* ─── Submit button ────────────────────────────────────────── */

.gform_footer {
	padding-top: var(--space-2);
}

.gform_button {
	display: inline-block;
	width: auto;
	min-width: 180px;
	padding: var(--space-3) var(--space-6);
	background-color: var(--nw-green);
	color: var(--pure-white);
	font-family: var(--ff-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-ui);
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	text-align: center;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
	box-shadow: var(--shadow-md);
	letter-spacing: 0.02em;
}

.gform_button:hover {
	background-color: var(--nw-green-light);
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

.gform_button:active {
	transform: translateY(0);
	box-shadow: var(--shadow-sm);
}

.gform_button:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(69, 168, 89, 0.3), var(--shadow-md);
}

.gform_button--full {
	width: 100%;
}

/* ─── Confirmation message ─────────────────────────────────── */

.gform_confirmation_message {
	background-color: var(--nw-green-pale);
	border: var(--border-hairline) solid var(--nw-green);
	border-radius: var(--radius-md);
	padding: var(--space-5) var(--space-6);
	font-size: var(--fs-body);
	color: var(--nw-green-light);
	line-height: var(--lh-body);
	font-weight: var(--fw-medium);
}

/* ─── Hidden fields ────────────────────────────────────────── */

.gform_validation_container,
.gform_hidden {
	display: none !important;
}

/* ─── Responsive ───────────────────────────────────────────── */

@media (max-width: 600px) {
	.gform_button {
		width: 100%;
	}

	.gform_footer {
		padding-top: var(--space-3);
	}
}
Form

Get in Touch

Your Message

Validation States

Success State

Origin

Notes
