Is there a way to wrap the submit button with html element while using wordpress function comment_form function.

$comments_args = array(
            'id_form'               => 'main-contact-form',
            'class_form'            => 'contact-form',
            'class_submit'          => 'btn btn-primary btn-lg',
            'label_submit'          => 'Add Comment',
            'fields'                =>  $fields,
            'title_reply_before'    => '<div class="message_heading"><h4>',
            'title_reply_after'    => '</h4><p>Make sure you enter the(*)required information where indicate.HTML code is not allowed</p></div>',
            'comment_field' => '
                <div class="row"><div class="col-sm-7">                        
                    <div class="form-group">
                        <label>Message *</label>
                        <textarea name="message" id="message" required="required" class="form-control" rows="8"></textarea>
                    </div> 
                </div>'

        );

        comment_form($comments_args);

I want output code for submit button be like:

 <div class="form-group">
     <input type="submit" class="btn btn-primary btn-lg>
 </div>

Is there a way to wrap the submit button with html element while using wordpress function comment_form function.

$comments_args = array(
            'id_form'               => 'main-contact-form',
            'class_form'            => 'contact-form',
            'class_submit'          => 'btn btn-primary btn-lg',
            'label_submit'          => 'Add Comment',
            'fields'                =>  $fields,
            'title_reply_before'    => '<div class="message_heading"><h4>',
            'title_reply_after'    => '</h4><p>Make sure you enter the(*)required information where indicate.HTML code is not allowed</p></div>',
            'comment_field' => '
                <div class="row"><div class="col-sm-7">                        
                    <div class="form-group">
                        <label>Message *</label>
                        <textarea name="message" id="message" required="required" class="form-control" rows="8"></textarea>
                    </div> 
                </div>'

        );

        comment_form($comments_args);

I want output code for submit button be like:

 <div class="form-group">
     <input type="submit" class="btn btn-primary btn-lg>
 </div>

• comments
• comment-form
• comments-template

3 Answers 3

We can use comment_form function's submit_button parameter to change submit button HTML.

Default HTML for submit_button is

<input name="%1$s" type="submit" id="%2$s" class="%3$s" value="%4$s" />

You can change your code like this.

$comments_args = array(
   ....

   'submit_button' => '<div class="form-group">
            <input name="%1$s" type="submit" id="%2$s" class="%3$s" value="%4$s" />
        </div>'

   ....
);

Update:

Regarding %1$s , %2$s and so on..

If you take a look at comment_form() source, you can see that submit_button is going through sprintf like this.

$submit_button = sprintf(
  $args['submit_button'],
    esc_attr( $args['name_submit'] ),
    esc_attr( $args['id_submit'] ),
    esc_attr( $args['class_submit'] ),
    esc_attr( $args['label_submit'] )
);

Please place below code in your theme's functions.php file and it will wrap the submit button inside div:

// define the comment_form_submit_button callback
function filter_comment_form_submit_button( $submit_button, $args ) {
    // make filter magic happen here...
    $submit_before = '<div class="form-group">';
    $submit_after = '</div>';
    return $submit_before . $submit_button . $submit_after;
};

// add the filter
add_filter( 'comment_form_submit_button', 'filter_comment_form_submit_button', 10, 2 );

Even more updated answer:

'submit_field' => '<p class="form-submit">%1$s %2$s</p>',