How to Easily Add Buttons to a WordPress Form

Want to try something different to spice up your WordPress forms? Have a link out in your form or a informational popup that needs to open while a user fills out the form? Plain links can be boring. Try buttons! There are a good many reasons why you may want to use one, and they’re super easy to make. Follow along with us below as we walk through how to add buttons to a WordPress form!

The Ninja Forms’ Summernote Editor

Buttons take HTML and CSS to create, and that can make for a real headache for those of you that aren’t familiar with the two. Where to add what? Which file? How? Am I going to mess something else up? AHHH!

Let us make this incredibly easy for you. Ninja Forms uses the Summernote WYSIWYG editor in several different places throughout the builder. This makes customization that normally requires HTML and CSS to be input into different files accessible to you in one easy location inside your form builder. For example, styling your emails is incredibly easy using Summernote.

We’re going to leverage the Summernote editor that can be found in the HTML field within your Ninja Forms builder. Placing your HTML and inline CSS within it saves you time and energy whether you know what files you’d otherwise have to look for or not. Let’s begin!

Add Buttons to a WordPress Form!

There are a variety of different ways we can add buttons to a WordPress form, and a variety of different uses we can put them to. For this example we’ll be building a button by creating a button class and then styling it. In my own experience, this offers the greatest flexibility and is super easy. Functionally, it will open a new tab to a destination URL we specify. If you have no idea what I’m talking about, no worries. We’ll walk through it below.

Step 1: Add an HTML field to your form

The HTML field will literally become our button. Just add it to your form wherever you want the button to appear, and in the toolbar above the rich text editor, click the <> icon. This toggles us over to a part of the editor where we can directly input HTML and CSS. You should be looking at this:

summernote editor HTML and CSS input are to add buttons to a wordpress form

Step 2: Enter the HTML & CSS to create your button

No clue how to do this? No fear. You can copy and paste if you like the button I made, and if not we’ll break everything down so that you know what to adjust. Here’s the code:

Just copy and paste that directly into the <> view of the editor. Click “Done” and preview your form now. Here’s what you should see:

add a button to a wordpress form - it's a button!

It’s a button! You like my clever choice of lime green for this button? No? Can’t blame you. Want to adjust the dimensions of the button? Change the border? The text? Let’s break down the parts of this code so that you understand what you’re looking at and can make adjustments.

Step 3: Making Adjustments

Here’s our code to add buttons to a WordPress form again for reference. We’ll go through it line by line to show you what each part does and how it can be adjusted.

Line 1: This sets up a redirect to ninjaforms.com that will open in a new tab when the button is clicked. Pasting a new URL over the Ninja Forms URL will send users to a different location on click. “target=”_blank” is what tells the redirect to open in a new tab, leaving the tab with the form in it open. Class=”button” defines this as a button. “Click Me” can be replaced with whatever text you want to appear in the button.

Line 2 & 11: Opening and closing tags for our styling. Don’t change these or things will break 🙂

Line 3: Remember the class=”button” in line 1? This line tells us the styling that follows is specific to that button  class.

Line 4: This gives the button a box or block shape. There are others that you can use if you want to experiment.

Line 5 and 6: This determines the height and width of the block. Experiment around to find the size that works best for you!

Line 7: This sets the background color for the button. Hate my choice of lime green? Choose your own!

Line 8: This aligns the text in the center of the block.

Line 9: It’s not terribly visible with the color scheme I’ve chosen, but there’s a border that runs around the block. Use this to change its color.

You Have a Button!

That’s all there is to it, although there’s a lot more that can be done with it. That link goes to W3 Schools, an excellent resource for teaching yourself more if you’re interested. What are you using buttons for? We’d love to know, so please share in the comments below! That goes for questions, too- ask away!