Results 1 to 2 of 2
  1. #1
    Join Date
    May 2014
    Posts
    68
    Plugin Contributions
    0

    Default Converting Form to HTML5-style

    ZC 1.5.6a (with files from Github for pending 1.5.6b)

    So I noticed forms like Login or Contact Us forms are converted to HTML5 style with the error popped up in the field instead of "Error Stacks" after submit the form.

    However, the website has one customized form, which collect customer data for rental process.

    I noticed on HTML part of the form... there are differences between the old HTML vs new HTML5 forms (using example from Contact Us form).

    Old HTML:

    HTML Code:
    <label class="inputLabel" for="contactname"><?php echo ENTRY_NAME; ?></label>
    <?php echo zen_draw_input_field('contactname', $name, ' size="40" id="contactname"') . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?>
    <br class="clearBoth" />
    
    <label class="inputLabel" for="phonenumber"><?php echo ENTRY_PHONE; ?></label>
    <?php echo zen_draw_input_field('phonenumber', $phone, ' size="40" id="phonenumber"') . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?>
    <br class="clearBoth" /> 
    
    <label class="inputLabel" for="email-address"><?php echo ENTRY_EMAIL; ?></label>
    <?php echo zen_draw_input_field('email', ($email_address), ' size="40" id="email-address"') . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?>
    <br class="clearBoth" />
    
    <label for="enquiry"><?php echo ENTRY_ENQUIRY . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?></label>
    <?php echo zen_draw_textarea_field('enquiry', '30', '7', $enquiry, 'id="enquiry"'); ?>
    New HTML5 Form:

    HTML Code:
    <label class="inputLabel" for="contactname"><?php echo ENTRY_NAME; ?></label>
    <?php echo zen_draw_input_field('contactname', $name, ' size="40" id="contactname" placeholder="' . ENTRY_REQUIRED_SYMBOL . '" required'); ?>
    <br class="clearBoth" />
    
    <label class="inputLabel" for="phonenumber"><?php echo ENTRY_PHONE; ?></label>
    <?php echo zen_draw_input_field('phonenumber', $phone, ' size="40" id="phonenumber" placeholder="' . ENTRY_REQUIRED_SYMBOL . '" required'); ?>
    <br class="clearBoth" /> 
    
    <label class="inputLabel" for="email-address"><?php echo ENTRY_EMAIL; ?></label>
    <?php echo zen_draw_input_field('email', ($email_address), ' size="40" id="email-address" autocomplete="off" placeholder="' . ENTRY_REQUIRED_SYMBOL . '" required', 'email'); ?>
    <br class="clearBoth" />
    
    <label for="enquiry"><?php echo ENTRY_ENQUIRY; ?></label>
    <?php echo zen_draw_textarea_field('enquiry', '30', '7', $enquiry, 'id="enquiry" placeholder="' . ENTRY_REQUIRED_SYMBOL . '" required'); ?>
    I do wonder all I need is to change the HTML part of the form (presumed at "includes\templates\custom\templates\tpl_custom_form_default.php") or I need to do on other parts like in CSS and possibly on JavaScript part as well? (Surely codes are already with Zen Cart's core files. I'm simply wonder if I have to do manual import to custom forms.)

  2. #2
    Join Date
    Jul 2012
    Posts
    16,718
    Plugin Contributions
    17

    Default Re: Converting Form to HTML5-style

    Making a change to the template is best done in a development environment. By that I mean, not directly on your live site.

    There are multiple ways to approach the changes. The path taken is primarily up to you.

    Ideally, the new content that was added to your site was based off of some known/still existing page. That way, you could make the changes to this new page as were applied to that existing page.

    The html portion (as you put it) would be the first thing suggested to update. Incorporate classes as applicable and as necessary incorporate any new div tags or similar to obtain the grouping(s) necessary for the css to be applied. The css aspect can be adjusted first without any file changes by using your browser in a "development" mode (F12 on the majority of browsers accessed from a PC). Any changes that are specific to this page can be incorporated into a css file that is loaded only when this page is displayed. See the readme notes in includes/templates/template_default/css on how to name the file associated.
    ZC Installation/Maintenance Support <- Site
    Contribution for contributions welcome...

 

 

Similar Threads

  1. Creating a Product Order Form, Grid-Style
    By TerranRich in forum Customization from the Admin
    Replies: 8
    Last Post: 26 Jan 2011, 05:11 PM
  2. Petty Form Style Question
    By jenzi in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 1 Dec 2008, 03:19 PM
  3. Order form style cart
    By neobonzi in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 23 Jul 2008, 08:02 PM
  4. Replies: 0
    Last Post: 21 Nov 2006, 04:15 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR