구글 블로그에 문의하기 양식 위젯 추가 및 디자인 개선

구글 블로그의 위젯 중에서 방문자가 블로그 주인에게 메일을 보낼 수 있는 '문의하기 양식' 위젯이 있다.

오늘은 블로그의 푸터^footer 부분에 그 '문의하기 양식' 위젯을 추가했다.

그런데 시각적으로 아주 조금 거슬리는 요소가 있어서 또 템플릿을 수정했고, 그 내용을 기록해볼까 한다.

구글 블로그의 문의하기 양식 위젯 추가

블로그 관리 페이지에서 왼쪽 메뉴 '레이아웃'으로 이동하자.

여기서 푸터 부분에 '가젯 추가'를 클릭해서 '문의하기 양식'을 선택한다.

추가 후에는 잊지 말고 하단의 저장 버튼도 꼭 클릭하자.

그냥 추가만 하면 끝인 줄 알았더니, 아주 약간.. 정말 약간의 거슬리는 부분이 있다.

문의하기 양식의 입력 필드에 마우스를 클릭해서 포커스가 맞춰질 때, 포커스 효과의 오른쪽 부분이 잘리는 현상이 있다.

진짜 별거 아닌 건데.. 난 이걸 고쳐야겠다.

참고로 모바일에서 살펴보면 이렇다.

양쪽으로 다 잘린다.

오른쪽의 margin 값만 약간 조절해 주면 될 줄 알았더니, 양쪽 다 조절해야겠다.

문의하기 양식 위젯이 잘리는 문제 해결

구글 블로그 관리 페이지에서 '테마' > 'HTML 편집'으로 이동한다.

그리고 [ctrl + F] 키를 누르고 .contact-form-widget form을 검색한다.

 .contact-form-widget form{
    font-family:inherit;
    margin:0 1.5px; /* 추가 */
    font-weight:400
}

거기에 이렇게 한 줄의 코드만 추가하면 된다.

이걸 적용한 결과는 현재 내 블로그 푸터에 있는 '문의하기'를 통해서 확인해 보자.

(라고 썼지만 지금은 문의하기 양식 위젯을 없앤 상태다. 그 이유는 글 하단에 링크한 포스트를 참고하자.)

모바일에서도 포커스 효과가 잘리지 않고 잘 나오는 것을 확인했다.

문의하기 양식 입력 필드 크기 조절

참고로 이 부분을 마우스 클릭으로 잡고 이동하면 메시지 입력 필드의 크기가 변하게 된다.

혹시 이것이 싫다면 'HTML 편집'에서 [ctrl + F] 키를 누르고 .contact-form-email-message을 검색한다.

그리고 거기에 resize:none;을 추가하면 된다.

나는 이 메시지 입력창이 너무 작아서 답답함을 느낄 사용자를 위해서 위아래 높이 조절만 허용하도록 resize:vertical;을 추가했다.

관련된 다음 포스트도 확인하자

구글 블로그의 페이지 혹은 포스트에 메일 보내기 양식 넣는 방법

구글 블로그의 '문의하기 양식'을 위젯 없이 포스트나 페이지에 직접 넣는 방법을 알아보세요. HTML/CSS 코드를 활용해 입력 필드와 버튼 디자인, 모바일 반응형 레이아웃까지 완벽하게 커스터마이징하는 팁을 제공합니다.

그런데 지금은 문의하기 양식 위젯을 없앴다.

위젯 대신 페이지로 문의하기 기능을 옮겼기 때문이다.

자세한 내용은 링크한 포스트를 확인하자.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.