Leaderboard

Simple Contact Form Using Google Recaptcha & Valitron validation library I just finished creating a simple Contact-Form for a client's website so i thought it would be really helpfull to share it with the community. The contact form uses: Google recaptcha for validating the user is not a robot (https://github.com/google/recaptcha) Valitron validation library for validating the form fields (https://github.com/vlucas/valitron) Twitter Bootstrap 3.0.0 for form HTML The contact-form is located inside a contact-page, so the bare minimum you need in order to setup your own is: contact.php (template file used by your contact-page) _contact-controller.php (file used as a controller for your contact-form functionality like send email, validate fields etc) 2 extra lines inside your composer.json file So, let's start: First you need to update your composer.json file adding 2 lines inside the require object: "vlucas/valitron": "^1.2", "google/recaptcha": "~1.1" Here is a sample composer.json file: { "name": "processwire/processwire", "type": "library", "description": "ProcessWire CMS/CMF", "keywords": [ "cms","cmf", "content management system" ], "homepage": "https://processwire.com", "authors": [ { "name": "Ryan Cramer", "email": "ryan@processwire.com", "homepage": "https://processwire.com", "role": "Developer" } ], "require": { "php": ">=5.3.8", "ext-gd": "*", "vlucas/valitron": "^1.2", "google/recaptcha": "~1.1" }, "autoload": { "files": [ "wire/core/ProcessWire.php" ] }, "minimum-stability": "dev" } open console and navigate to processwire root folder (where composer.json file is) on this step i assume you have already setup composer for your project, otherwise google it run the following command: composer update this will create a vendor folder (if it does not already exist) and download valitron and google recaptcha libraries. Then open your contact-page template file(usually named contact.php inside your templates directory) and add the following: * Note: The form below uses bootstrap 3.0.0 css, so if you are using something else you need to make the appropriate changes. <?php namespace ProcessWire; include('_contact-controller.php') ?> <div class="container"> <div class="row"> <div class=" col-md-4"> <h2>Contact Form</h2> <?php if($session->flashMessage):?> <div class="alert <?=!$session->sent && (!$v->validate() || !$resp->isSuccess()) ? 'alert-danger' : 'alert-success'?>" role="alert"> <?php echo $session->flashMessage;?> </div> <?php endif;?> <form id="contact-form" method="post"> <div class="form-group <?=$v->errors('name') ? 'has-error' : ''?>"> <label for="name">Name</label> <input class="form-control" name="name" id="name" type="text" value="<?=$sanitizer->text($input->post->name)?>"> </div> <div class="form-group <?=$v->errors('email') ? 'has-error' : ''?>"> <label for="email">Email</label> <input class="form-control" name="email" id="email" type="text" value="<?=$sanitizer->text($input->post->email)?>"> </div> <div class="form-group <?=$v->errors('message') ? 'has-error' : ''?>"> <label for="message">Message</label> <textarea class="form-control" name="message" id="message"><?=$sanitizer->text($input->post->message)?></textarea> </div> <div class="form-group"> <!-- Google Recaptcha code START --> <div class="g-recaptcha" data-sitekey="<?=$googleSiteKey?>"></div> <script type="text/javascript" src="https://www.google.com/recaptcha/api.js"> </script> <!-- Google Recaptcha code END --> </div> <button type="submit" class="btn btn-primary">SEND</button> </form> </div> </div> </div> <?php //here we remove the flash-message because it is already shown above the form. $session->remove('flashMessage'); //reset 'sent' variable for future submit $session->sent = false; ?> Next create a file inside you templates directory with name: _contact-controller.php: and set the required variables($googleSiteKey, $contactFormRecipient, $contactPageID) <?php namespace ProcessWire; /** * here we include Valitron & Google recaptcha libraries * make sure the path is correct in your template */ include(dirname(__FILE__) . "/../../vendor/vlucas/valitron/src/Valitron/Validator.php"); include(dirname(__FILE__) . '/../../vendor/google/recaptcha/src/ReCaptcha/ReCaptcha.php'); /** * here we add the form field values to Valitron */ $v = new \Valitron\Validator(array( 'name' => $sanitizer->text($input->post->name), 'email' => $sanitizer->email($input->post->email), 'message' => $sanitizer->text($input->post->message), ) ); /** * validation rules set for each form field * For more details on Valitron/Validator usage visit: * https://github.com/vlucas/valitron */ $v->rule('required', ['name', 'email', 'message']); $v->rule('lengthMin', 'name', 5); $v->rule('email', 'email'); /** * set Google recaptcha site-key & secret-key * create a new key from: https://www.google.com/recaptcha/admin */ $googleSiteKey = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'; $googleSecretKey = 'YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY'; /** * set the email of the contact form recipient(usually the website owner) */ $contactFormRecipient = 'your@company.com'; /** * set the id of contact-page in order to redirect there when the form is sent */ $contactPageID = '1045'; //here we check whether the 'name' field exists inside post variables (which means the form is posted) if ($input->post->name) { //if fields validation passes if ($v->validate()) { $reCaptcha = new \ReCaptcha\ReCaptcha($googleSecretKey); $resp = $reCaptcha->verify($input->post->{'g-recaptcha-response'}, $_SERVER["REMOTE_ADDR"]); //if google-recaptcha validation passes if ($resp->isSuccess()) { //This is the HTML message $message = ' <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Contact Form | ' . $input->post->name . '</title> </head> <body> <p>' . $input->post->message . '</p> </body> </html>'; //here we send the form to $contactFormRecipient wireMail($contactFormRecipient, $input->post->email, "Contact Form | " . $input->post->name, $message); //here we set a flash-message to notify the user that the form was successfully sent $session->flashMessage = 'Thank you for your message! We will get in touch with you shortly.'; //save in session that the form is sent $session->sent = true; //finally redirect user to contact-page $session->redirect($pages->get($contactPageID)->url); } else { //self explain $session->flashMessage = 'Error while validating you are not a robot!'; } } } ?> Thats all! You now have a simple contact-form working with captcha and field validation! I would be more than happy to help anyone having problems on the setup.

Actually just thought to go back and check the: $process = $this->wire('process'); bd($process->getPage()); and it works fine also: and: $process->getPage()->id returns 41

The latest version now uses a proper csv parser, not php's str_getcsv so now it supports line breaks within csv "fields". This should deal with the problem that @elabx reported earlier this year - sorry it's been so long coming. I'd love to hear how this new parser works out for everyone's CSV importing needs. If it seems good, then I will also start using it in my Table CSV Import/Export module: http://modules.processwire.com/modules/table-csv-import-export/ Thanks for any feedback. Does anyone else have anything outstanding that needs fixing?

Sorry, I shouldn't give advice without really checking into it. This is what you need: $event->arguments[0]->id That will get you the id of the user/page. BTW, the way I figured this out was to bd($event) inside the validEmail() function. With TracyDebugger installed I see this: bd($event, '$event', array('maxDepth' => 5)); Then to confirm, I did this: bd($event->arguments[0]->id); and got this: With the ID you can get the full user object like this: $uid = $event->arguments[0]->id; bd(wire('users')->get($uid)); See all the user fields under "settings"

v059 is available with the features and fixes mentioned above. The 'Submodules' section in the admin has also got a minor redesign.

Nice work @Jonathan Lahijani and @cmscritic - glad you're back on ProcessWire and WOW the site loads fast now!

A note about speed... we switched the hosting from ServInt to KnownHost a couple days ago and now the site is fast... like scary fast. (note: the WordPress site was neither on ServInt or KnownHost, but rather a WP managed hosting provider which one would expect to have decent speed)

Yes. You should use WireMail. First option, you want to use AJAX to change your HTML markup dynamically. For example, if a client click on the button 'Buy', it will replace the form markup by a custom message like 'Thanks for your order!' WITHOUT reloading the page. For that, you need a PHP script which handle the mail process (you can found example here on the forum), bootstrapping ProcessWire and a simple Javascript script. Second option, you set your form action attribute to the same page - <form action="./"> ... </form> - and you process the $_POST variable (or $input->post) in the same page with PHP. This will reload the page, but do not redirect you to another page.

@benbyf I forked the module and added the functionality, you can find the module at github: https://github.com/flydev-fr/MarkupTwitterFeed To search hashtag use it as the following : $options = array( 'searchQuery' => 'ProcessWire', 'limit' => 3 ); $t = $modules->get('MarkupTwitterFeed'); $out = $t->search($options); echo $out; The function search() act like render(). Thanks again for the suggestion (searching for hashtag). I think we can improve it a bit, let me know for any needs.

Never mind. Figured it out seconds after posting that. As you were.

I think it's fine now, just committed a fix to github. The Reno theme has the 'modal' class on the html while the default theme has on the 'body' and I was unaware of this until now. Now I fixed this issue only but maybe there will be other places where it needs to be checked.

Hi @biber - I think your problem might be similar to this: https://github.com/justonestep/processwire-imageextra/issues/9 Can you cleanup the db table for the images field: "field_images" (or similar) by removing the extra language fields? Looks like the problem should be fixed in the dev branch of that module, but you still might have to cleanup manually at this point.

Sorry, forgot to state that I had re-built the site using it's own domain. It's no longer subject to the multiple copies of PW issues. It's something specific to this site and I think I'm starting to track down the issue. There's a broken image in one of the CKeditor fields and it's causing the logout. I'm going to manually remove the image using phpMyAdmin and see what happens... UPDATE: FIXED! For some reason, if there's a broken (ie: missing) image in a rich text editor field it causes logouts. I haven't tried reproducing this yet from a clean install, but something funny happens when there's an image that's referenced in a rich editor field and it gets removed.

I decided to add a dedicated "Tracy Toggler" panel. Well it's actually just a button - you can see it second from the end: and when it's disabled, this is all you see at the bottom right of your site: I left the "Disable Tracy" button in the Panel Selector because I figured some users may prefer that approach - it's your choice.

Ok, the latest version has a new disable/enable option. I added the Disable button to the bottom of the Panel Selector because I think most of you have that enabled all the time. Please let me know if that won't work for some of you and I can rethink @szabesz's suggestion for adding it to the System Info panel. I would have done that straight away, but that is a Tracy core panel, so I would have to add with JS. The main problem is that panels are lazy rendered, so the DOM for panels is not available until the first time they are loaded. Still do-able, but requires a little more effort. The Enabler button is simply a red bug icon (like the one I am using for Tracy in the site modules list). It appears at the bottom right of the page when you have disabled Tracy. It only appears on frontend and backend if the debug bar is enabled for those locations. Note that this disabler doesn't actually uncheck the "Enable Tracy Debugger" checkbox in the settings - it's just disabled with a cookie. I am happy to revisit this approach, but my reasoning was that I'd rather the settings checkbox had a little more power, so that if it's unchecked there, the enable icon won't actually appear at the bottom right of your site. Anyway, hope this helpful and don't be shy if you think I have messed it up by doing it this way

