I just created a comments.php file inside my WordPress theme folder and I customized some fields. My main purpose was to use Bootstrap 4's input groups. When I call the comments using the code piece below, everything is OK:

 <?php
     if (comments_open()) :
         comments_template();
     else :
         echo '<p>You cannot send comments for this post.</p>';
     endif; 
  ?>

But in another section of my website I need the WordPress comment_form() inside a Bootstrap 4 Modal. When I call the comment_form() there, I get the original WordPress Comment From instead of the form that I created (or better to say modified) on my own.

Here's my code:

<div class="modal fade" id="commenting">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Post your comment</h4>
                <button type="button" class="close ml-0" data-dismiss="modal">&times;</button>
            </div>
            <!-- Modal body -->
            <?php 
               comment_form();
            ?>
            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
            </div>
         </div>
    </div>
</div>

I just created a comments.php file inside my WordPress theme folder and I customized some fields. My main purpose was to use Bootstrap 4's input groups. When I call the comments using the code piece below, everything is OK:

 <?php
     if (comments_open()) :
         comments_template();
     else :
         echo '<p>You cannot send comments for this post.</p>';
     endif; 
  ?>

But in another section of my website I need the WordPress comment_form() inside a Bootstrap 4 Modal. When I call the comment_form() there, I get the original WordPress Comment From instead of the form that I created (or better to say modified) on my own.

Here's my code:

<div class="modal fade" id="commenting">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Post your comment</h4>
                <button type="button" class="close ml-0" data-dismiss="modal">&times;</button>
            </div>
            <!-- Modal body -->
            <?php 
               comment_form();
            ?>
            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
            </div>
         </div>
    </div>
</div>

• comments
• comment-form

1 Answer 1

Yes, You can customize the comment form with the Bootstrap 4.

You just need to do some edits with bootstrap classes and HTML.

$args = array(
    'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>'
  'fields' => apply_filters( 'comment_form_default_fields', array(

    'author' =>
      '<p class="comment-form-author">' .
      '<label for="author">' . __( 'Name', 'domainreference' ) . '</label> ' .
      ( $req ? '<span class="required">*</span>' : '' ) .
      '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
      '" size="30"' . $aria_req . ' /></p>',

    'email' =>
      '<p class="comment-form-email"><label for="email">' . __( 'Email', 'domainreference' ) . '</label> ' .
      ( $req ? '<span class="required">*</span>' : '' ) .
      '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
      '" size="30"' . $aria_req . ' /></p>',

    'url' =>
      '<p class="comment-form-url"><label for="url">' .
      __( 'Website', 'domainreference' ) . '</label>' .
      '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
      '" size="30" /></p>'
    )

);
comment_form( $args );

Please use this. I think it can help.