THE FORM

Get the settings and CSS after the jump…

MY FORM SETTINGS

This is a simple contact form with all default field settings.

That’s it. Everything else are default settings. Above is an image of the form I’ve styled. My form was a shortcode wrapped it in a div with an ID of ninja-form-sample so if you use my css below you may want to take that into account. Modifications may necessary depending on your theme’s CSS.

THE CSS

#ninja-forms-sample {
   background: #c2e9ef;
   border-radius: 10px;
   color: #333;
   margin-bottom: 1.625em;
   padding: 20px;
   overflow: hidden;
   max-width: 600px;
}
#ninja-forms-sample .req-item-desc {
   margin-bottom: 10px;
}
#ninja-forms-sample .required-item {
   color: #ff0000;
}
#ninja-forms-sample p {
   margin: 0;
}
#ninja-forms-sample .field-group {
   clear: both;
}
#ninja-forms-sample .ninja-text-box {
 background: #fff;
 border: 3px solid #00b2cd;
 border-top-right-radius: 20px;
 border-bottom-right-radius: 20px;
 -moz-box-shadow: inset 3px 3px 3px rgba(0,0,0,.4);
 -webkit-box-shadow: inset 3px 3px 3px rgba(0,0,0,.4);
 box-shadow: inset 3px 3px 3px rgba(0,0,0,.4);
 color: #00b2cd;
 line-height: 22px;
 margin: 0 0 10px 0;
 padding: 3px 1%;
 width: 70%;
}

