Express Forms, "columns", CSS, checkboxes, my layout example
Permalink
So I built a fairly large Express Form, with three different field sets. The problem was, it was very tall, and scrolling to fill out a form is not exactly a good user experience. As such, I wanted to visually set it up so some of the fieldsets were beside each other. In the end, I had one fieldset on the left and two on the right. The one on the left is about the height of the two on the right, so it worked out nicely! I also wanted to move the form submit button to center alignment, as it makes it look better on the page.
But there's more, I wanted to have a better layout for the checkboxes I had setup, so I also adjusted their appearance to be in a "column" setup of sorts.
Here's how I did it.
First, I need to create the space for a "Custom Template" for the Express Form block.To do this, you need to make some folders, and copy a php file over to get you started.
I made the folder;
/applications/blocks/express_form/templates/get_info_form/
The "get_info_form" will set the name when you're selecting the Custom Template for the Express Form block. The name shown in the list when selecting it becomes "Get Info Form" (notice no underscores). If the folders don't exist, make them and ensure the permissions are set correctly otherwise it won't load. By using the "express_form" folder, this makes it so the Custom Template is only available to the Express Form block.
Second, I need to copy over a php file to get myself started. This is so I can change the alignment of the submit button.
I'm using v8.1.0 here, so depending on if you installed fresh, or upgraded, the folder could be in a few different places. In my case, I upgraded, and the folder I need to find is:
/updates/concrete5-8.1.0/concrete/blocks/express_form/
In there I copy the view.php file to the directory I made in step 1. Again, make sure this file has the correct permissions or it wont load. Copying this over means changes I make to the view.php file in the new folder will only affect the Custom Template that I've made. This should also withstand version upgrades in the future too.
Once it's copied over, I open up the view.php in my favourite text editor (in my case it's nano). I go down to the section that talks about the submit button, and add some code:
Original:
Modified:
Okay so my submit button is now aligned center.
Third, I need to write a very small bit of css to adjust the fieldset and checkbox positioning.
Since this is a Custom Template, this should only apply to the page that it is used on, so be careful with this. Keep in mind, this may not be the best method, but it works in my case. I am not a php guru, and there are probably better ways to do the checkbox stuff, so please don't draw and quarter me.
In the same folder we copied the view.php file to, make a new view.css file, and make sure it's blank before you add it.
To make it so the fieldset will behave similarly to being in columns, I added:
I tried width with 33% but it looked horrible, so 50% is what's for my dinner.
To make the checkboxes behave in a similar fashion, I added:
I had tried using ".ccm-input-checkbox" instead of "div.checkbox", however the results looked very horrible, so I switched back.
That's really about it! Not a lot of code, but knowing where things go can help. Please keep in mind this is ONE way to do this, and there may be better ways to do it. I am sharing this because it was a real pig to cobble this info together in short order. Hope this helps someone! :)
p.s. don't forget to actually select the Custom Template once you have it setup too ;)
But there's more, I wanted to have a better layout for the checkboxes I had setup, so I also adjusted their appearance to be in a "column" setup of sorts.
Here's how I did it.
First, I need to create the space for a "Custom Template" for the Express Form block.To do this, you need to make some folders, and copy a php file over to get you started.
I made the folder;
/applications/blocks/express_form/templates/get_info_form/
The "get_info_form" will set the name when you're selecting the Custom Template for the Express Form block. The name shown in the list when selecting it becomes "Get Info Form" (notice no underscores). If the folders don't exist, make them and ensure the permissions are set correctly otherwise it won't load. By using the "express_form" folder, this makes it so the Custom Template is only available to the Express Form block.
Second, I need to copy over a php file to get myself started. This is so I can change the alignment of the submit button.
I'm using v8.1.0 here, so depending on if you installed fresh, or upgraded, the folder could be in a few different places. In my case, I upgraded, and the folder I need to find is:
/updates/concrete5-8.1.0/concrete/blocks/express_form/
In there I copy the view.php file to the directory I made in step 1. Again, make sure this file has the correct permissions or it wont load. Copying this over means changes I make to the view.php file in the new folder will only affect the Custom Template that I've made. This should also withstand version upgrades in the future too.
Once it's copied over, I open up the view.php in my favourite text editor (in my case it's nano). I go down to the section that talks about the submit button, and add some code:
Original:
<div class="form-actions">
<button type="submit" name="Submit" class="btn btn-primary"><?php echo t($submitLabel)?></button>
</div>Modified:
<div class="form-actions">
<p align="center">
<button type="submit" name="Submit" class="btn btn-primary"><?php echo t($submitLabel)?></button>
</p>
</div>Okay so my submit button is now aligned center.
Third, I need to write a very small bit of css to adjust the fieldset and checkbox positioning.
Since this is a Custom Template, this should only apply to the page that it is used on, so be careful with this. Keep in mind, this may not be the best method, but it works in my case. I am not a php guru, and there are probably better ways to do the checkbox stuff, so please don't draw and quarter me.
In the same folder we copied the view.php file to, make a new view.css file, and make sure it's blank before you add it.
To make it so the fieldset will behave similarly to being in columns, I added:
fieldset { width: 50%; margin: 0; float: left; }
I tried width with 33% but it looked horrible, so 50% is what's for my dinner.
To make the checkboxes behave in a similar fashion, I added:
div.checkbox { width: 50%; margin: 0; float: left; }
I had tried using ".ccm-input-checkbox" instead of "div.checkbox", however the results looked very horrible, so I switched back.
That's really about it! Not a lot of code, but knowing where things go can help. Please keep in mind this is ONE way to do this, and there may be better ways to do it. I am sharing this because it was a real pig to cobble this info together in short order. Hope this helps someone! :)
p.s. don't forget to actually select the Custom Template once you have it setup too ;)
