Level 1 Comment form vs Reply-to Comment Form

Hi Victoria,

thanks for getting back to me! The contact form is fine – I’m referring to the “reply to” function in comments.

The “normale” (level 1) comment form, when someone doesn’t reply to another comment but rather start a new comment thread, looks differently than the form that is displayed after somebody clicks “reply to” on an existing comment.

It’s a bit complicated to explain – and my blog is in German. Reply to is “antworten”.

Hope I could clarify :)

thanks again,
Ritchie

Hi @Mike,

thanks a lot! Almost there :) Is it also possible to do it the other way round? (Make the normal comment form look like the reply-to comment form with the labels aligned above the input fields.)

Because the problem with the right-aligned labels is this on smaller screens (I marked the overlapping label texts in red):

greetings,
Ritchie

• This reply was modified 6 years, 9 months ago by datadirt.

Hi @Mike,

thank you very much – you guys are geniusses!

One last question: Is it also possible to *always* position the labels above the input fields (in both forms)?

greetings,
Ritchie

Hi Mike,

it’s basically an issue with the GDPR explanation – it has too be lengthy, and it never breaks nicely on smartphones. That is why I would prefer this solution over any other.

I can of course remove the above code again. I also did some customization on the look of the comment fields – posting it here in case something interferes:

#comment {background-color:#e1edf3!important; border:1px solid #4b758a !important;padding:9px !important;}
#comment:focus {border:2px solid #4b758a !important;padding:7px !important;}
#author {background-color:#e1edf3!important; border:1px solid #4b758a !important;padding:9px !important;}
#author:focus {border:2px solid #4b758a !important;padding:7px !important;}
#email  {background-color:#e1edf3!important; border:1px solid #4b758a !important;padding:9px !important;}
#email:focus {border:2px solid #4b758a !important;padding:7px !important;}
#url  {background-color:#e1edf3!important; border:1px solid #4b758a !important;padding:9px !important;}
#url:focus {border:2px solid #4b758a !important;padding:7px !important;}
#submit {font-size:18px !important;width:100% !important;}

#commentform label {
	display: block !important;
	}

#commentform label[for=comment-mail-sub-list] {display:boxed !important;position:relative !important;clear:both !important;}
#commentform label[for=comment] {display:none !important;}
#commentform .required {display:none !important;}
#commentform .notice {display:none;}
.comment-form-gdpr {margin-bottom:20px !important;}
#commentform select {
   border:1px solid #4b758a !important;
   background-color:#e1edf3 !important;
   font-size:15px !important;
   padding:3px !important;
}

.comment_text {font-size:16px !important;}

greetings,
Ritchie

Hi Mike,

thank you, awesome – there’s a bunch of CSS rules in there, been using Enfold for quite a while. Thanks a lot!!

greetings,
Ritchie

Hi Mike

thank you so much!!! This is perfect.

Have a great weekend!

greetings, Ritchie