All Posts Jobber Integration

CSS Styling Your Jobber Booking Form: Match Your WordPress Theme Perfectly

Published April 2, 2026 Read Time 13 min read Author

You’ve spent months perfecting your WordPress site. The colors are right, the typography is polished, and the overall aesthetic is chef’s kiss. Then you drop in a booking form and… it looks like it came from a different planet.

This is the curse of iframe-based booking forms. You’re stuck with whatever default styling the plugin gives you, and your customers see a jarring disconnect between your brand and the booking experience.

But what if I told you there’s a better way?

If you’re using Jobber Integration Pro, you get something most booking form solutions don’t offer: a native WordPress form with full CSS control. No iframes. No vendor styling you can’t touch. Just your booking form, styled exactly how you want it.

In this guide, we’ll walk through every CSS technique you need to make your Jobber booking form feel like it was born on your site. Whether you’re matching Astra, GeneratePress, Kadence, Divi, or your custom theme, we’ve got you covered.

The Iframe Problem (And How We Solved It)

Before we dive into styling, let’s talk about why this matters.

Most booking form providers use iframes. It’s a quick way to embed a form without worrying about CSS conflicts or theme compatibility. The downside? You get zero control over styling. Your form looks like a form from the booking company, sitting in an iframe box on your site.

Your visitors notice. Your brand consistency takes a hit. Your conversion rates… well, let’s just say they could be better.

The Jobber Integration Pro plugin takes a different approach. Instead of embedding an iframe, it renders the form directly in your WordPress page. This means:

  • Full CSS control (no iframe sandbox restrictions)
  • Custom properties you can override
  • Access to your theme’s design system
  • Mobile responsiveness that actually works
  • Dark mode support out of the box

We’re not guessing what styling will work—we’re authoring it ourselves.

Understanding Jobber’s CSS Custom Properties

Jobber booking forms come with a set of CSS custom properties (CSS variables) you can customize. Think of these as hooks into the form’s design system.

Here are the primary custom properties you’ll work with:

