Form Builder - Email Fields - Placeholder text?

[michaywood]

Hello CMSMSers!

I have worked with the Text Input fields before and love that you can set HTML5 placeholder text that clears out when you click/type into the cell.

However, with the Email "From" Fields, I cannot figure out how to do this! Any ideas?

Thanks in advance!

[michaywood]

It doesn't have to be the placeholder="" , it could also be the value="". Any ideas? I can't seem to find this option in the template!

[Dr.CSS]

Most text fields have a default value in the options tab and a check box to make it go away when clicked...

Default value for field:
Clear default on click?:

[michaywood]

Thanks for the reply!

I was able to find the default text option on a text input, but that option is not available for the Email "From" Fields. I would just use a text input field but I need to set the email from and reply to address!

Any ideas?

[michaywood]

here is the template i'm trying to edit:

Code: Select all

{* DEFAULT FORM LAYOUT / pure CSS *}
{literal}
<__script__ type="text/javascript">
function fbht(htid)
	{
		var fbhtc=document.getElementById(htid);
		if (fbhtc)
			{
			if (fbhtc.style.display == 'none')
				{
				fbhtc.style.display = 'inline';
				}
			else
				{
				fbhtc.style.display = 'none';
				}
			}
}
</__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}
		<div class="error_message">{$captcha_error}</div>
	{/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->helptext != ''}&nbsp;<a href="javascript:fbht('{$entry->field_helptext_id}')"><img src="modules/FormBuilder/images/info-small.gif" alt="Help" /></a>
					<span id="{$entry->field_helptext_id}" style="display:none" class="fbr_helptext">{$entry->helptext}</span>{/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}{$title_captcha}<br />{$input_captcha}</div>
	{/if}
	<div class="submit">{$prev}{$submit}</div>
	</div>
	{$fb_form_end}
{/if}
{$fb_form_footer}

I can't figure out where in there can I add the "value="my field text"" within that template anywhere!

Any ideas?

[paulbaker]

@ michaywood did you find a solution for this? I am looking for the exact same thing.

Thanks

[michaywood]

nope... No one seemed to have any ideas and I couldn't figure out how to do it.

[paulbaker]

Well after much fiddling around I have worked out how to do this and I will share it here for the benefit of all mankind. CMSMS 1.10.3 and FormBuilder 0.7.2.

Extensions -> Form Builder -> Configuration tab.

Make sure "Show Field IDs" is ticked (you'll see why shortly).

Extensions -> Form Builder -> Click on your form.

Take a note of the field ID number of your "from address" field, for later.

Click your "from address" email field.

Advanced settings tab.

Add this code in the "Javascript for field" field:

Code: Select all

onblur="if (this.value == '') {this.value = 'Email';}" onfocus="if (this.value == 'Email') {this.value = '';}" 

Content -> Pages. Edit the page your form appears in.

Edit your FormBuilder tag to include the default value for the field, this is where you need to know your field ID, e.g.:

Code: Select all

{cms_module module='FormBuilder' form='contact' value_fld15='Email'}

(This last step was key, I saw it in the help section of FormBuilder, it was an addition by Calguy....thanks Calguy!)

Browse to your page, you should see default text in your field and when you click in to the field it should disappear...and re-appear if you click away without entering any text.

HTH

Now I'm off to work out how to get this working with multiple textarea boxes on one page.....

[paulbaker]

Now I'm off to work out how to get this working with multiple textarea boxes on one page.....

Here's my post on that little problem: http://forum.cmsmadesimple.org/viewtopi ... =7&t=60398

[michaywood]

Thanks, Paul!

However, that ALMOST got me there! When I load the page, the field is still empty, but then once i click on the field then off, it shows the Email. So it's like the javascript is working, but not the field ID?

that what u thinking?

[uniqu3]

To add placeholder text a simple replace of value with placeholder containing label text would do it to.

Code: Select all

{$entry->input|replace:"value=":"placeholder=\"`$entry->name`\" value="}

[michaywood]

To add placeholder text a simple replace of value with placeholder containing label text would do it to.

Code: Select all

{$entry->input|replace:"value=":"placeholder=\"`$entry->name`\" value="}

What part of the template do you replace with your code? I'm looking through my template and don't see the word "value" anywhere. This is part of my confusion. Also, I'm wanting to do the same thing for the CAPTCHA box but the only thing in the template is {$input_captcha} so I can't figure out how to add placeholder text.


Template I'm using:

Code: Select all

{* DEFAULT FORM LAYOUT / pure CSS *}
{literal}
<__script__ type="text/javascript">
function fbht(htid)
	{
		var fbhtc=document.getElementById(htid);
		if (fbhtc)
			{
			if (fbhtc.style.display == 'none')
				{
				fbhtc.style.display = 'inline';
				}
			else
				{
				fbhtc.style.display = 'none';
				}
			}
}
</__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}
		<div class="error_message">{$captcha_error}</div>
	{/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->helptext != ''}&nbsp;<a href="javascript:fbht('{$entry->field_helptext_id}')"><img src="modules/FormBuilder/images/info-small.gif" alt="Help" /></a>
					<span id="{$entry->field_helptext_id}" style="display:none" class="fbr_helptext">{$entry->helptext}</span>{/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}{$title_captcha}<br />{$input_captcha}</div>
	{/if}
	<div class="submit">{$prev}{$submit}</div>
	</div>
	{$fb_form_end}
{/if}
{$fb_form_footer}

[uniqu3]

value is in html after smarty was rendered, you will not find in template but you will find {if $entry->smarty_eval == '1'}{eval var=$entry->input}{else}{$entry->input}{/if}

[michaywood]

value is in html after smarty was rendered, you will not find in template but you will find {if $entry->smarty_eval == '1'}{eval var=$entry->input}{else}{$entry->input}{/if}

Awesome! Thanks! That seems to do the trick! However my color:#FFFFFF; isn't working on placeholder text. But I just changed my color layout so it works.


This is almost solved!

The 2 fields this doesn't work for is CAPTCHA and Text Area.

Any ideas?

[point4design]

Awesome! Thanks! That seems to do the trick! However my color:#FFFFFF; isn't working on placeholder text. But I just changed my color layout so it works.


This is almost solved!

The 2 fields this doesn't work for is CAPTCHA and Text Area.

Any ideas?

Sorry if I'm asking a dumb question. I'm trying to get this to work on the 'name' and the 'email' fields. Can you share the code you used to get this to work?