Leaderboard

I wanted to give you a little preview of a new module I've been working on recently: the Form Builder module. This module lets you create simple-to-complex forms and place them in your site without any need for development. In this video we show how we can create, publish and test a simple contact form in less than 5 minutes. Then we take a quick look at a more complex form (already produced). I recommend viewing the full screen + HD 720p version so that you can see it more clearly than in this small forum embed. (note: there's no sound, so no need to adjust your volume) More about the Form Builder The Form Builder has many options for the developer to customize output and create their own themes, markup, etc. But the goal here was to build something that could enable you (or your client) to publish a form in less than 5 minutes, so that's the focus of this video. This tool is literally easy enough for your clients to create and manage their own forms. Or from a developers perspective, it takes something that used to consume hours and makes it happen in minutes. Form results save in the database and optionally can be CC'd to you by email. Result entries and be viewed, filtered by date, and even edited in the admin. You can export results to a spreadsheet as well. I'm working on the ability to export to pages, though that isn't quite ready yet. How the Form Builder will be licensed This module will be individually licensed on a per-site basis for a small license fee. It will also be available for free personal use to established forum members. Basically, I want to see if I can substitute some of my client work to focus on ProcessWire instead. And in order to do that, I need to have an income (I have a family to support). So I thought that building a special tool like this would be a way to make a go of it. A lot of you have asked to make donations to the ProcessWire project, and while we still won't be able to take donations, you will be able to support the ProcessWire project by purchasing and using the Form Builder in your own client projects. So a lot of motivation for this module came from wanting to provide something really special for all that had wanted to support ProcessWire. After a few months of work, I'm pretty happy with how this module has turned out -- it's already saved me tons of time in my client projects. So I'm thinking and hoping you guys will really like it too. I look forward to your feedback.

Hooray for our fearless leader!

Although I already played around with it some. BUT I'M STILL AMAZED! Thanks Ryan, some more of these ingenious strokes and PW is taking over world.

Thanks guys, glad you like what you see so far. The product will be relatively simple in the first version (like what you see in the video), but I'll continue to expand it to be more and more capable. Things like multi-page forms, double-post URLs (like for Salesforce integration), multi-language forms, publish to pages and more are already planned and getting attention. But much of the direction will also come from what the audience wants most. Making themes is really easy. You just go here to do it. Then click "download" theme. Rename the CSS file included in the theme to jquery-ui.css and place it in /site/modules/FormBuilder/themes/[your-theme-name]/. Copy the /images/ directory that comes with it too. I'll include more detailed instructions with it, but just wanted to get across how simple it is to theme it. That's all assuming that you decide to even use jQuery UI for theming. You can certainly disregard jQuery UI output entirely and style it yourself with your own CSS. But I prefer the quick and easy Themeroller for most cases. Also, if you are using Datepicker or asmSelect inputs in your form, then you'll probably prefer jQuery UI css as I think it would be less fun to style those things manually. The Form Builder uses the same Inputfields as ProcessWire, so you can download more input types (like Soma's color picker, for example).

Came back from holiday, moved in a new office where we want to share the available space with others. So our little coworking project was founded and it needed a website. I started it on friday night and released it finally today (done beside the usual work). It was again a pleasure to use PW for that... http://adlerhost.net The name of the street is "eagle" which is "Adler" in german. And the eagle's nest is called "horst" usually, but we are a host, so we are the localhost in the "adler"street ... ;-) (Haven't even looked in IE, but should work, pretty basic and therefore made it more or less responsive in about half an hour)

I just launched a site for my brother, a New York based travel photographer: http://bit.ly/PXw2bI I've been developing in WordPress for the past five years. While not my first ProcessWire site, it was refreshing to develop in a flexible content management system without the "bloat."

Amazing work Ryan - as usual!

Man, this HUGE in the history of big...

Ryan, This is incredible! Looks amazingly well thought out and super intuitive. I can't even begin to tell you how much I will use this — we have dozens and dozens of forms, and get requests for new ones all the time. I'd press the *like* button 100 times if I could.

Hey- thanks again to everyone for checking this out and liking it etc.. I really appreciate it. I have some projects in the workds that will likely be using PW, so i'll be posting more in the showcase... Processwire has a great community, and I'm really psyched to have chosen it as my primary CMS. Cheers, Marc

When it comes to translating text from one character set to another, look into PHP's iconv() function. You'll want to run your latin1 text through this function before assigning it to a field in ProcessWire: $newPage->title = iconv("ISO-8859-1", "UTF-8", $row['HEADLINE']); With regard to the duplicates, it sounds like you already solved this. But when you are doing an import like this and it's more than a one-time thing, then you need accurate duplicate checking. The best way to get that is to make sure that you are the one assigning the 'name' field, and that you aren't letting ProcessWire auto-generate it for you: $name = wire('sanitizer')->pageName($row['HEADLINE']); $newPage->name = $name; If there is a possibility that $row['HEADLINE'] will ever change on future imports, then you'd be better off using a separate ID field to match things up. I typically add an integer field named 'old_id' to my template, and that would contain the primary key from the old data. Then you would check that when determining whether its an existing page or a new one. Last thing I want to mention is that you might be better off caching your $parent page above the loop where you are creating the pages: $parent = wire('pages')->get('/news/'); // .. then in your loop: $newPage->parent = $parent; The reason for this is that ProcessWire clears its own cache of loaded pages every time you save(). So you'd end up re-loading that $parent (/news/) on every loop iteration. Whereas, if you've kept a copy of it in your code ($parent) then you can continue using the same one without reloading. Basically it's just a little more efficient/faster, though probably doesn't matter much.

Ok, so now, Go to setup>fields, and create a new field with type "images", give whatever name you want, let's say "my_images". Go to setup>templates, choose your index template, and add this new field to it. Open your index page on the pages tree, and populate the images field with some images. On the index.php, go to the code of the galery, you must have something like this (I'm assuming that you have prettyPhoto already working): <!-- taken from the prettyPhoto site --> <a href="images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]" title="You can add caption to pictures."><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" /></a> <a href="images/fullscreen/2.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Nice building" /></a> <a href="images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" /></a> <a href="images/fullscreen/4.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="Rock climbing" /></a> <a href="images/fullscreen/5.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="Fly kite, fly!" /></a> replace all those images by this: <?php foreach($page->my_images as $image){ echo "<a href='{$image->url}' rel='prettyPhoto[pp_gal]'><img src='{$image->width(60)->url}' width='60' alt='{$image->description}' /></a>"; } ?> In the previous example, the thumbnails will be miniatures of the pictures with 60px width and variable height. If this is not what you want, follow along: Install Apeisa's Thumbnails module http://modules.proce...ype-crop-image/ (or even better! install Soma's amazing "Modules Manager" http://modules.proce...odules-manager/ and from there install the Thumbnails module). Go to setup>fields, choose the newly created my_images field and change its Type to "Cropimage". Go to the "INPUT" tab on the same page, and on "Thumbnail Settings" (bottom), change from "thumbnail,100,100" to "thumbnail,60,60" (or whatever you want). Open your index page on the pages tree, and now you will have a thumbnail option for each of the images you uploaded before. Crop your images as you wish. On the index.php file change the previous code to this: <?php foreach($page->my_images as $image){ echo "<a href='{$image->url}' rel='prettyPhoto[pp_gal]'><img src='{$image->getThumb('thumbnail')}' width='60' height='60' alt='{$image->description}' /></a>"; } ?> Et voilà, that should work edit: changes from this "60" to this '60' on the last snippet

First pw site... http://www.stokar.com/ composer's management agency. Processwire was great for this!; took on every challenge and request the client had with ease. Thanks to Ryan, and to everyone on the forum - it was an essential resource for working out all of the code to make this site work. -marc

Pinch me. And, I think I need a hug. Edit: Forgot to ask: is there an eta on when this will be released?

awesome. just awesome.

$this->message('thank you Soma'); object(Notices)[8] protected 'data' => array 0 => object(NoticeMessage)[168] protected 'data' => array 'text' => string 'thank you Soma' (length=14) 'class' => string 'FrontMembers' (length=12) 'timestamp' => int 1346793966 'flags' => int 0 protected 'localHooks' =>

Up until now i've basically only done simple site conversions which didn't involve any design (on my part). In the near future i've got a couple of projects where i do need to make some layout and design decisions. I was wondering if you guys use any special tools/apps to create wireframes and mockups or just use Photoshop/Illustrator/Inkscape/GIMP/Fireworks. etc. Ofcourse mighty Google shows a lot of results like http://www.balsamiq.com/products/mockups and https://gomockingbird.com/ but i'm interested in your input on this subject.

WOW! Really, really nice work! But where the themes come from? and how to create a custom one?

This might be the endgame. The sole reason for me to use WordPress is Gravity Forms. Great work and I'm sure a lot of people will use (and therefore pay for) this.

It's alright I suppose On a serious note, it's definitely a good thing that I can think of half a dozen uses for it already, so good work!

It has moved to http://www.globi.ca/blog/wordpress_vs_processwire/

SiNNuT: what I was talking about back there was probably more like HTML prototyping than just plain wireframing, though in my humble opinion HTML prototypes are rather straightforward evolutionary step of HTML wireframes -- or "HTML wireframes on steroids." Basics and reasoning behind these kind of techniques are discussed (for an example) in this Webdesigner Depot article, this Handcrafted post about how 37signals work on their designs and in this rather old but still valid blog post by 37signals about why they like to "skip Photoshop." I'm still hoping more people in our industry would take these techniques even further though. What I'm currently most interested in (and experimenting with) is taking HTML wireframes to what I see as "the next level" by adding not only bones (wireframes / structure) but also as much meat (functionality) as possible before drawing / having someone else draw the skin (graphics) on top of it all. Yeah, I really suck at metaphors. Sorry for that. I'm actually working on a project right now that I'd love to see as close to being completed as possible before adding any distracting eye candy, though that's definitely not an easy task to achieve; lots of people still claim (I say claim because I'm not very satisfied with this answer) that they cannot really "get" the whole thing without seeing layouts. In my opinion keeping things as bare and clean as possible forces everyone to concentrate on what really matters: usability and user experience. Long story short: what you're doing is probably very close to what I'm talking about here and I'm happy to hear that you've already implemented a method like this. I'm not a big fan of front-end frameworks myself and definitely not an expert on that subject, but if I've understood properly how they work (and why they exist in the first place) this is exactly what they're good at

We used FlairBuilder a few years ago, but it always felt too complicated -- to the point where creating and/or modifying wireframes with Photoshop was actually faster (not a good situation IMHO, isn't this one of the things wireframing apps are supposed to help with?) The good thing about it was it's ability to handle interactions, but that's just about it. Unless they've made massive improvements I really wouldn't recommend going that way. These days we're mostly using Balsamiq. Since the first time I gave it a try, it's been an inseparable part of my toolbox whenever I'm designing a new UI. Compared to more complicated tools like FlairBuilder, it's strong point is definitely ability to create high quality mock-ups super fast (not to mention that learning to use it takes about five minutes.) Highly recommended! Slightly offtopic: HTML wireframing is a very nice technique to learn. I'd suggest using this method as often as possible, especially if you're going to design / develop applications and/or application-like sites etc. or generally any solution where UX is more important than (too often completely redundant) graphics. With interactive (HTML or not, though creating markup or even code at this point quite often makes things easier later on) wireframes you're not going to need much guesswork, since you can simply implement things and test -- or better yet have someone else test it for you..

You can always reset your password just by pasting this temporarily into any one of your templates, and then viewing a page that uses the template: $u = $users->get('admin'); // or whatever your username is $u->of(false); $u->pass = 'your-new-password'; $u->save();

i tried many of these tools and found for my opinion balsamiq is the best. its easy and fast. what i hate most time from the other tools is they are to complicated, to feature-rich. for an online tool you can try https://moqups.com. when you work with a mac keynote is a good tool too. there are several templates for different devices at http://keynotopia.com. in some situations http://www.wirify.com can be helpful...

I use Lucidchart for diagramming and wireframing. It's fast and in general a great tool. I also used mockingbird, but that was in an early beta phase so no real input there.

About the website: I like it, but I wonder if the navigation is really necessary... The site works very well only by scrolling, and the navigation can give people the feeling that there is something more than this page, and make them scroll up to press the links only to find out that they have already seen everything. edit: I noticed that you removed the navigation on smaller screens. Works great Maybe you could replace it on bigger screens by a sentence... like a slogan, or so... or by something immediately useful, like the written address.

oh, that "r" makes all the difference, also in how you pronounce both words. I don't think a German speaking person would make that connection.

intro and installation of PW http://bestproductips.blogspot.nl/2012/09/install-processwire-step-by-step.html

I agree with that guy's generalisations - frameworks are always bad. I hate saving tonnes of time and love reinventing the wheel on a daily basis because I have nothing better to do and love watching the years fly by.

I'm super curious what page has urls like 'gallery/ladies' and 'albums/jane'. High Hopes for something naughty.

I use prettyPhoto. It is reasonably fast, has autosize, has auto-hashbang, has reasonable themes (I pretty much keep them vanilla, there isn't much to 'style' anyway, once you have the photo opened).

Ryan, I figured out the above bug. It comes from AdminBar - I disable template changing there. I will edit it to remove that selection all together.

What don't you understand? I thought you understand code more than words? I can't explain more without repeating what I already wrote. It does search for pages that have the same tags selected, counts the tags matching and adds that to the score property and sorts by score AND modified, so the most recent are first. $pages->findRelated( Page $page, PageArray $tags, string $field [, string $tmpl, int $limit] ); $page = current page or another one (to exlude it from the search) $tags = a PageArray of tags $field = the Page field which holds the tags, to know which field to search optional: $tmpl = the template of the pages to search in. Multiple templates like "t1|t2|t3" $limit = how many to search It returns a PageArray which can be used further, if none found it returns null.

Hi Yellowled, one of my favorite is Colorbox. I find it quite handy and highly customizable.

Here's a start on creating modules documentation. I still need to write a whole section on hooks, but it's fairly complete in other areas. Please feel free to edit/add to this. http://wiki.processwire.com/index.php/Module_Creation