Sorry it took me a while to answer, and thanks for the input and for trying it out! The module is all about ProcessWire's built-in import/export functionality, merely exposing and automating it. For the moment I'd rather have it become good and stable in this than doing both formats mediocrely. For example, there are still issues with some common field types, and I want to look into special cases during import that are handled specially by the GUI when doing it graphically. In the meantime I did some tests with ProcessWire versions 2 and 3. The module itself worked without any changes both in v2 and v3 installations (thanks to ProcessWire's namespace magic), but I had to do differentiate in the import script. v1.0.1 contains that and some small fixes.

It's not so much migrate or migration but just building upon what the processwire API provides. I really do appreciate the "freedom" the API provides, but I also sometimes wished there was some structure or guidance to follow (i.e. a Framework). You'll have to excuse me coming from a .NET background and still struggling with a lot of PHP's idiosyncrasies and gotchas. I'm not saying a Framework is useful for every scenarios, but for some scenarios it would be much quicker to get a site going if we could leverage reusable, tested components ala a Framework. I'm sure there are plenty here that have built their own framework(s) over the years. Would be nice to see an official or a collaborated effort.

Fixed thanks

The whole text of that page should be "see footer"

This one and a permanent disable feature is what I'm voting for. I mean the "System Info", since this is the one that cannot be turned off. "Disable Once" and "Disable Permanently" would do, I suppose.

I'm curious what you think a framework could migrate, that processwire can't.

SOLVED. Thanks KarlvonKarton. The problem was I set the Home name for the new language same as default one was. Thought it is just a name not a part of url. Now everthing works well.

i would recommend using @adrian s awesome tracy console: $items = simplexml_load_file('https://www.your-old-website.com/?export=blogitems'); foreach($items as $page) d($page->yourxmlnode->whatsoever); on the other site you can easily see what's happening like this: $p = $pages->get(2427); // your-test-page-id $p->of(false); $p->eventcancelled = 'your_console_output_from_other_site'; d($p->eventcancelled); as this field is a checkbox it would modify the '<p>test</p>' to 1 and you would know on which side the problem exists: but still i have to add that i have no experience with more complex import/export scenarios. for example multilanguage. maybe that's already possible with the other solutions

thanks, it's fixed

@szabesz Yes, of course, if I uncheck to show in frontend it will be not shown, but i was thinking that if debug is set to false and Im not logged in as superuser it should be not shown.

@Zeka How about unchecking "Frontend" in "Debug Bar and Panels > Show Debug Bar"?

Glad you like it @szabesz !!

"Valitron is a simple, minimal and elegant stand-alone validation library with NO dependencies." That's the way I like it Thanks for the detailed instructions. I will probably use it in one of my projects in the near future.

As opposed to AOS, we can enable Tracy for both frontend and admin, so the disable feature would be nice to have on its main panel too, which I have already missed a few times.

Hello Adrian, Tracy makes problems during updates of modules if it is in strict mode (show warnings as errors), because there are several warnings of the PW core files. I use it in strict mode and I always have to disable Tracy Debugger if I want to update a module. Otherwise the module will not be updated if I skip the warning. So it would be a nice addition if you add an enable/disable link for Tracy Debugger at the bottom like AdminOnSteroids module (see image below). This makes the workflow much easier. Best regards

Roland this looks really great!!!

Hi @szabesz you're right, there are various approaches to introducing, I've to analyse all that and after that apply as indicated by my customization!! Much appreciated man for helping me in such a great manner.

Follow the instructions in this post to move the Name to the Content tab Then hide the Settings tab altogether using this module (http://modules.processwire.com/modules/restrict-tab-view/)

Hello, Which one is the module in question? Module related questions should normally be asked in their own forum section. Anyway, don't you have a backup by any chance? The sort of problems you describe can be fixed most easily be reverting to a backed up version which you should always create right before trying out new modules or any other mayor changes to you site.

Wow, 3 hours on this and it came down to this. I think time to call it a night then and tackle my mapmarker issue tomorrow. Thanks!

The PW namespace is ProcessWire, not Processwire

Sorry wasn't really checking through everything properly. Take a look at how I am doing it for InputfieldPassword::render https://github.com/adrianbj/EmailNewUser/blob/master/EmailNewUser.module#L50 $process = $this->wire('process'); if($process instanceof WirePageEditor) { $userpage = $process->getPage(); if($userpage->is(Page::statusUnpublished)) $event->object->notes = 'NB: Because you chose to automatically generate the password for new users, you can leave these blank. However, if you do enter a password here, it will override the generated one.'; }

Ok, I have added the checkbox: Not sure how best to implement this cleanly. If it was a simple matter of checking if there was an additional field at the end of the row that was 1 or 0, that would be ok I guess, but with the CSV field pairing functionality and it's checks, I think it is going to start to get a bit messy, but if you think it would be really worthwhile, let me know and maybe I'll revisit it.

Absolutely awesome.

It's what I do for a living so.. gotta pay the bills

It is pretty fast for me (Finland). Very crisp and clean designs, even with all the ads! Nice work @Jonathan Lahijani and @cmscritic!

Thank goodness. I almost had a heart attack when I saw a grade d. Glad to be back, so much quicker.

WordPress: Grade D 65, 10.29 seconds load time, 3.5 MB page size, and 206 (!!) requests (URL) ProcessWire: Grade A 93, 1.73 seconds load time, 2.5 MB page size, and 70 requests (URL) (Using the same service and location) Good work

I have updated the screenshot and added in Jonathan's details - I have kept Ryan in there as well because he did the initial coding which I think formed the basis for what Jonathan worked from. Hopefully that's all ok.

Hello @marvinbible, welcome to to the forums, If I understand you correctly, you are looking for the way to install a frontend theme, in the sense of installing WordPress, Joomla, etc... themes, right? In the ProcessWire world there is no such thing at all, so there is no way to install it either. We have "site profiles" to choose from during the installation process of the system. There are various ways to apply various template files to a given page of the site, but normally you cannot just switch themes to change the look of the frontend. This is because – as opposed to WordPress –, there is no "official way" of building frontends. ProcessWire gives total freedom in this area, there is no core support for theming the frontend. We also have Admin Themes, which can be switched though. This is what is somewhat similar to WordPress frontend theme switching (and it is based on the concept of modules, actually), but it is for the admin area, not the frontend.

I'm happy to announce that we are back on Processwire this morning. @Jonathan Lahijani contacted me based on this post and took on the daunting task of redeveloping / designing our site and has done an amazing job. I'm very pleased with the results. We have a few tweaks to do here and there but functionally, it's more than I was hoping for. Jonathan will be doing a full write up on the process here within the next couple of weeks but for now I just wanted to let everyone know and get some feedback on the new site. Also, HUGE thanks to @Jonathan Lahijani for doing such an amazing job. ~Mike

Based on the comments above it sounds like there are currently still some issues with 3.x. @kongondo is away at the moment, but I am sure he'll be looking at getting this 3.x compatible now that we are so close to a stable release.

It is worth mentioning that the developer ( @kongondo ) is away for a while, see: Also, note this quote: "A MarkupDynamicSelects for use in the frontend is planned if there is enough demand for it.". You can find it in the intro post. And people have already started demanding it

I am sure it does. But the point here is that i made something because i wanted to try it with PHP and to do one thing very good. Not everything has to be a module. This script is not meant to be a swizz army knife. The point is to experiment, and share my findings so others could see have they could use PHP in different ways.

Sounds great, I look forward to seeing it. As promised, here's a full example of a simple contact form. This is bare bones, but safe. I've left out spam prevention measures, which I'll be happy to follow-up with if you'd like. Below is an entire template file. I figured it was simpler to show this way rather than splitting into multiple files. Though when forms get really large, I tend to split them in multiple files (and include them). But for smaller forms, I do it like the example below. /site/templates/contact.php <?php $sent = false; $error = ''; $emailTo = 'nikola@company.com'; // or pull from PW page field // sanitize form values or create empty $form = array( 'fullname' => $sanitizer->text($input->post->fullname), 'email' => $sanitizer->email($input->post->email), 'comments' => $sanitizer->textarea($input->post->comments), ); // check if the form was submitted if($input->post->submit) { // determine if any fields were ommitted or didn't validate foreach($form as $key => $value) { if(empty($value)) $error = "<p class='error'>Please check that you have completed all fields.</p>"; } // if no errors, email the form results if(!$error) { $msg = "Full name: $form[fullname]\n" . "Email: $form[email]\n" . "Comments: $form[comments]"; mail($emailTo, "Contact Form", $message, "From: $form[email]"); // populate body with success message, or pull it from another PW field $page->body = "<h2>Thank you, your message has been sent.</h2>"; $sent = true; } } if(!$sent) { // sanitize values for placement in markup foreach($form as $key => $value) { $form[$key] = htmlentities($value, ENT_QUOTES, "UTF-8"); } // append form to body copy $page->body .= <<< _OUT $error <form action="./" method="post"> <p> <label for="fullname">Your Name</label><br /> <input type="text" id="fullname" name="fullname" value="$form[fullname]" /> </p> <p> <label for="email">Your Email</label><br /> <input type="email" name="email" id="email" value="$form[email]" /> </p> <p> <label for="comments">Comments</label><br /> <textarea id="comments" name="comments">$form[comments]</textarea> </p> <p><input type="submit" name="submit" value="Submit" /></p> </form> _OUT; } // include site's main template which outputs everything include("./main.php");