[opencms-dev] Web form can be integrated in existing pages?

[Tobias Mantsch]

Hi Antonio,

it's pretty straight forward:
- create and configure a new webform
- make the webform use a custom confirmation page (see first configuration page). If you don't do this you can't integrate the webform nicely
- create a template for the page you want the form to be integrated into:
	-- insert a <div> or other container with an id where the form should go
	-- insert JS code to load the form into this container, after the page is loaded (e.g. jquery):
		$(document().ready(function(){$('#myformdiv').load('/path/to/the/webform', [optional callback method goes here]);});

This approach is fast and easy to implement but it has one major drawback: you can't use the built-in form validation very well, because for validation the form submits to itself and you end up with an ugly validation page if some form input was incorrect. Therefore you have to implement either a JS validation and rely on the built in validation only as last resort (that's what we did) or you abandon validation altogether (rather bad idea).
If you go the jquery road, I would recommend using the jquery validate plugin which let's you validate forms with powerful rules and custom messages. It even has some sort of localization, so the default messages are already translated in about 15 languages.

Here is our sample JS for a small registration for with about 6 or 7 inputs:

// form loading        
$(document).ready(function() {
            $('#myformcontainer').load('/path/to/webform',
                function(){ // this is the callback, executed when form loading finished successfully)
                $(':input[type="text"]').focus(function() {
             if (this.value == this.defaultValue){  
                 this.value = '';  
             }  
             if(this.value != this.defaultValue){  
                 this.select();  
             }  
            });
            $('input[type="text"]').blur(function() {
                if ($.trim(this.value) == ''){
                    this.value = (this.defaultValue ? this.defaultValue : '');
                }
            });
//validation with jquey validate plugin        
$('#id_of_the_form').validate({
                    rules:{
				// webform names the form elements this way, make sure to put the correct input names for validation
                    "InputField-2":"required",
                    "InputField-3":"required",
                    "InputField-4":{
                        required:true,
                        digits:true,
                        minlength:3,
                        maxlength:5
                    },
                    "InputField-5":"required",
                    "InputField-6":{
                        required:true,
                        email:true
                    },
                    "InputField-7":"required"
                    },
                    messages:{
                    "InputField-4":"my custom message for input 4",
                    "InputField-6":"my custom message for input 6",
                    "InputField-7":"my custom message for input 7"
                    }
                });
        });
        });

I hope that helps
We did our form this way, with the slight drawback, that some request might bypass the JS validation and will then be caught by webform's built-validation which, of course, is not integrated in our normal templates and looks rather out of place. But for now we can live with that.

Regards
Tobias

-----Ursprüngliche Nachricht-----
Von: opencms-dev-bounces at opencms.org [mailto:opencms-dev-bounces at opencms.org] Im Auftrag von Antonio Cordeddu
Gesendet: Samstag, 26. Februar 2011 13:36
An: opencms-dev at opencms.org
Betreff: Re: [opencms-dev] Web form can be integrated in existing pages?

Hi Tobias

I'm looking for an easy way, because I've a short deadline for my 
project: I'm going to create a new page (type alkacon-webform)for my 
form without integrated it in a existing page;
but I'm interested to study the problem in a more depth for the future. 
Could you give me some more indication or sample code?

Thanks
Antonio Cordeddu


Tobias Mantsch wrote:
--------------------------------------------------------------------------------------------- 

>  From: "Tobias Mantsch"<t.mantsch at easysport.de>
>  Subject: Re: [opencms-dev] Web form can be integrated in existing
     pages?
>  To: "The OpenCms mailing list"<opencms-dev at opencms.org>
>  Message-ID:
<8C8963251021D446AA270343EE28AE7D47A4E8 at P-ADS-EASY-1.easysport.de>
>  Content-Type: text/plain;    charset="iso-8859-1"

>  We solved this problem by loading the webform via ajax into the page. 
> If you don't want to tamper with the original
>  templates of the module I don't think that there is an easy way. I 
> discussed the same issue with some opencms developers>  via IRC. 
> Unfortunately OpenCms lacks some sort of "contentinclude" where the 
> included content is rendered with its
>  default template or a specified template:(
>  Might be worth an enhancement request.

>  Regards
>  Tobias Mantsch


_______________________________________________
This mail is sent to you from the opencms-dev mailing list
To change your list options, or to unsubscribe from the list, please visit
http://lists.opencms.org/mailman/listinfo/opencms-dev