BETA feedback for Responsive-Classic in v155-beta

[picaflor-azul]

When trying to create a new customer, I've found a bit of a visual ambiguity for the required field indicator on iPhone screens.
The first picture is of the New Customer section of the Login screen, showing the *s for required fields at the end of the fields, which is clear enough.
Attachment 16057
The second picture shows the same screen on an iPhone 5.
Attachment 16058
Unfortunately the *s end up on a line by themselves and it's not totally clear which field they apply to. Would it be clearer (and possible) to put them after the text label?
i.e.
First Name: *
[ Text Field ]
Last Name: *
[Text Field ]
etc.

Andy

This can be done by editing the php file to move the code for the required field. You can do a developers toolkit search to find the correct file.

Thanks,

Anne

[rbarbour]

I've been doing some research and adding the "required" indicator to the inputs placeholder is becoming increasingly popular and it is cross browser supported. This of course excludes selects, radio and check-boxes.

Surprisingly IMO, it actually looks really nice and eliminates the line breaks on smaller devices.

When trying to create a new customer, I've found a bit of a visual ambiguity for the required field indicator on iPhone screens.
The first picture is of the New Customer section of the Login screen, showing the *s for required fields at the end of the fields, which is clear enough.
Attachment 16057
The second picture shows the same screen on an iPhone 5.
Attachment 16058
Unfortunately the *s end up on a line by themselves and it's not totally clear which field they apply to. Would it be clearer (and possible) to put them after the text label?
i.e.
First Name: *
[ Text Field ]
Last Name: *
[Text Field ]
etc.

Andy

[rbarbour]

Maybe Chris (DrByte) can weigh in as if there is future plans for the "placeholder attribute" or if at some point it will get added to the functions parameters.

[Peace Freak]

Thank you! I'm glad it could be done so easily!

This top categories navigation is a native zen cart function and can be easily turned off in admin--configuration--layout settings

Thanks,

Anne

[DrByte]

Maybe Chris (DrByte) can weigh in as if there is future plans for the "placeholder attribute" or if at some point it will get added to the functions parameters.

Our work in v160 embraces the placeholder attribute. I guess that didn't get ported back to v155.

[amayze]

I've been doing some research and adding the "required" indicator to the inputs placeholder is becoming increasingly popular and it is cross browser supported. This of course excludes selects, radio and check-boxes.

Surprisingly IMO, it actually looks really nice and eliminates the line breaks on smaller devices.

So I've worked out how to do this in tel_contact_us_default.php:

<label class="inputLabel" for="contactname"><?php echo ENTRY_NAME . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?></label>
<?php echo zen_draw_input_field('contactname', $name, ' size="40" id="contactname"'); ?>
<br class="clearBoth" />

But for the other files that have required fields I'm stuck. e.g. in tpl_modules_create_account.php:

<label class="inputLabel" for="firstname"><?php echo ENTRY_FIRST_NAME; ?></label>
<?php echo zen_draw_input_field('firstname', '', zen_set_field_length(TABLE_CUSTOMERS, 'customers_firstname', '40') . ' id="firstname"') . (zen_not_null(ENTRY_FIRST_NAME_TEXT) ? '<span class="alert">' . ENTRY_FIRST_NAME_TEXT . '</span>': ''); ?>
<br class="clearBoth" />

If I do the following:

<label class="inputLabel" for="firstname"><?php echo ENTRY_FIRST_NAME . (zen_not_null(ENTRY_FIRST_NAME_TEXT) ? '<span class="alert">' . ENTRY_FIRST_NAME_TEXT . '</span>'; ?></label>
<?php echo zen_draw_input_field('firstname', '', zen_set_field_length(TABLE_CUSTOMERS, 'customers_firstname', '40') . ' id="firstname"') : ''); ?>
<br class="clearBoth" />

it breaks the form and nothing is displayed.
My PHP and HTML knowledge was good enough to make my own template for use in 1.3.x and up, but I'm stuck now!
Andy

[rbarbour]

My suggestion was to add the "required" indicator to the inputs placeholder.

A demo of what I mean can be seen here and the files can be downloaded via git

If your looking to move the "required" indicator to the right side of the label then copy what was done on the text area field on the contact us page. It's just an indicator and has no affect over validation nor do the constants need the "null" statement.

<label for="enquiry"><?php echo ENTRY_ENQUIRY . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?></label>

So I've worked out how to do this in tel_contact_us_default.php:

<label class="inputLabel" for="contactname"><?php echo ENTRY_NAME . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?></label>
<?php echo zen_draw_input_field('contactname', $name, ' size="40" id="contactname"'); ?>
<br class="clearBoth" />

But for the other files that have required fields I'm stuck. e.g. in tpl_modules_create_account.php:

<label class="inputLabel" for="firstname"><?php echo ENTRY_FIRST_NAME; ?></label>
<?php echo zen_draw_input_field('firstname', '', zen_set_field_length(TABLE_CUSTOMERS, 'customers_firstname', '40') . ' id="firstname"') . (zen_not_null(ENTRY_FIRST_NAME_TEXT) ? '<span class="alert">' . ENTRY_FIRST_NAME_TEXT . '</span>': ''); ?>
<br class="clearBoth" />

If I do the following:

<label class="inputLabel" for="firstname"><?php echo ENTRY_FIRST_NAME . (zen_not_null(ENTRY_FIRST_NAME_TEXT) ? '<span class="alert">' . ENTRY_FIRST_NAME_TEXT . '</span>'; ?></label>
<?php echo zen_draw_input_field('firstname', '', zen_set_field_length(TABLE_CUSTOMERS, 'customers_firstname', '40') . ' id="firstname"') : ''); ?>
<br class="clearBoth" />

it breaks the form and nothing is displayed.
My PHP and HTML knowledge was good enough to make my own template for use in 1.3.x and up, but I'm stuck now!
Andy

[dw08gm]

See also this thread

https://www.zen-cart.com/showthread....ds-Fluid-Forms

[frank18]

Great work guys!!

Just for general information if someone is looking through the plugins for this template: There is a template by the same name "Responsive Classic" (see https://www.zen-cart.com/downloads.php?do=file&id=1816 ) which is NOT related to this template. So if anyone downloads that older plugin, it is NOT the same as the template discussed in this thread.

[picaflor-azul]

Great work guys!!

Just for general information if someone is looking through the plugins for this template: There is a template by the same name "Responsive Classic" (see https://www.zen-cart.com/downloads.php?do=file&id=1816 ) which is NOT related to this template. So if anyone downloads that older plugin, it is NOT the same as the template discussed in this thread.

That is true! Thank you for posting this, Frank ;)

Thanks,

Anne