Kadence WP has been around for the last couple of years but has been picking up steam lately due to its compatibility with Gutenberg, giving page builders like Elementor and Divi a run for their money.
Our WordPress form builder is not only compatible with the Kadence WP theme but Kadence makes the process of adding Ninja Forms extremely easy. Read below to find out how you can add Ninja Forms to your Kadence website.
Getting started with Kadence
If you don’t have Kadence, you can install it by navigating to Appearance > Themes > Add New > search Kadence > Install & Activate.
Once activated, I recommend installing the Starter Templates. These templates generate pre-made pages that can be customized to your branding needs through a plug-and-play manner. To install navigate to Appearance > Kadence > Starter Templates. Most of the templates come with their own form block, which you can easily replace with Ninja Forms.
Adding Ninja Forms to your Kadence website
Now that you have Kadence installed, let’s see how to add Ninja Forms using the Kadence WP method, Append a Ninja Form method, shortcode method, and last but not least the Kadence WP template method.
Kadence WP method
First, open the page or post you wish to add to the WordPress form. Click the Add block button. Doing so will trigger a text box to appear with a list of available Kadence and WordPress blocks. Choose the Ninja Form block, by either selecting it from the list or tying, Ninja Forms into the search box and then selecting it.
Adding the WordPress form to a row
Open the page or post you wish to add to the WordPress form. Click the Add block button. Doing so will trigger a text box to appear with a list of available Kadence and WordPress blocks. From the Kadence block list, select Row, doing so will open up a text box that allows you to select, what type of row you want. Again, click the Add block button that is within one of the row columns, then select the Ninja Form block.
Kadence WP Template method
Install the Starter Templates, Appearance > Kadence > Starter Templates. Then, from within your page or post, click the button, titled Design Library. Doing so will trigger a popup with a display of all the pre-made, Sections, and Starter-Packs. Select a template that includes a form from the Starter-Pack. Remove the Kadence form by clicking on the form block, and then clicking Remove block. Add a Ninja Form block by clicking the Add block icon, and choosing Ninja Forms from the block list.
Styling the WordPress form
Install and activate the Layout and Styles add-on, then hover over Ninja Forms to open the menu scroll down, and click on Styling. Doing so will bring you to Ninja Forms Style Settings. This is where you will be able to make all the CSS modifications for Ninja Forms that you desire.
Customizing the Field Labels
To edit the field labels, go to Ninja Forms > Styling > Default Field Styles > Label Styles. To change the color of the labels, find Text Color, then click on Select Color. Doing so will bring up a color picker from which you can choose your color.
Customizing the Submit button
Modifying the submit button can be done by navigating to Ninja Forms > Styling > Field Type Styles > Submit. To edit the background color, and text color of the Submit button, open the Submit Element dropdown. To change the hover state of the button open the Submit Hover Element dropdown.
Append a Ninja Form method
While editing your post or page, in the sidebar on the right side of the editor, there is also an option to Append a Ninja Form. Choose your Ninja Form from the dropdown menu to have your form appear at the end of the page or post.
Shortcode method
Within your page or post editor, you can insert the shortcode of your Ninja Form in order to embed it within your page or post. To do so, add the Shortcode block. This can be done by clicking on the Add block icon, choosing Shortcode from the block list, and then pasting in your Ninja Forms shortcode.
Adding WordPress forms with Kadence WP is easy
As you can see adding Ninja Form with Kadence is easy. As you have learned you can add Ninja Forms using blocks, adding them to the Kadence WP starter template, appending them, and adding them as shortcodes. If you like what our WordPress form builder can do, check out, our guide to Building A Form, and How to Style Your WordPress Forms.
