FormBuilder autocapitalize="off" autocorrect="off

[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.

[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" />'}

[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.

[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}&nbsp;{$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}

[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

[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.