Hi rickshadey,
sorry, that you had to wait some days, but I actually implemented the feature for Visforms 3.2.0 for Joomla! 3.x (which will be released soon as a beta) and tested it and that took some time.
The plan is, to add an option "show label" and an HTML attribute "placeholder" to all text inputs (input with type text, date, url, email, number or password).
When an HTML text input Element has a placeholder attribute the value of that attribute is displayed inside the input. The placeholder attribute is supported widely and it is possible to add support for browsers, which do not support the feature by themselfs, using javascript. When the user clicks inside the input the placeholder text vanishes (in some Browsers you have actually to start to enter some characters).
The good thing is, that if you are on Joomla! 3 (as I assume) and you implement the feature by following my instructions, it will still work, when you update to a newer Visforms version in the future.
So here's my answer.
1) Add two new parameters to the field definition (administrator/components/com_visforms/models/forms/visfield.xml) for each "text" field (text, date, url, email, number and password).
You'll find a fieldset for each fieldtype. It's name is visf_text for the input type=text, visf_date for the input type=date ... (so you have to make changes in six fieldsets).
For each of the six fieldsets, insert the following code as first xml-elements inside the fieldset (after the opening fieldset xml-tag).
administrator/components/com_visforms/models/forms/visfield.xml
Code:
<field name="f_text_show_label"
type="list"
label="COM_VISFORMS_SHOW_LABEL"
description="COM_VISFORMS_SHOW_LABEL_DESC"
class="inputbox" default="0">
<option value="0">COM_VISFORMS_SHOW_LABEL_SHOW</option>
<option value="1">COM_VISFORMS_SHOW_LABEL_HIDE</option>
</field>
<field name="f_text_attribute_placeholder"
type="text"
label="COM_VISFORMS_PLACEHOLDER_VALUE"
description="COM_VISFORMS_PLACEHOLDER_VALUE_DESC"
class="inputbox" size="50" default=""
/>
Change the "_text_" in the name attribute according to the input type (to "_date_" etc.)
Add the language Tags to the componentadministration language files (administrator/componenten/com_visforms/language...) and translate them.
2) Go to the administration of your website. You have to open each "text" field, for which you want to hide the label. You should see the two new parameters there. Hide the label, insert a placeholder and save your changes.
3) Hide Labels in form HTML
You have to make changes to the default.php of the view. If you have attached your form to a menu item of type visforms you have to change the default.php of the component/com_visforms/views/visforms/tmpl, if you use the module you have to change the default.php in modules/mod_visforms/tmpl/default.php).
Use
Code:
(isset($field->show_label) && ($field->show_label == 1))
(for example in a php if statement) to hide the label, according to the show label parameter settings of the fields. The label starts about line 355 in the default.php
The placeholders should show up without any further coding
4) Add the required star behind the input for fields that show now label. Use the same condition as above to enclose the code that produces the required star, which is:
Code:
<?php
if (isset($field->attribute_required) && ($field->attribute_required == 'required'))
{
?>
<span class="vis_mandatory">*</span>
<?php
}
?>
The input is closed by the $field->htmlTag in an if then else statement. Add the required star after the closing } of the else of that statement
5) Enable placeholder support for as many browsers as possible
Add the following javascript code at the end of the script tag in the default.php (just before the closing script tag).
Code:
//mend missing placeholder support in some browsers
(function ($) {
$.support.placeholder = ('placeholder' in document.createElement('input'));
})(jQuery);
//fix placeholder for IE7, IE8 and IE9
jQuery(document).ready(
function () {
if (!jQuery.support.placeholder) {
jQuery("[placeholder]").focus(function () {
if (jQuery(this).val() == jQuery(this).attr("placeholder")) jQuery(this).val("");
}).blur(function () {
if (jQuery(this).val() == "") jQuery(this).val(jQuery(this).attr("placeholder"));
}).blur();
jQuery("[placeholder]").parents("form").submit(function () {
jQuery(this).find('[placeholder]').each(function() {
if (jQuery(this).val() == jQuery(this).attr("placeholder")) {
jQuery(this).val("");
}
});
});
}
});
Good Luck and Kind Regards,
Aicha
I recommend you the new and up-to-date documentation for Joomla 4:
.