How to Change the Color of Your Contact Form Submit Button

Are you having trouble customizing the color of your contact form submit button in WordPress? Read this guide, and we’ll send you in the right direction!

Website design is essential, with even small elements like the color of contact form buttons making people more likely to use it.

Ninja Forms simplifies form-building and design for your WordPress website. You can pick different colors and styles for your submit button to make your contact form stand out and get more clicks!

Check Out Our Form Builder

Why Color Matters?

Color enhances user experience and can drive interactions and conversions. A well-styled submit button is more inviting and can motivate users to take action. Whether you need them to make a purchase, subscribe to newsletters, or contact you, the right design is key.

When you customize button colors, it allows you to do things like:

• Evoke a sense of urgency
• Create excitement
• Reflect the energy and atmosphere you want to
• Catch the reader’s attention
• Use colors and designs that reflect your brand identity

In short, the color of your buttons is key to drawing in your site users and gaining conversions or form completions. Some of the most popular colors include:

• Red, which expresses urgency and encourages people to take action
• Green, which people associate with “Go” and progress
• Orange, which represents a certain amount of energy

Depending on your brand styling, your choices can vary significantly. In some cases, a more subdued, professional-looking button will be ideal, while others demand creativity and flair.

While you think about the ideal button, let’s discuss how to change the button color.

How to Change the Button Color on Your WordPress Forms

I know we’re all in different spots when it comes to tech stuff, so I’m going to walk you through three ways to change the button color of that submit button on your WordPress form.

First, we’ll play with the Layout and Styles add-on. Then, for those who love a little coding, we’ll get into the CSS magic. And if you’re somewhere in between, I’ve got a mix of HTML and CSS for you.

Let’s get started.

1. How to Change the Color of a Contact Form Submit Button Without CSS

Not a fan of CSS? Then we have the solution for you. Layout and Styles is one of our most popular form-building add-ons. It empowers you to structure and style your form with or without CSS.

First, install and activate Layout and Styles.

1. Head over to Ninja Forms > Styling.
2. Select Field Type Styles (3rd tab over).
3. Choose Submit > Open Submit Element Styles.
4. Navigate to Background Color > Select Color to choose your background.

That’s it, nice and simple. But what if you want to change the color for a specific form?

1. Return to your form editing dashboard.
2. Find the Submit button and open the Styles drop-down to reveal your styling options.
3. Select a background color, and there you have it.

 2. How to Change the Submit Button Color in CSS

If you want more control and flexibility when customizing your contact form submit button, you can use CSS. Here’s how to change the button color with CSS:

1. Go to your WordPress dashboard and navigate to the page where your contact form is located.
2. Edit the form using Ninja Forms.
3. Find the submit button element and click on it to open the settings.
4. Open the Display drop-down and look for the Custom Class Names section.
5. In the “Element” field, enter a custom class name for the button.
6. Save the changes and update the form.
7. Now, you can add custom CSS code to your WordPress theme’s stylesheet or use a custom CSS plugin to style the submit button. Target the class name you entered earlier and apply the desired color using CSS properties like background color.

Using CSS gives you more control over the design of your submit button. You can customize properties like the button’s size, color, font, and hover effects. Experiment with different styles to create a submit button that perfectly matches your website’s design and branding.

Remember to save your changes and refresh your website to see the updated color of the submit button.

Here are hex codes for some of the most popular colors you can use to style your submit button:

• Red: #FF0000
• Orange: #FFA500
• Green: #008000
• Yellow: #FFFF00
• Blue: #0000FF
• Purple: #800080
• Black: #000000
• White: #FFFFFF

3. How to Change the Button Color in HTML

Our intuitive drag-and-drop form builder automatically creates a submit button – no need to wrestle with HTML to create one.

Perhaps you want a button that triggers an info popup. Ninja Forms has your back! Here’s a little trick using our HTML field:

1. Find the HTML field under Layout Fields and drop it into your WordPress form.
2. Hit that little carrot icon to bring up the editor.

3. Insert this code:

<a href="your-desired-url-here" target="_blank" class="button">Click Me</a>

Now, you might wonder, “Isn’t that a link, not a button?” Bingo, you’re right! But here’s the catch: you could insert an actual button like:

<button onclick="window.location.href='https://example.com';">Click Here</button>

However, it won’t work within a form, so we opt for the link method. To give your contact form button a bit of flair, you can style it using either an embedded style tag or inline CSS.

Using a style tag:

<style> 
.button { 
display: block; 
height: 25px; 
width: 75px; 
background: #32CD32; 
text-align: center; 
border: 2px solid rgba(33, 68, 72, 0.59); 
} 
</style>

Or, with inline CSS:

<a style="display: block; height: 25px; width: 75px; background: #32CD32; 
text-align: center;" border: 2px solid rgba(33, 68, 72, 0.59);" 
href="https://ninjaforms.com/" target="_blank" rel="noopener">Click Me</a>

And there you have it! Mixing a dash of CSS with a sprinkle of HTML, button color and style edits aren’t too daunting after all. In fact, it’s a bit like digital crafting – quite the fun adventure, don’t you think? Happy form-building!

Make Your Contact Form Submit Button Shine and Pop With Ninja Forms!

Hey superstar! You’ve just unlocked three great ways to color up your contact form submit button. Now, take that knowledge and show off some dazzling buttons on your site.

Want to unlock even more creative goodness? Check out the Layout and Styles add-on. Trust us, it’s like giving your forms a mini makeover! With a 14-day money-back guarantee, it’s risk-free fun. Snag it stand-alone or grab it with our Plus Membership to unleash a world of fantastic add-ons. Go ahead, glam up your site, and take that shot!