Styling Web Forms

Customizing the appearance of your web form in Groundhogg is simple and flexible. Whether you want a quick, pre-built look or a fully tailored design, the "Web Form" settings offer options to match your brand or style preferences.

How to Access Form Styling Options

Go to Groundhogg > Funnels in your WordPress dashboard.
Open the funnel containing your web form.
Click the "Web Form" benchmark in the funnel builder.
Find the "Form Style" settings in the sidebar.

Option 1: Style with Themes and Accent Colors

Groundhogg offers pre-built themes paired with a color picker to quickly style your form:

Choose a Theme:
- Theme Default: A clean, neutral base that fits any site.
- Simple: Minimalist and distraction-free—ideal for clarity.
- Modern: Sleek and contemporary for a professional edge.
- Classic: Traditional design with a timeless appeal.
How to Apply: Select your preferred theme from the "Form Style" dropdown.
Add an Accent Color:
- In the same settings, click the "Accent Color" color picker.
- Pick a hue to customize buttons, borders, or highlights (e.g., your brand’s primary color).
- Tip: Preview to ensure readability—avoid low-contrast combinations like light text on light backgrounds.
How It Works Together: The theme sets the overall layout, while the accent color personalizes it. Save and preview to see the combined effect.

Option 2: Add Custom Styling with Code

For more control, inject your own CSS to enhance or override the default styles.

Where to Add It:

Theme’s functions.php: Paste into Appearance > Theme Editor (back up first).
Code Snippet Plugin: Use a plugin like "Code Snippets," add the code, and activate.

add_action( 'wp_head', function () { ?>
<style>
	
/* Form wrapper */
.gh-form-wrapper {
	padding: 20px;
    	background-color: #f6f9fb;
}
/*inputs*/
.gh-form input, textarea {
	border-width: 0px 0px 1px 0px;
    	background-color: #f6f9fb;
    	border-radius: 0px;
}
	
[placeholder]:focus::-webkit-input-placeholder {
	transition: text-indent 0.4s 0.4s ease; 
	text-indent: -100%;
opacity: 1;
 }

/* button */
button.gh-submit.gh-button.primary {
    border: 1px solid #61848d;
    color: #61848d;
}

button.gh-submit.gh-button.primary:hover {
    background-color: #61848d;
    border: solid #61848d 1px;
    color: #fff;
}

</style>
<?php } );