Ninja Forms Examples and Tutorials

Examples of uses for Ninja Forms with links to my videos so you can make your own.

Some examples require Ninja Forms Pro and or additional add-ons.

Use the link below to get Ninja Forms Pro and help support my work.

All forms are for demo purposes only. No reply will be made and no data is collected.

Get Ninja Forms Pro

Create a post with Ninja Forms

This form is for demo purposes only and no reply will be made.

Get Ninja Forms Pro

Basic Form with Ninja Forms (Free Version)

This form is for demo purposes only and no reply will be made.

Learn to create this form with my Youtube Video: Creating Basic Ninja Forms.

Get Ninja Forms Pro

Basic Form with Ninja Forms styled with CSS (Free Version)

This form is for demo purposes only and no reply will be made.

Copy & Paste CSS Styles

/* Contact Form Styles */
.contact-styled {
background: rgb(240, 240, 240);
padding: 10px 30px 40px 30px;
border: 1px solid rgb(236, 236, 236);
box-shadow: rgba(0, 0, 0, 0.20) 0px 3px 8px;
font-family: Arial, Helvetica, sans-serif;
color: #7f8c8d;
}
.contact-styled h3 {
color: #2c3e50;
}
.contact-styled .nf-field-label {
color: #7f8c8d;
text-transform: capitalize;
}
.contact-styled .nf-form-content input[type=button] {
background: #2ecc71;
font-weight: 700;
font-size: 22px;
border-radius: 3px;
}
.contact-styled .nf-form-content input[type=button]:hover {
background: #27ae60;
color:#fff;
}
.contact-styled .nf-error.field-wrap .nf-field-element:after {
background: #e74c3c;
}
.contact-styled .nf-form-fields-required {
margin-bottom: 10px;
}
.contact-styled .nf-error .nf-error-msg {
color: #e74c3c;
}
.contact-styled .nf-error-msg, .ninja-forms-req-symbol {
color: #e74c3c;
}
.contact-styled .nf-pass.field-wrap .nf-field-element:after {
color: #2ecc71;
content: “\f164”;
}
/* End Contact Form Styles */

You can Make This!

Learn to create this form with my Youtube Video: Ninja Forms stylized with CSS.

Get Ninja Forms Pro

Basic Form with Ninja Forms dark styled with CSS (Free Version)

This form is for demo purposes only and no reply will be made.

Copy & Paste CSS Styles

/* Contact DARK Styles */
.contact-dark {
background: #2f3542;
padding: 10px 30px 40px 30px;
border: 1px solid rgb(236, 236, 236);
border-radius:30px;
box-shadow: rgba(0, 0, 0, 0.20) 0px 3px 8px;
font-family: Arial, Helvetica, sans-serif;
color: #f1f2f6;
}
.contact-dark h3 {
color: #f1f2f6;
}
.contact-dark .nf-field-label {
color: #a4b0be;
text-transform: capitalize;
}
.contact-dark .nf-form-content input:not([type=button]), .contact-dark .nf-form-content textarea {
background: #2f3542;
border: 1px solid #57606f;
border-radius: 30px;
box-shadow: none;
color: #787878;
transition: all .5s;
}
.contact-dark .nf-form-content input[type=button] {
background: #7bed9f;
width:50%;
font-weight: 700;
font-size: 22px;
border-radius: 30px;
}
.contact-dark .nf-form-content input[type=button]:hover {
background: #2ed573;
color:#fff;
text-decoration:none;
}
.contact-dark .nf-error.field-wrap .nf-field-element:after {
background: #ff6348;
border-radius: 0 30px 30px 0;
}
.contact-dark .nf-form-fields-required {
margin-bottom: 10px;
color:#ff6348;
}
.contact-styled .nf-error .nf-error-msg {
color: #ff6348;
}
.contact-dark .nf-error-msg, .contact-dark .nf-error .nf-error-msg, .contact-dark .ninja-forms-req-symbol, .contact-dark .nf-error .ninja-forms-field {
color: #ff6348 !important;
border-color:#ff6348 !important;
}
.contact-dark .nf-pass.field-wrap .nf-field-element:after {
color: #2ecc71;
content: “\f164”;
}
/* End Contact DARK Styles */

You can Make This!

Learn to create this form with my Youtube Video: Ninja Forms stylized with CSS.

Get Ninja Forms Pro

Advanced Conditional Logic Form with Ninja Forms (Paid Version)

This form is for demo purposes only and no reply will be made.

You can Make This!

Learn to create this form with my Youtube Video: Conditional Logic forms with Ninja Forms.

Get Ninja Forms Pro

Advanced Multi-Part Form with Ninja Forms (Paid Version)

This form is for demo purposes only and no reply will be made.

You can Make This!

Learn to create this form with my Youtube Video: Multi-part forms with Ninja Forms.

Get Ninja Forms Pro

Form Redirects with Ninja Forms

This form is for demo purposes only and no reply will be made.

You can Make This!

Learn to create this form with my Youtube Video: Kris Jolls on Youtube

Get Ninja Forms Pro

Newsletter Signup forms with Ninja Forms

This form is for demo purposes only and no reply will be made.

You can Make This!

Learn to create this form with my Youtube Video: Connect Mailchimp to Ninja Forms

Get Ninja Forms Pro

Affiliate Disclosure

This site contains affiliate links. If a product is purchased through these links I may recieve a small comminsion at no extra cost to you. Using these links help me to continue to provide you with more content. I appreciate you viewing my website, watching my videos, and for using my links.