.jobber-form-wrapper {
  --jobber-primary: #2563eb; /* Primary brand color */
  --jobber-secondary: #1e40af; /* Secondary/darker shade */
  --jobber-border-radius: 6px; /* Corner roundness */
  --jobber-spacing: 16px; /* Internal padding/margins */
  --jobber-font-family: inherit; /* Inherits from parent */
  --jobber-text-color: #1f2937; /* Form text color */
  --jobber-background: #ffffff; /* Form background */
  --jobber-border-color: #e5e7eb; /* Input borders */
  --jobber-focus-color: #3b82f6; /* Focus state color */
  --jobber-error-color: #dc2626; /* Error messages */
  --jobber-success-color: #16a34a; /* Success state */
  --jobber-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

The beauty here is simplicity. Change –jobber-primary, and your buttons, links, and accents update automatically. No hunting through selectors. No fighting specificity wars.

Let’s look at how to use these in practice.

Basic Theme Matching: Astra

Astra’s huge. If your site uses it, you’re in good company. Here’s the quick way to make your Jobber form feel native to your Astra site.

Go to the WordPress Customizer (Appearance > Customize > Colors) and grab your Astra primary color. We’ll use that as the starting point. Let’s say it’s #3373dc (Astra’s classic blue).

Add this CSS to your theme’s Additional CSS section (Appearance > Customize > Additional CSS) or in your child theme’s style.css:

.jobber-form-wrapper {
  --jobber-primary: #3373dc;
  --jobber-secondary: #1f4d96;
  --jobber-border-radius: 4px;
  --jobber-font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --jobber-text-color: #333333;
  --jobber-background: #fafafa;
}

Notice we matched:

  • Primary color to Astra’s blue
  • Secondary to a darker shade for hover states
  • Border radius to Astra’s minimal 4px (not too rounded)
  • Font family to a system stack (Astra uses this)
  • Background to a light gray (consistent with Astra’s form fields)

The form now feels like part of your Astra site. Here’s the thing—that’s the whole game.

GeneratePress: Modern and Minimal

GeneratePress users tend to prefer clean, minimalist design. Here’s a styling that respects that philosophy:

.jobber-form-wrapper {
  --jobber-primary: #222222;
  --jobber-secondary: #444444;
  --jobber-border-radius: 0px;
  --jobber-spacing: 20px;
  --jobber-font-family: "Lato", sans-serif;
  --jobber-text-color: #222222;
  --jobber-background: #ffffff;
  --jobber-border-color: #eeeeee;
  --jobber-focus-color: #333333;
}

GeneratePress users appreciate:

  • Zero border radius (sharp corners, no fussiness)
  • Bold typography (we went dark gray for primary)
  • Generous spacing (20px feels right for this aesthetic)
  • Minimal borders (light gray, almost invisible)

This styling won’t feel out of place on a GeneratePress site.

Kadence: The Designer’s Choice

Kadence themes give designers a lot of control. If you’re using Kadence, you probably have a custom color palette. Let’s say your primary is #9d4edd (a vibrant purple).

.jobber-form-wrapper {
  --jobber-primary: #9d4edd;
  --jobber-secondary: #7209b7;
  --jobber-border-radius: 8px;
  --jobber-spacing: 18px;
  --jobber-font-family: inherit;
  --jobber-text-color: #1f2937;
  --jobber-background: #fafbfc;
  --jobber-border-color: #d4d4d8;
  --jobber-focus-color: #b537f2;
  --jobber-shadow: 0 4px 6px rgba(157, 78, 221, 0.1);
}

For Kadence, we added a custom shadow that uses your primary color. Trust me on this one—it gives the form depth and visual interest without feeling heavy. Kadence users expect polish like this.

Divi: The All-In-One Builder

Divi sites often have highly customized color schemes. The good news? Jobber’s custom properties integrate seamlessly.

If your Divi site uses a color like #7722cc, here’s the CSS:

.jobber-form-wrapper {
  --jobber-primary: #7722cc;
  --jobber-secondary: #5511aa;
  --jobber-border-radius: 6px;
  --jobber-spacing: 16px;
  --jobber-font-family: "Open Sans", sans-serif;
  --jobber-text-color: #2c2c2c;
  --jobber-background: #f8f8f8;
  --jobber-border-color: #e0e0e0;
  --jobber-focus-color: #8833dd;
}

Divi tends toward rounded corners and generous spacing. We set both to accommodate that aesthetic.

Mobile-Responsive Form Styling

Reality check: most of your bookings probably come from phones. If your form is a pain on mobile, people bounce. You’re leaving money on the table.

Good news—with native WordPress forms, responsive design mostly just works. But you can optimize it:

.jobber-form-wrapper {
  --jobber-primary: #2563eb;
  --jobber-border-radius: 6px;
  --jobber-spacing: 16px;
}

/* Stack form fields vertically on small screens */
@media (max-width: 640px) {
  .jobber-form-wrapper {
    --jobber-spacing: 14px;
    --jobber-border-radius: 4px;
  }

  .jobber-form-field {
    margin-bottom: 14px;
    width: 100% !important;
  }
}

/* Add breathing room on tablets */
@media (min-width: 641px) and (max-width: 1024px) {
  .jobber-form-wrapper {
    --jobber-spacing: 18px;
  }
}

The key techniques here:

  • Reduce spacing on small screens (less whitespace waste)
  • Adjust border radius for a snappier feel on mobile
  • Force full-width fields (most forms do this, but we’re being explicit)
  • Add breathing room on tablets (sweet spot between mobile and desktop)

Test this on actual devices. The mobile experience is where your conversion happens.

Dark Mode Support

Dark mode is no longer optional. Your users expect it.

The good news? You can style Jobber forms for dark mode with CSS prefers-color-scheme:

/* Light mode (default) */
.jobber-form-wrapper {
  --jobber-primary: #2563eb;
  --jobber-text-color: #1f2937;
  --jobber-background: #ffffff;
  --jobber-border-color: #e5e7eb;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .jobber-form-wrapper {
    --jobber-primary: #60a5fa;
    --jobber-text-color: #f3f4f6;
    --jobber-background: #1f2937;
    --jobber-border-color: #374151;
  }
}

Notice we adjusted the primary color for dark mode. #2563eb can feel harsh against a dark background. #60a5fa is lighter and more readable. Same brand, optimized for context.

If your WordPress theme already supports dark mode (many modern ones do), this CSS will automatically activate when users switch modes.

Custom Submit Button Styling

The submit button is where interest becomes action. Get this right, and your conversion rate climbs.

.jobber-form-wrapper {
  --jobber-primary: #16a34a;
}

.jobber-submit-button {
  background-color: var(--jobber-primary) !important;
  border: none !important;
  border-radius: var(--jobber-border-radius) !important;
  padding: 12px 32px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 6px rgba(22, 163, 74, 0.2) !important;
}

.jobber-submit-button:hover {
  background-color: #15803d !important;
  box-shadow: 0 6px 12px rgba(22, 163, 74, 0.3) !important;
  transform: translateY(-2px) !important;
}

.jobber-submit-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2) !important;
}

What we’re doing here:

  • Primary color is now green (classic conversion color)
  • Padding is generous (12px vertical = easy to tap on mobile)
  • Font weight is bold (draws attention)
  • Transitions are smooth (0.3s feels responsive, not laggy)
  • Hover effect includes a lift (the translateY(-2px) makes it feel pressable)
  • Shadow adds depth (tells users it’s clickable)

The !important flags are necessary here to override Jobber’s defaults. Yes, using !important is normally bad practice, but for form styling, it’s the pragmatic choice.

