Author Topic: Add layout for public form templates  (Read 1481 times)

Offline samuelsov

  • I post occasionally
  • **
  • Posts: 45
  • Karma: 2
    • Coop SymbioTIC
  • CiviCRM version: 3.x, 4.x
  • CMS version: Drupal 6 & 7
Add layout for public form templates
« on: October 21, 2016, 08:55:41 am »
With the use of Angular, there is a movement to progressively improve administrative forms which is good.
I haven't heard a lot of solutions about the future of public forms.
I have red and heard some discussion about a CiviCRM form builder (like a native CiviCRM webform) but it seems like a far objective.

The forms are very difficult to customize right now :
* if we replace a template file, chance are that it will break at next CiviCRM update
* if we use some sort of javascript : it will break less but it's slow and it's a bad practice to change layout using javascript

I think we can improve the situation in the short term without breaking anything or force people that have done a lot of customization to redo everything.
What i have in mind is simply to modularize the big templates and i have one simple layout file that could be easily replaced.

For example, if we take the contribution page, it could be reduced to something like :
Code: [Select]
{* Callback snippet: On-behalf profile *}
{if $snippet and !empty($isOnBehalfCallback) and !$ccid}
  <div class="crm-public-form-item crm-section">
    {include file="CRM/Contribute/Form/Contribution/OnBehalfOf.tpl" context="front-end"}
  </div>
{else}
  {if $action & 1024}
    {include file="CRM/Contribute/Form/Contribution/PreviewHeader.tpl"}
  {/if}

  {include file="CRM/common/TrackingFields.tpl"}

  <div class="crm-contribution-page-id-{$contributionPageID} crm-block crm-contribution-main-form-block">
    {include file="CRM/Contribute/Form/Contribution/Main.Layout.tpl"}
  </div>

  // ideally, remove javascript from there and include it in a real js file but it's another subject
  {include file='CRM/Contribute/Form/Contribution/Main.js.tpl'}
{/if}

with template/CRM/Contribute/Form/Contribution/Main.Layout.tpl :
Code: [Select]
{include file="CRM/Contribute/Form/Contribution/Main.notyou.tpl"}
{include file="CRM/Contribute/Form/Contribution/Main.intro.tpl"}
{include file="CRM/common/cidzero.tpl"}
{include file="CRM/Contribute/Form/Contribution/Main.help.tpl"}
{include file="CRM/Contribute/Form/Contribution/Main.pre.tpl"}
{include file="CRM/Contribute/Form/Contribution/Main.priceoptions.tpl"}
{include file="CRM/Contribute/Form/Contribution/Main.payment.tpl"}
{include file="CRM/Contribute/Form/Contribution/Main.post.tpl"}
{include file="CRM/Contribute/Form/Contribution/Main.captcha.tpl"}
{include file="CRM/Contribute/Form/Contribution/Main.buttons.tpl"}
{include file="CRM/Contribute/Form/Contribution/Main.footer.tpl"}

This way, we could for example quite easily replace template/CRM/Contribute/Form/Contribution/Main.Layout.tpl by a customized one that could be compatible with jquery.steps :
Code: [Select]
<h3>Payment options</h3>
<section id="step1" class="step">
  {include file="CRM/Contribute/Form/Contribution/Main.notyou.tpl"}
  {include file="CRM/Contribute/Form/Contribution/Main.intro.tpl"}
  {include file="CRM/common/cidzero.tpl"}
  {include file="CRM/Contribute/Form/Contribution/Main.help.tpl"}
  {include file="CRM/Contribute/Form/Contribution/Main.priceoptions.tpl"}
</section>
<h3>Your profile</h3>
<section id="step2" class="step">
  {include file="CRM/Contribute/Form/Contribution/Main.pre.tpl"}
</section>
<h3>Additional information</h3>
<section id="step3" class="step">
  {include file="CRM/Contribute/Form/Contribution/Main.post.tpl"}
</section>
<h3>Payment</h3>
<section id="step4" class="step">
  {include file="CRM/Contribute/Form/Contribution/Main.payment.tpl"}
  {include file="CRM/Contribute/Form/Contribution/Main.captcha.tpl"}
  {include file="CRM/Contribute/Form/Contribution/Main.buttons.tpl"}
  {include file="CRM/Contribute/Form/Contribution/Main.footer.tpl"}
</section>

After that, if we could add other improvements like the possibility to add more than 2 profiles in contribution page and a way to place them where we want in the layout :
Code: [Select]
{include file="CRM/Contribute/Form/Contribution/Main.profile.tpl" profileItem=1}
{include file="CRM/Contribute/Form/Contribution/Main.profile.tpl" from=2 to=3}
{include file="CRM/Contribute/Form/Contribution/Main.profile.tpl" from=4}

Do you think it could be useful as a short term solution ?
Consultant @ SymbioTIC.coop