Page 1 of 1
FormBuilder autocapitalize="off" autocorrect="off
Posted: Mon May 20, 2013 11:14 am
by govicinity
CMS Made Simple™ 1.11.6 “Merchena”
FormBuilder 0.7.3
Simple question really, but I can't seem to find an answer, all I want to do is set the Email input field on my form to include autocapitalize="off" and autocorrect="off" using FormBuilder.
like this:
Code: Select all
<label for="fbrp__32">Email*</label><input type="text" name="m4538dfbrp__32" value="" size="25" maxlength="80" id="fbrp__32" autocapitalize="off" autocorrect="off" />
Suggestions greatly appreciated! Darn iPhone is autocapitalising emails being input, and then the check email field is not, and the client wants it to not capitalize.
Re: FormBuilder autocapitalize="off" autocorrect="off
Posted: Mon May 20, 2013 1:37 pm
by psy
See the Smarty Replace tip at
http://forum.cmsmadesimple.org/viewtopi ... ce#p258754
Replace something in the field tag in the template eg:
Code: Select all
{$myfield|replace:'/>':'autocapitalize="off" autocorrect="off" />'}
Re: FormBuilder autocapitalize="off" autocorrect="off
Posted: Mon May 20, 2013 1:42 pm
by psy
Assuming you're using HTML5 (and not tested) but you could possibly also do:
Code: Select all
{$myfield|replace:'type="text"':'type="email"'|replace:'/>':'autocapitalize="off" autocorrect="off" />'}
If that works, it would give your iPhone users the email keyboard set too.
Re: FormBuilder autocapitalize="off" autocorrect="off
Posted: Mon May 20, 2013 2:23 pm
by govicinity
Hi PSY, thanks for the info, had a look at where to past in the example you've given, and also read through the other forum post, but still not sure where to paste the (not using HTML5 on the form for this project).
Here's my standard(ish) form code:
Code: Select all
{* DEFAULT FORM LAYOUT / pure CSS *}
{literal}
<__script__>
$(function() {
var $fieldset = $('fieldset');
$('input[type=radio]').on('change',function() {
$fieldset.hide();
$fieldset.eq( $('input[type=radio]').index( this ) ).show();
});
});
</__script>
{/literal}
{$fb_form_header}
{if $fb_form_done == 1}
{* This first section is for displaying submission errors *}
{if isset($fb_submission_error) && $fb_submission_error}
<div class="error_message">{$fb_submission_error}</div>
{if isset($fb_show_submission_errors) && $fb_show_submission_errors}
<div class="error">
<ul>
{foreach from=$fb_submission_error_list item=thisErr}
<li>{$thisErr}</li>
{/foreach}
</ul>
</div>
{/if}
{/if}
{else}
{* this section is for displaying the form *}
{* we start with validation errors *}
{if isset($fb_form_has_validation_errors) && $fb_form_has_validation_errors}
<div class="error_message">
<ul>
{foreach from=$fb_form_validation_errors item=thisErr}
<li>{$thisErr}</li>
{/foreach}
</ul>
</div>
{/if}
{if isset($captcha_error) && $captcha_error}
<p class="error_message">{$captcha_error}</p>
{/if}
{* and now the form itself *}
{$fb_form_start}
<div>{$fb_hidden}</div>
<div{if $css_class != ''} class="{$css_class}"{/if}>
{if $total_pages gt 1}<span>{$title_page_x_of_y}</span>{/if}
{foreach from=$fields item=entry}
{if $entry->display == 1}
{strip}
{if $entry->needs_div == 1}
<div
{if $entry->required == 1 || $entry->css_class != '' || $entry->valid == 0} class="
{if $entry->required == 1}required{/if}
{if $entry->css_class != ''} {$entry->css_class}{/if}
{if $entry->valid == 0} fb_invalid{/if}
"
{/if}
>
{/if}
{if $entry->hide_name == 0}
<label{if $entry->multiple_parts != 1} for="{$entry->input_id}"{/if}>{$entry->name}
{if $entry->required_symbol != ''}
{$entry->required_symbol}
{/if}
</label>
{/if}
{if $entry->multiple_parts == 1}
{section name=numloop loop=$entry->input}
{if $entry->label_parts == 1}
<div>{$entry->input[numloop]->input} {$entry->input[numloop]->name}</div>
{else}
{$entry->input[numloop]->input}
{/if}
{if isset($entry->input[numloop]->op) && $entry->input[numloop]->op}{$entry->input[numloop]->op}{/if}
{/section}
{else}
{if $entry->smarty_eval == '1'}{eval var=$entry->input}{else}{$entry->input}{/if}
{/if}
{if $entry->valid == 0} <--- {$entry->error}{/if}
{if $entry->needs_div == 1}
</div>
{/if}
{/strip}
{/if}
{/foreach}
{if $has_captcha == 1}
<div class="captcha">{$graphic_captcha}<br />
{$title_captcha}<br />
{$input_captcha}</div>
{/if}
<div class="submit">{$prev}{$submit}</div>
</div>
{$fb_form_end}
{/if}
{$fb_form_footer}
Re: FormBuilder autocapitalize="off" autocorrect="off
Posted: Mon May 20, 2013 10:11 pm
by psy
Hrmmm, getting a bit confusing. Try an alternative approach using jQuery. The example below (untested) assumes you have CGExtensions installed for {jsmin} and of course, jQuery.
Code: Select all
{if $smarty.server.HTTP_USER_AGENT|stripos:'iOS' !== false}
{jsmin}{literal}
<__script__ type="text/javascript">
$(document).ready(function(){
$('input[id$=["__32"]').attr({
'autocapitalize','off',
'autocorrect','off',
'type','email'});
});
</__script>
{/literal}{/jsmin}
{/if}
What it should so is firstly determine if the OS is iOS and if so, find the input with an id ending in __32 then add the autocapitalize and autocomplete attributes (both set to off) and change the type attribute to email.
This code can go anywhere in your page template or even as a static text field (no WYSIWYG) in the form.
Hope this helps
psy
Re: FormBuilder autocapitalize="off" autocorrect="off
Posted: Sun May 26, 2013 9:20 am
by psy
By coincidence I had the same issue and re-thought how to do it. This worked a treat:
Code: Select all
{FormBuilder|replace:'emailfrom"><input type="text"':'emailfrom"><input type="email"' form=my_form_name}
In the email field on the form, Advanced Tab, I gave the field I wanted to change a CSS class (not Id). This put the
class="emailform"> at the end of the parent div. I could then replace that and the part of the actual field i wanted with the new code. You could add the
autocomplete="off" autocorrect="off" in the replacement text.
Tip: Smarty modifiers work on plugin names but not parameters.
hth
psy
PS: My field did not show labels as I was using placeholder text. If you have labels, you'll have to include that HTML as part of the text to replace and the substitute text.