#ninja-forms-sample .ninja-textarea {
   background: #fff;
   border: 3px solid #00b2cd;
   border-top-right-radius: 20px;
   border-bottom-right-radius: 20px;
   -moz-box-shadow: inset 3px 3px 3px rgba(0,0,0,.4);
   -webkit-box-shadow: inset 3px 3px 3px rgba(0,0,0,.4);
   box-shadow: inset 3px 3px 3px rgba(0,0,0,.4);
   color: #00b2cd;
   line-height: 22px;
   margin: 0 0 10px 0;
   padding: 3px 1%;
   width: 70%;
}
#ninja-forms-sample label {
   background: #00b2cd;
   border: 3px solid #00b2cd;
   border-top-left-radius: 20px;
   border-bottom-left-radius: 20px;
   color: #fff;
   display: block;
   float: left;
   padding: 4px 2%;
   width: 80px;
}
#ninja-forms-sample .span-textarea-label-left label {
   height: 98px;
}
#ninja-forms-sample .ninja-textarea {
   height: 100px;
   overflow: auto;
}
#ninja-forms-sample #ninja_field_spam {
   float: none;
   width: 22px;
}
#ninja-forms-sample #ninja_submit {
   background-color: #a7feb4;
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a7feb4), color-stop(100%, #6ae67b));
   background-image: -webkit-linear-gradient(top, #a7feb4, #6ae67b);
   background-image: -moz-linear-gradient(top, #a7feb4, #6ae67b);
   background-image: -ms-linear-gradient(top, #a7feb4, #6ae67b);
   background-image: -o-linear-gradient(top, #a7feb4, #6ae67b);
   background-image: linear-gradient(top, #a7feb4, #6ae67b);
   border: 1px solid #a7feb4;
   border-radius: 20px;
   color: #085913;
   line-height: 1;
   padding: 8px 15px;
   text-align: center;
   text-shadow: 0 -1px 1px #a7feb4;
   text-transform: uppercase;
}
#ninja-forms-sample #ninja_submit:hover {
   background: #a7feb4;
   border: 1px solid #a7feb4;
   cursor: pointer; }
#ninja-forms-sample #ninja_submit:focus {
   background: #a7feb4;
   border: 1px solid #a7feb4;
}

Feel free to use this CSS and tweak it for your own form and look for some other styling in the near future.

Great stuff coming around the corner but I hope everyone has a great weekend.

Introducing the WP Ninjas Mailing Lists

If you have a product or products that you simply love and want the inside scoop of every single release and the inside info about it’s future development then we have a solution. Visit our Mailing Lists page and subscribe to only ones you care about and get the latest and greatest info delivered right to your email.

These lists are double opt-in and give you the opportunity to manage your subscriptions with us at bottom of every newsletter you receive.

What are you waiting for? Subscribe right away so you don’t miss the next important update.

Ninja Announcements is available both as a Lite and a Pro version and either version is more than enough to handle most sites needs. This WordPress Plugin for your announcement needs gives you the power to choose when, where, and to whom your announcements are presented.

If you want to schedule an announcement to be displayed on your site for a specific time period, day of the week, or even specific time of the day, Ninja Announcements gives you the control that you need. But this is only the start of what Ninja Announcements can do.

• Advanced control over the HTML markup
• Show announcements to certain visitors. You can display different announcements based on a users logged-in role
• Display random announcements with the Ninja Announcements Group feature
• and much, much more.

The types of uses you might have for Ninja Announcements are only limited by your imagination and the exciting thing is…there’s a lot more to come.

Check out Ninja Announcements here!

Ninja Forms uses the version of jQuery (the javascript library) that comes packaged with WordPress. This means that if you are using an external jQuery file, or another plugin is loading its own version of jQuery, errors may arise. For example, if you are using WordPress version 3.3 or higher, Ninja Forms expects that your site will have version 1.7 of jQuery. If you have a theme or plugin which changes this to an earlier version of jQuery, Ninja Forms may not work properly.

Most of our support cases are javascript related and can be solved by the following steps:

1. Determine that it is a jQuery problem.
1. Attach the form to a page, and load that page in your browser of choice.
2. Right click on the background of your page and select “View Source”.
3. In the window that opens, search (usually F3 on your keyboard) for “jQuery” without the quotes. Look at all the results until you find something with a version number. This will usually be either 1.7 or something like 1.4.2. If you find anything earlier than 1.7 (be sure to search more than once, as your page can load more than one version of jQuery), then you have found the source of your errors.

1. Deactivate all of your other plugins and reload the page which contains your Ninja Form
1. If Ninja Forms now works
1. Activate your plugins one at a time, reloading the page between each activation.
2. Once your form stops working, you’ve found the problem plugin.
3. If you require both Ninja Forms and the other plugin, contact the author of the other plugin and ask for an update to the newest version of jQuery.
2. If Ninja Forms still isn’t working
1. With all your plugins disabled, follow the step mentioned at the beginning of right clicking and selecting “View Source”.
2. If you are still able to find earlier versions of jQuery (lower than 1.7), then the jQuery is being loaded by your theme.
3. Contact the theme author and ask for an update which uses the newest version of jQuery.

If you are unable to get an update from your plugin or theme author, we (the WP Ninjas) are willing to quote a price for these plugin and theme updates on a per-case basis.

I hope that this is a helpful troubleshooting tool. If you follow these steps and are still unable to get Ninja Forms to work properly, then please leave your own forum post with our specific issue.

The Form

My Form Settings

This is a simple contact form with all default field settings with the following exceptions:

• All fields but the spam question have the label set to above the field.
• I added a custom class to the First and Last name of first-name, last-name respectively.

That’s it. Everything else are default settings. I’ve added the form here with the ninja_display_form shortcode and wrapped it in a div with an ID of ninja-form-sample so if you use my css below you may want to take that into account. I’ve also added a post id class to make sure the UI styling of the pop-up only applies to this post.

The CSS

#ninja-forms-sample {
   background: #000;
   background-image: linear-gradient(left bottom, rgb(0,0,0) 14%, rgb(34,34,34) 92%);
   background-image: -o-linear-gradient(left bottom, rgb(0,0,0) 14%, rgb(34,34,34) 92%);
   background-image: -moz-linear-gradient(left bottom, rgb(0,0,0) 14%, rgb(34,34,34) 92%);
   background-image: -webkit-linear-gradient(left bottom, rgb(0,0,0) 14%, rgb(34,34,34) 92%);
   background-image: -ms-linear-gradient(left bottom, rgb(0,0,0) 14%, rgb(34,34,34) 92%);
   background-image: -webkit-gradient(
     linear,
     left bottom,
     right top,
     color-stop(0.14, rgb(0,0,0)),
     color-stop(0.92, rgb(34,34,34))
   );
   border-radius: 10px;
   color: #777;
   padding: 20px;
   overflow: hidden;
}
#ninja-forms-sample p {
   margin: 0;
}
#ninja-forms-sample .ninja-text-box,
#ninja-forms-sample .ninja-textarea {
   background: #333;
   border: 1px solid #444;
   border-radius: 8px;
   -moz-box-shadow: inset 3px 3px 3px rgba(0,0,0,.4);
   -webkit-box-shadow: inset 3px 3px 3px rgba(0,0,0,.4);
   box-shadow: inset 3px 3px 3px rgba(0,0,0,.4);
   color: #ccc;
   line-height: 22px;
   padding: 3px 1%;
   width: 97%;
}
#ninja-forms-sample .ninja-textarea {
   height: 100px;
   overflow: auto;
}
#ninja-forms-sample .first-name-wrap {
   float: left;
   width: 48%;
}
#ninja-forms-sample .last-name-wrap {
   float: right;
   margin-right: 0;
   width: 48%;
}
#ninja-forms-sample .span-spam-label-left {
   float: left;
   width: 48%;
}
#ninja-forms-sample #ninja_field_spam {
   float: none;
   width: 22px;
}
#ninja-forms-sample .span-submit-label-left {
   float: right;
   width: 48%;
}
#ninja-forms-sample #ninja_submit {
   float: right;
}

