Custom forms

sage
1

I’m not sure where to share this, but this has helped me a bit, so I wanted to give back what I’ve learned. I’m not a fan of how Sage’s Sass uses @extend for forms’ CSS, so I’ve implemented custom forms (search and password protected posts) so I could add the classes directly. In /app/filters.php, you can use add_filter to override the get_search_form and the_password_form:

add_filter('get_search_form', function () {
  return template('partials.search-form');
});

In this example, the overriding form goes in /resources/views/partials/search-form.blade.php.

The one form you can’t override in this manner (as far as I know) is the comment form. In comments.blade.php, I’ve expanded the comment_form call to include some Bootstrap-specific markup (I show the author and email fields in equal-width columns next to each other), but it would also be easy enough to just add the necessary input and button classes:

@php(comment_form(array(
  'class_submit'          => 'btn btn-secondary',
  'comment_notes_before'  => '<div class="comment-notes form-group"><span id="email-notes">' . __('Your email address will not be published.') . '</span>' . ($req ? __(' Required fields are marked <span class="required">*</span>') : '') . '</div>',
  'comment_field'         => '<div class="comment-form-comment form-group"><label for="comment">' . _x('Comment', 'noun') . '</label><textarea id="comment" class="form-control" name="comment" rows="8" maxlength="65525" aria-required="true" required="required"></textarea></div>',
  'fields'                => apply_filters('comment_form_default_fields', array(
    'author'  => '<div class="form-row"><div class="form-group col-md-6 comment-form-author"><label for="author">' . __('Name') . ($req ? '<span class="required">*</span>' : '') . '</label><input id="author" name="author" type="text" class="form-control blog-form-input" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . ($req ? 'aria-required="true"' : '') . '></div>',
    'email'   => '<div class="form-group col-md-6 comment-form-email"><label for="email">' . __('Email') . ($req ? '<span class="required">*</span>' : '') . '</label><input id="email" class="form-control blog-form-input" name="email" type="email" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . ($req ? 'aria-required="true"' : '') . '></div></div>',
    'url'     => '<div class="form-group comment-form-url"><label for="url">' . __('Website') . '</label><input id="url" class="form-control blog-form-input" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></div>',
  )),
)))
3 Likes