Form Field Focus States and Validation Styling

Users should feel the form responding to their input. Good focus states do that.

.jobber-form-field input,
.jobber-form-field textarea,
.jobber-form-field select {
  border: 2px solid var(--jobber-border-color) !important;
  border-radius: var(--jobber-border-radius) !important;
  padding: 10px 12px !important;
  font-size: 16px !important;
  transition: all 0.2s ease !important;
}

/* Focus state: field has focus */
.jobber-form-field input:focus,
.jobber-form-field textarea:focus,
.jobber-form-field select:focus {
  outline: none !important;
  border-color: var(--jobber-focus-color) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  background-color: #fafbfc !important;
}

/* Error state: validation failed */
.jobber-form-field.error input,
.jobber-form-field.error textarea {
  border-color: var(--jobber-error-color) !important;
  background-color: #fef2f2 !important;
}

.jobber-form-field.error input:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* Error message styling */
.jobber-error-message {
  color: var(--jobber-error-color) !important;
  font-size: 14px !important;
  margin-top: 4px !important;
  font-weight: 500 !important;
}

Key interactions:

  • Focus ring is a light blue glow (not harsh, but noticeable)
  • Border thickens on focus (from 1px to 2px)
  • Background lightens (subtle feedback)
  • Error states are red with a light pink background
  • Error messages are bold (stands out from helper text)

Users won’t consciously notice these details, but they’ll feel the difference. The form will feel responsive and attentive.

Loading States and Success Messages

When a user submits the form, they need to know what’s happening.

/* Loading state: form is submitting */
.jobber-form-wrapper.loading .jobber-submit-button {
  opacity: 0.7 !important;
  pointer-events: none !important;
}

.jobber-submit-button.loading::after {
  content: "" !important;
  display: inline-block;
  width: 16px !important;
  height: 16px !important;
  margin-left: 8px !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-top-color: white !important;
  border-radius: 50% !important;
  animation: spin 0.8s linear infinite !important;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Success state: form submitted successfully */
.jobber-success-message {
  background-color: #f0fdf4 !important;
  border: 2px solid var(--jobber-success-color) !important;
  border-radius: var(--jobber-border-radius) !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
  color: #166534 !important;
  font-weight: 500 !important;
  animation: slideIn 0.3s ease !important;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Here’s what happens:

  1. User clicks submit → Button gets loading class
  2. Spinner animates while form submits
  3. Success message appears with a smooth slide-in animation
  4. Button is disabled during submission (prevents double-clicks)

This whole flow takes 2-3 seconds typically, and the user sees feedback the entire time. No confusion about whether their booking request went through.

Using WordPress Customizer Integration

If you want to make form styling editable without touching code, integrate with the WordPress Customizer:

<?php
// Add to your theme's functions.php or custom plugin

add_action('customize_register', function($wp_customize) {
  // Add a settings section
  $wp_customize->add_section('jobber_styling', array(
    'title'    => 'Jobber Form Styling',
    'priority' => 160,
  ));

  // Primary color setting
  $wp_customize->add_setting('jobber_primary_color', array(
    'default'   => '#2563eb',
    'transport' => 'postMessage',
  ));

  $wp_customize->add_control(
    new WP_Customize_Color_Control($wp_customize, 'jobber_primary_color', array(
      'label'    => 'Primary Color',
      'section'  => 'jobber_styling',
      'settings' => 'jobber_primary_color',
    ))
  );

  // Border radius setting
  $wp_customize->add_setting('jobber_border_radius', array(
    'default'   => '6',
    'transport' => 'postMessage',
  ));

  $wp_customize->add_control('jobber_border_radius', array(
    'label'    => 'Border Radius (px)',
    'section'  => 'jobber_styling',
    'type'     => 'number',
    'input_attrs' => array('min' => 0, 'max' => 50),
  ));
});

// Output the CSS
add_action('wp_head', function() {
  $primary = get_theme_mod('jobber_primary_color', '#2563eb');
  $radius  = get_theme_mod('jobber_border_radius', '6');
  ?>
  <style>
    .jobber-form-wrapper {
      --jobber-primary: <?php echo $primary; ?>;
      --jobber-border-radius: <?php echo $radius; ?>px;
    }
  </style>
  <?php
});

Now site administrators can adjust form colors without touching a line of code. Just go to Appearance > Customize > Jobber Form Styling and pick colors.

Advanced CSS Techniques: Animations and Micro-Interactions

This is where good forms become great forms. Subtle animations make the experience feel premium.

/* Label animation: float up when field is focused or filled */
.jobber-form-label {
  position: relative;
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--jobber-text-color);
  transition: all 0.2s ease;
}

.jobber-form-field input:focus ~ .jobber-form-label,
.jobber-form-field input:not(:placeholder-shown) ~ .jobber-form-label {
  transform: translateY(-24px);
  font-size: 12px;
  color: var(--jobber-focus-color);
}

/* Underline animation: expand on focus */
.jobber-form-field input {
  border-bottom: 2px solid var(--jobber-border-color);
  transition: border-color 0.3s ease;
  position: relative;
}

.jobber-form-field input::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--jobber-primary);
  transition: width 0.3s ease;
}