#ninja-forms-sample #ninja_submit {
   background-color: #c80101;
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c80101), color-stop(100%, #a80000));
   background-image: -webkit-linear-gradient(top, #c80101, #a80000);
   background-image: -moz-linear-gradient(top, #c80101, #a80000);
   background-image: -ms-linear-gradient(top, #c80101, #a80000);
   background-image: -o-linear-gradient(top, #c80101, #a80000);
   background-image: linear-gradient(top, #c80101, #a80000);
   border: 1px solid #c80101;
   border-radius: 8px;
   color: #fff;
   line-height: 1;
   padding: 8px 15px;
   text-align: center;
   text-shadow: 0 -1px 1px #64799e;
   text-transform: uppercase;
}
#ninja-forms-sample #ninja_submit:hover {
   background: #e70202;
   border: 1px solid #e70202;
   cursor: pointer; }
#ninja-forms-sample #ninja_submit:focus {
   background: #e70202;
   border: 1px solid #e70202;
}
.ui-widget-overlay {
   background: #000 !important;
   opacity: .90 !important;
   filter: Alpha(Opacity=90) !important;
}
.ui-dialog {
   background: #111 !important;
   border: 10px solid #000 !important;
   border-radius: 10px !important;
   color: #ccc !important;
}
.ui-widget-header {
   background: #111 !important;
   color: #fff !important;
}
.ui-widget-content {
   color: #ccc !important;
}
.ui-widget-content a {
   color: #ff0000 !important;
}

Feel free to use this CSS and tweak it for your own form and look for some other styling in the near future.

If you are going to be there shoot me a tweet at @jameslaws so that we can connect in person.

The main point is this. Tomorrow, January 18th at 8AM until 8PM wpninjas.net will be unavailable. We will simply display a message and info about the protest. Many, many other sites a lot larger than us will also be participating so don’t be surprised if some sites that you frequent are unavailable. This will demonstrate the kind of internet that these two pieces of legislature will offer. Below is a video and some links to educate yourself on the issue at hand.

For customers of the WP Ninjas, there will be a link for you to log-in and get support if needed so this should not affect you in any way.

• WordPress message on SOPA / PIPA
• Learn More Here »

UPDATE: Do to a recent unfortunate personal event we have not been able to complete these plugins. Be looking for them next week.

Ninja Announcements

This is already a free plugin in the WordPress Repository but it’s getting a fresh update of code and UI. We are also adding a ton of new features for our PRO version.

This plugin make it easy to create announcements outside the flow of you usual blog posts. That can be set to show and hide on a specific schedule, display conditionally on specific content, and be placed anywhere within your template or widget areas, and much more.

And of course we will be dreaming up many more features in the future.

Ninja Pages, Categories, and Tags

This plugin is a collection of various functionality that we’ve needed on many projects and I suspect so have many of you.

Things like adding category, tag, or excerpt abilities to your pages. Adding pages to category or tag archives. Or easily displaying children pages on their parent like an archive. These and many, many more features are coming in this very simple but very handy plugin.

Be looking for these over the next week and Happy Holidays to everyone.

• Easily maintain subscription based products
• Easy PayPal checkout
• No template’s – we wanted something that could be easily integrated into the pages we already were creating.
• Restrict content based on subscriptions

That was about it. The first two are pretty basic and the last might be a more specialized case. We tried several plugins as to not reinvent the wheel but found most of them to be either very buggy, bloated, or just plain broken. Some might have worked but we would have had to dug through all the code to figure out how to make it do what we actually needed. This led us to a simple conclusion; we needed to build our own.

So quick and dirty I threw something together that does everything we needed. But now, after all that work, we think it would be nice to build on it and release a fully functional eCommerce plugin. Here is where you come in.

In the comments share your opinions of what should or shouldn’t be in such a plugin? What frustrations have you encountered when trying to implement an eCommerce solution? What kinds of things would describe a complete success in such a solution?

We want to build this for you and so what you want is the most important thing.