Qualify FormBuilder for HTML5

FormBuilder's text field has already been improved by the addition of a placeholder option in version 0.7. Nevertheless there's still a lack of fields and options to achieve full support of HTML5 form fields. This article broaches the issue of adding some of those to the module do-it-yourself.

This leads in extra work every time you update the module, so hopefully the dev team will soon apply the modification to the official release.

Placeholder

As above-mentioned the placeholder attribute has already been added to the text field, but it is still missing in the sender field along with the default value itself. Adding a few lines to the field classes in modules/FormBuilder/classes helps to enrich the module with those features.

In this case we edit the file FromEmailAddressField.class.php, but it’s a similar procedure for other classes.

On the top of the GetFieldInput method add the following lines:

$html5 = $this->GetOption('html5','0') == '1' ? ' placeholder="'.$this->GetOption('default').'"' : '';
$default = $html5 ? '' : htmlspecialchars($this->GetOption('default'), ENT_QUOTES);

Now replace the return statement with this one that uses the right default value:

return $mod->fbCreateInputText($id, 'fbrp__'.$this->Id, ($this->HasValue()?htmlspecialchars($this->Value, ENT_QUOTES):$default), 25,128,$html5.$js.$this->GetCSSIdTag(),'email');

To add the options to the admin mask use this lines in the PrePopulateAdminForm method:

$adv = array(
  array($mod->Lang('title_field_default_value'),$mod->CreateInputText($formDescriptor, 'fbrp_opt_default',$this->GetOption('default'),25,1024)),
  array($mod->Lang('title_html5'),$mod->CreateInputHidden($formDescriptor,'fbrp_opt_html5','0').
  $mod->CreateInputCheckbox($formDescriptor, 'fbrp_opt_html5','1',$this->GetOption('html5','0')))
);

Required

The required attribute can be added to the form template, therefore won't be removed when you update the module. In place where the input field is outputted use this:

{if $entry->smarty_eval == '1'}{if $entry->required == 1}{eval var=$entry->input|replace:'<input':'<input required="required"'|replace:'<textarea':'<textarea required="required"'}{else}{eval var=$entry->input}{/if}{else}{if $entry->required == 1}{$entry->input|replace:'<input':'<input required="required"'|replace:'<textarea':'<textarea required="required"'}{else}{$entry->input}{/if}{/if}

It's correct, it looks cryptic, but it works!

Comments