.jobber-form-field input:focus::after {
  width: 100%;
}

/* Checkbox animation: scale and color change */
.jobber-checkbox input[type="checkbox"] {
  transition: transform 0.2s ease;
}

.jobber-checkbox input[type="checkbox"]:checked {
  transform: scale(1.1);
}

.jobber-checkbox input[type="checkbox"]:checked + label {
  color: var(--jobber-primary);
}

These animations are micro-interactions. Each one takes less than 300ms. Users won’t consciously notice them, but they’ll feel the form is polished and responsive.

Putting It All Together: Complete Example

Here’s a complete stylesheet for a modern Jobber booking form:

.jobber-form-wrapper {
  --jobber-primary: #2563eb;
  --jobber-secondary: #1e40af;
  --jobber-border-radius: 6px;
  --jobber-spacing: 16px;
  --jobber-font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --jobber-text-color: #1f2937;
  --jobber-background: #ffffff;
  --jobber-border-color: #e5e7eb;
  --jobber-focus-color: #3b82f6;
  --jobber-error-color: #dc2626;
  --jobber-success-color: #16a34a;
  --jobber-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  max-width: 600px;
  margin: 0 auto;
  padding: var(--jobber-spacing);
  border-radius: var(--jobber-border-radius);
  background: var(--jobber-background);
  box-shadow: var(--jobber-shadow);
}

.jobber-form-field input,
.jobber-form-field textarea,
.jobber-form-field select {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--jobber-border-color);
  border-radius: var(--jobber-border-radius);
  font-family: inherit;
  font-size: 16px;
  transition: all 0.2s ease;
}

.jobber-form-field input:focus,
.jobber-form-field textarea:focus,
.jobber-form-field select:focus {
  outline: none;
  border-color: var(--jobber-focus-color);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.jobber-submit-button {
  background-color: var(--jobber-primary);
  color: white;
  border: none;
  border-radius: var(--jobber-border-radius);
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.jobber-submit-button:hover {
  background-color: var(--jobber-secondary);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

@media (prefers-color-scheme: dark) {
  .jobber-form-wrapper {
    --jobber-primary: #60a5fa;
    --jobber-text-color: #f3f4f6;
    --jobber-background: #1f2937;
    --jobber-border-color: #374151;
  }
}

@media (max-width: 640px) {
  .jobber-form-wrapper {
    --jobber-spacing: 14px;
    padding: 14px;
  }
}

Save this to your theme’s Additional CSS section, then adjust the color values to match your brand. This is your starting point.

Testing Your Styling

Don’t just test in your browser. Real users are on phones, slow networks, and keyboard navigation. Test on:

  • Chrome, Firefox, Safari on desktop
  • iPhone and Android on actual mobile devices (not Chrome mobile emulation)
  • Dark mode on your phone’s OS
  • Slow 3G (DevTools > Network tab, throttle to test loading states)
  • Keyboard navigation (Tab through the form to verify focus states are visible)

If it works on all of these, you’re good. If not, you know where to fix it.

Common Pitfalls to Avoid

Pitfall 1: Using !important everywhere. We used it strategically for button styling. Don’t use it for custom properties—that defeats the purpose. Custom properties win by design.

Pitfall 2: Forgetting mobile. Test on your phone. Seriously. Your mobile visitors will thank you, and your conversion rates will improve.

Pitfall 3: Making validation messages invisible. Errors should be obvious. Color + text + positioning = users understand what went wrong.

Pitfall 4: Ignoring focus states. Keyboard users (including screen reader users) rely on focus indicators. Don’t remove the outline without providing an alternative.

Pitfall 5: Animating too much. One micro-interaction is delightful. Five feels like bloat. Restrain yourself.

Next Steps

You’ve got the playbook now. Start simple with the custom properties, then layer in the advanced techniques as you get comfortable. Most of your visitors won’t consciously notice the micro-interactions and focus states, but they’ll feel the difference.

Your booking form is the bridge between visitor and customer. Make it look right, make it feel responsive, and make it yours.

Ready to connect Jobber to your WordPress site? Native forms, real-time API, no Zapier needed. Get Jobber Integration Pro – $99/year

Free Discovery Call

Start With a Conversation, Not a Commitment

Every engagement begins with a free 30-minute discovery call. We'll map what's slowing your business down and tell you exactly what we'd fix first – no pitch deck, no obligation.

Book Your Free Discovery Call