Updating Form Block - Using MVC
Permalink 3 users found helpful
I've updated the Form Block that comes with Concrete5 to now properly use MVC. This will make it much easier for people to edit the way that form blocks look. To use it, just unzip the form folder into your block folder (Don't overwrite what's in /concrete/blocks), and you're good to go.
If you're interested in the changes... I've commented them all in the code. Basically the changes are:
1) In tools/services.php, we now do a check to see if we're rendering the edit pane, or the preview pane. If it's the edit pane, we use the stock rendering, otherwise we go to the view.
2) In controller.php, we now add more variables to be sent to the view so that we don't need that logic any more. I also deleted a large chunk of rendering code out of the miniSurvey class.
3) in view.php, we now actually do all html output for the form.
***WARNING***
This hasn't had much testing yet, if you have a dev installation of C5, please install and test, and let me know if you've got any problems so I can work them out.
There's also some more code that could be factored out now, and some that could be cleaned up, but I'll worry about that later.
If you're interested in the changes... I've commented them all in the code. Basically the changes are:
1) In tools/services.php, we now do a check to see if we're rendering the edit pane, or the preview pane. If it's the edit pane, we use the stock rendering, otherwise we go to the view.
2) In controller.php, we now add more variables to be sent to the view so that we don't need that logic any more. I also deleted a large chunk of rendering code out of the miniSurvey class.
3) in view.php, we now actually do all html output for the form.
***WARNING***
This hasn't had much testing yet, if you have a dev installation of C5, please install and test, and let me know if you've got any problems so I can work them out.
There's also some more code that could be factored out now, and some that could be cleaned up, but I'll worry about that later.
The original post won't let me attach a file, so here it is:
This really helped me. I needed to customize the form block and I stumbled on this thread in the forum. Thanks a lot.
I have a question: how can I modify the background color of the textarea fields? I am able to modify all the colors of the form, but the text input background is always white...
I have a question: how can I modify the background color of the textarea fields? I am able to modify all the colors of the form, but the text input background is always white...
I'm not sure why they're not changing colors for you. My suggestion would be to double check your styles.
The styles for the view block are inside of view.css, all you should need would be something like this:
The styles for the view block are inside of view.css, all you should need would be something like this:
textarea { background-color: red; }
That did it.
Hi there,
Sorry to hijack your thread but I decided to build on what you did to improve it somewhat. I've ditched tables in favour of fieldsets and labels. This gives you MUCH greater control over the look of the forms with CSS. Labels are also much better for accessibility, it allows for you to click on the question and have it select the answer field automatically.
For example, want to display answer fields on a new line? Simply add this to your view.css in /blocks/form/view.css (you have to use my version for this to work):
.miniSurveyView .answer { clear: left; }
The structure of the CSS layout is now roughly:
<fieldset class="formBlockSurveyFieldset">
<div class='question'>
<label></label>
<div class='answer'></div>
</div>
</fieldset>
Included in the zip is a re-package of the code posted at the top of this page with my changes. I've included diff patches as well incase you use some form of source-control or prefer them - I've only modified controller.php, view.php, view.css and captcha.php from the main concrete5 release (/concrete/helpers/validation/captcha.php) to allow the label to work with it (it simply needed an ID field adding to the input box) - perhaps that is something for the concrete5 devs to look at including in the main branch?
As with the version above just extract the form folder to /blocks and replace captcha.php in /concrete/helpers/validation/ - can this be modified elsewhere?
I've also cleared up HTML validation issues where I've seen them, and have successfully tested it in Firefox 3.5.5, Chrome, IE8, IE7, IE6 and even IE5.5 but like your version, it could do with more testing I'm sure.
I only downloaded concrete5 the other day to test it so I really don't know my way around the system - but I thought I'd help out :).
If you prefer I can make a new thread (it might be a good idea anyway)
Sorry to hijack your thread but I decided to build on what you did to improve it somewhat. I've ditched tables in favour of fieldsets and labels. This gives you MUCH greater control over the look of the forms with CSS. Labels are also much better for accessibility, it allows for you to click on the question and have it select the answer field automatically.
For example, want to display answer fields on a new line? Simply add this to your view.css in /blocks/form/view.css (you have to use my version for this to work):
.miniSurveyView .answer { clear: left; }
The structure of the CSS layout is now roughly:
<fieldset class="formBlockSurveyFieldset">
<div class='question'>
<label></label>
<div class='answer'></div>
</div>
</fieldset>
Included in the zip is a re-package of the code posted at the top of this page with my changes. I've included diff patches as well incase you use some form of source-control or prefer them - I've only modified controller.php, view.php, view.css and captcha.php from the main concrete5 release (/concrete/helpers/validation/captcha.php) to allow the label to work with it (it simply needed an ID field adding to the input box) - perhaps that is something for the concrete5 devs to look at including in the main branch?
As with the version above just extract the form folder to /blocks and replace captcha.php in /concrete/helpers/validation/ - can this be modified elsewhere?
I've also cleared up HTML validation issues where I've seen them, and have successfully tested it in Firefox 3.5.5, Chrome, IE8, IE7, IE6 and even IE5.5 but like your version, it could do with more testing I'm sure.
I only downloaded concrete5 the other day to test it so I really don't know my way around the system - but I thought I'd help out :).
If you prefer I can make a new thread (it might be a good idea anyway)
Not hi-jacking at all, the entire point of what I did was to make it easier to swap out the view.php of the form block to fit your project's needs, which is exactly what you did.
Now if only we can get someone up-high to commit this to the code base.
Now if only we can get someone up-high to commit this to the code base.
very nice! i think this should be integrated into the core :)
Right now each question and answer field is wrapped in its own "question/answer" class - is there an easy way to make each of those classes unique similar to the id of the actual input? So Question8 would be wrapped in a "question8" class, rather than just the generic "question" class? Thanks for your help!
Hi,
Of course, here you go. I've repacked everything from my above post into a new zip with an updated diff but I've only modified:
\blocks\form\view.php, replacing lines 29 and 30 with:
echo sprintf("<div class='question'>\n<div class='%s'>\n<label for='%s'>%s %s</label>\n", $miniSurvey->getQuestionID($questionRow), $miniSurvey->getQuestionID($questionRow), $questionRow['question'], $requiredSymbol);
echo sprintf("<div class='answer'>%s</div>\n</div>\n</div>\n\n", $miniSurvey->loadInputType($questionRow,showEdit));
The CSS is now:
<fieldset class="formBlockSurveyFieldset">
<div class='question'>
<div class='QuestionX'>
<label></label>
<div class='answer'></div>
</div>
</div>
</fieldset>
So, for example, to add a black background with white text to Question3 you could use this in \blocks\form\view.css:
.miniSurveyView .question .Question3 { background-color: #000; color: #fff; padding: 10px; }
Of course, here you go. I've repacked everything from my above post into a new zip with an updated diff but I've only modified:
\blocks\form\view.php, replacing lines 29 and 30 with:
echo sprintf("<div class='question'>\n<div class='%s'>\n<label for='%s'>%s %s</label>\n", $miniSurvey->getQuestionID($questionRow), $miniSurvey->getQuestionID($questionRow), $questionRow['question'], $requiredSymbol);
echo sprintf("<div class='answer'>%s</div>\n</div>\n</div>\n\n", $miniSurvey->loadInputType($questionRow,showEdit));
The CSS is now:
<fieldset class="formBlockSurveyFieldset">
<div class='question'>
<div class='QuestionX'>
<label></label>
<div class='answer'></div>
</div>
</div>
</fieldset>
So, for example, to add a black background with white text to Question3 you could use this in \blocks\form\view.css:
.miniSurveyView .question .Question3 { background-color: #000; color: #fff; padding: 10px; }
Perfect - thank you. I had a form in the footer of a site that I wanted very compact so I aligned a text area to the right of some other form fields. Ended up using some jquery to get it done, but this will make it much easier to customize form layouts. Thanks.
This is great, much easier to style. One thing i can't seem to figure out though is how to lengthen the Text Fields, as they stand they just look to short. Can anybody give me a clue?
It would be great to see it get committed, of course the bulk of the work is really from Raverix - I just changed a couple of things :o.
Is there a specific process to get it merged to the main release, or is it just chance the main developers see the posts?
It could probably do with being tidied up a little first though!
Is there a specific process to get it merged to the main release, or is it just chance the main developers see the posts?
It could probably do with being tidied up a little first though!
;) -> core
It's not clear: Is this form block now in the current version of Concrete5?
+1 for adding to core, (if not already done)
May not be the best way to do this but I like my required fields to be highlighted.
So I have edited the controller to add in some custom style if an error is found.
In the controller.php I have modified the code to also add an error
within the action_submit_form funtion,
I would normally add a class of "error" to the effected div but am having trouble passing through the variable.
I added this within the Required Check loop
around about line 227-250,
This does nothing else other then add a 2px red border around the required input box, and could be done in a better way, then calling a style for each missing box. But I'm still getting to grips with conrete5 so this will do for me now.
So I have edited the controller to add in some custom style if an error is found.
In the controller.php I have modified the code to also add an error
within the action_submit_form funtion,
?><style> .answer #question<?=$row['msqID']?> {border:2px solid #FF0000;} </style><?
I would normally add a class of "error" to the effected div but am having trouble passing through the variable.
I added this within the Required Check loop
around about line 227-250,
This does nothing else other then add a 2px red border around the required input box, and could be done in a better way, then calling a style for each missing box. But I'm still getting to grips with conrete5 so this will do for me now.
//checked required fields foreach($rows as $row){ if( intval($row['required'])==1 ){ $notCompleted=0; if($row['inputType']=='checkboxlist'){ $answerFound=0; foreach($_POST as $key=>$val){ if( strstr($key,'Question'.$row['msqID'].'_') && strlen($val) ){ $answerFound=1; } } if(!$answerFound) $notCompleted=1; }elseif($row['inputType']=='fileupload'){ if( !isset($_FILES['Question'.$row['msqID']]) || !is_uploaded_file($_FILES['Question'.$row['msqID']]['tmp_name']) ) $notCompleted=1; }elseif( !strlen(trim($_POST['Question'.$row['msqID']])) ){
Viewing 15 lines of 25 lines. View entire code block.
Raverix, I noticed your customization removes the ability to forward to another page after the form submits. I've been trying to restore that functionality but wondering why you did that? Had to be deliberate. I'm under a deadline, so any quick assistance would be appreciated. Thanks!
Wow, sorry for the late response, I do not believe I removed that, but rather that feature didn't exist in the form block when I made this modification. Take a look in the source code for my changes and port them over.
Hello
this is a great initiative and discussion! Are the two main contributors still working on this? It would be great if this much more flexible version of the form block could get a few extra tweaks to make it perfect:
- Integrate the redirection after submitting form that is default on C5 form
- Integration of additional field type (ie email)
- Addition of headers/titles to logically separate sub section in form (as seen on the CommunityForm project)
- Confirmation email to user (in addition to existing preset)
All desiderata that I have tried to implement unsuccessfully myself.
Thanks!
V.
this is a great initiative and discussion! Are the two main contributors still working on this? It would be great if this much more flexible version of the form block could get a few extra tweaks to make it perfect:
- Integrate the redirection after submitting form that is default on C5 form
- Integration of additional field type (ie email)
- Addition of headers/titles to logically separate sub section in form (as seen on the CommunityForm project)
- Confirmation email to user (in addition to existing preset)
All desiderata that I have tried to implement unsuccessfully myself.
Thanks!
V.
Not really working on it, I typically use the tableles form view, but I still believe that the stock form block needs an overhaul. As for your particular requests, two are already there:
1) You can redirect to a new page with the stock form block.
2) Email / Phone are now stock in the form block
These features would be nice, I currently do so by hooking my 'headers' in front of known questions... IE: Before I render Question 53, I had ah header in a custom view... obviously, this would be nice to be stock behavior which doesn't require code changes.
3) Headers/Titles to logically separate sub sections would be nice.
4) As is confirmation email to user.
1) You can redirect to a new page with the stock form block.
2) Email / Phone are now stock in the form block
These features would be nice, I currently do so by hooking my 'headers' in front of known questions... IE: Before I render Question 53, I had ah header in a custom view... obviously, this would be nice to be stock behavior which doesn't require code changes.
3) Headers/Titles to logically separate sub sections would be nice.
4) As is confirmation email to user.
Thank you Reverix for the lightning speed reply.
Re items 1) and 2) I see that the stock form block has these functions in place but your modified block may have been written before these and as a result does not have them in place. My coding skills do not allow me to integrate these new additions to your good work.
Re 3) could you clarify what you mean by 'hooking' headers to questions? You mean through CSS behaviour?
Re 4? I will look at the link you kindly supplied to see what I can do.
If you ever decide to update your version with the some/all of the above the community and myself would greatly benefit from it.
cheers
V.
Re items 1) and 2) I see that the stock form block has these functions in place but your modified block may have been written before these and as a result does not have them in place. My coding skills do not allow me to integrate these new additions to your good work.
Re 3) could you clarify what you mean by 'hooking' headers to questions? You mean through CSS behaviour?
Re 4? I will look at the link you kindly supplied to see what I can do.
If you ever decide to update your version with the some/all of the above the community and myself would greatly benefit from it.
cheers
V.
Just to clarify, while the newer version of the built-in form block has an "email" field type, it is only an HTML5 email field -- so it is not any different than a normal text field in Internet Explorer (and older versions of other browsers).
And the "Tableless Form View" that Reverix is referring to can be found here:
http://www.concrete5.org/marketplace/addons/form-tableless-layout...
And the "Tableless Form View" that Reverix is referring to can be found here:
http://www.concrete5.org/marketplace/addons/form-tableless-layout...
