구글 블로그에 문의하기 양식 위젯 추가 및 디자인 개선
이전에 구글 블로그의 '문의하기 양식' 위젯을 추가해서 디자인도 약간 수정하는 내용의 글을 작성했었다.
그런데 이런 블로그의 운영자에게 이메일을 보내는 기능은 위젯을 사용하지 않고도 만들 수 있다.
페이지 혹은 포스트의 본문에도 블로그 운영자에게 메일을 보내는 양식을 넣을 수가 있는데, 오늘은 그 코드를 알려주겠다.
사이드바나 푸터에 문의하기 양식 위젯을 넣는 대신 다른 위젯을 넣거나, 혹은 광고라도 하나 더 넣고 싶은 분들에게는 지금 알려주는 방법이 더 유용할 것 같다.
구글 블로그의 페이지 or 포스트에 메일 보내기 양식을 넣는 코드
구글 블로그 페이지 vs 포스트 (feat. 페이지 URL 지정하는 방법)
페이지에 대한 자세한 설명은 링크를 참고하자.
내 블로그의 Contact 페이지에 메일 보내기 양식을 넣은 모습이다.
물론 버튼의 색상이라던지, 마음에 들지 않는 부분이 있기 때문에 CSS 수정을 해서 디자인도 약간 바꿀 예정이다.
<div class="contact-form">
<div class="contact section" id="contact" style="display: block;">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" type="text" placeholder="이름" />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" type="text" placeholder="이메일" />
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="메시지"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="보내기" />
<br />
<div style="text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>일단 이 코드가 문의하기 양식을 넣는 코드다.
그런데 이게 다른 템플릿에서도 되는지 내가 사용 중인 Amalia 템플릿에서만 되는 것인지는 확실히 모르겠다.
뭐.. 내가 구글 블로그에 사용 중인 템플릿이 Amalia 템플릿이고, 그래서 내가 작성한 템플릿을 뜯어 고치는 내용의 모든 글들이 다 Amalia 템플릿에 맞춰져 있다.
어쩔 수 없다.
어쨌든 이제부터 디자인을 수정해 보겠다.
페이지에 삽입한 메일 보내기 양식의 디자인의 문제점
이렇게 페이지에 추가한 메일 보내기 양식의 디자인이 주변 환경과 비교하면 얼마나 조화롭지 못한지 비교하기 위해서 선으로 이어서 표시해봤다.
일단 '이름'과 '이메일'의 입력 필드가 너무 두껍다.
사이드바에 있는 검색창과 비교하면 확실히 두껍다.
이걸 줄여보겠다.
그리고 메일을 전송하는 '보내기' 버튼.. 이것도 버튼의 크기가 너무 크다.
다른 버튼들과 비교하면 확연히 차이가 난다.
다른 버튼들과 조화를 이룰 수 있도록 크기와 색상을 변경해 보겠다.
페이지에 삽입한 메일 보내기 양식 디자인 수정
1. '이름'과 '이메일' 입력 필드의 크기와 간격 수정
구글 블로그 관리 페이지에서 '테마' > 'HTML 편집'으로 이동한다.
그리고 [ctrl + F] 키를 누르고 #contact .contact-form-name을 검색한다.
그리고 이미지에 표시한 부분을 전부 삭제한다.
언젠가 필요할 것 같아서 전부 삭제하기 부담스러우면 주석 처리를 하거나, 안에 들어있는 값들만 삭제하자.
2. 모바일 환경에서는 '이름'과 '이메일' 입력 필드를 다른 라인으로 나누기
모바일 화면을 캡처했다.
모바일 화면처럼 폭이 좁은 화면에서도 '이름'과 '이메일' 입력 필드가 같은 라인에 있으면 이렇게 답답한 느낌을 준다.
그래서 데스크톱 화면에서는 '이름'과 '이메일' 입력 필드를 지금과 같이 같은 라인에 두고, 모바일 화면에서는 서로 다른 라인에 두도록 수정하겠다.
[ctrl + F] 키를 누르고 .contact-form .contact-form-name을 검색한다.
이미지에 표시한 부분의 코드가 '이름'과 '이메일'을 같은 라인에 두도록 하는 CSS 코드다.
이 부분을 아래의 코드와 같이 수정한다.
@media screen and (min-width: 540px) { /* 추가 */
.contact-form .contact-form-name{
width:calc(50% - 5px)
}
.contact-form .contact-form-email{
width:calc(50% - 5px);
float:right
}
}기존의 코드를 @media screen and (min-width: 540px) { ... }으로 감쌌다.
이것으로 '이름'과 '이메일' 입력 필드가 같은 라인에 있게 되는 효과는 화면의 너비가 540픽셀 이상일 때만 적용된다.
즉, 모바일 화면에서는 '이름' 입력 필드 아래에 '이메일' 입력 필드가 오게 된다.
3. 보내기 버튼 디자인 변경
이제 'HTML 편집'의 코드 캡처는 생략하겠다.
'HTML 편집'에서 [ctrl + F] 키를 누르고 #contact .contact-form-button-submit을 검색한다.
그리고 그 안에 있는 코드들을 다음과 같이 수정한다.
#contact .contact-form-button-submit{
float:right; /* 추가 */
max-width:100%;
width:auto; /* 수정 */
z-index:0;
/* margin:4px 0 0; 삭제 */
padding:0 20px;
text-align:center;
cursor:pointer;
/* background:#27ae60; 삭제 */
border:0;
height:auto;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
-o-border-radius:3px;
border-radius:3px; /* 수정 */
text-transform:uppercase;
-webkit-transition:all .2s ease-out;
-moz-transition:all .2s ease-out;
-o-transition:all .2s ease-out;
-ms-transition:all .2s ease-out;
transition:all .2s ease-out;
color:#FFF
}
#contact .contact-form-button-submit:hover{
background:#2c3333 /* 수정 */
}버튼의 크기를 줄이고, 오른쪽으로 정렬하도록 수정했다.
색상도 수정하고, margin과 padding 값도 수정하고, 버튼 모서리 둥글게 깎는 효과도 2픽셀에서 3픽셀로 수정했다.
보내기 버튼의 디자인 변경 후의 모습이다.
아까 위에서 수정했던 것처럼 모바일 화면에서는 '이름'과 '이메일' 입력 필드도 다른 라인에 있다.
확실히 더 나아졌다.
4. 메시지 입력 필드 크기 조절
'HTML 편집'에서 [ctrl + F] 키를 누르고 #contact .contact-form-email-message을 검색한다.
#contact .contact-form-email-message{
height:300px /* 수정 */
}그리고 그 안에 있는 height 값을 마음에 드는 값으로 수정한다.
5. 플래시 메시지 크기 조절
이메일 보내기에 성공하거나 실패하면 뜨는 플래시 메시지가 있다.
이 플래시 메시지가 너무 작게 표시되는 문제가 있다. (지금 보이는 이미지는 수정한 후의 모습이다.)
'HTML 편집'에서 [ctrl + F] 키를 누르고 .contact-form-error-message-with-border을 검색한다.
.contact-form-error-message-with-border{
float:left;
width:100%;
background-color:#fbe5e5;
font-size:13px; /* 수정 */
text-align:center;
line-height:11px;
padding:20px; /* 수정 */
margin:10px 0;
box-sizing:border-box;
border:1px solid #fc6262
}
.contact-form-success-message-with-border{
float:left;
width:100%;
background-color:#eaf6ff;
font-size:13px; /* 수정 */
text-align:center;
line-height:11px;
padding:20px; /* 수정 */
margin:10px 0;
box-sizing:border-box;
border:1px solid #5ab6f9
}.contact-form-error-message-with-border와 그 아래에 있는 .contact-form-success-message-with-border를 이렇게 수정한다.
6. 그 외 디테일한 부분 수정
#contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message{
background-color:#FFF;
/* border:1px solid #eee;
border-radius:3px;
padding:10px; 삭제 */
margin-bottom:10px !important;
max-width:100% !important
}#contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message에서 위에 주석 처리된 코드 3줄을 삭제한다.
완성!
이렇게 완성했다.
확실히 주변 환경과 어울리면서 더 예쁜 메일 보내기 폼이 되었다.
참고로 이 글의 가장 위에 링크를 걸어둔 이전 포스트를 보고 코드를 수정했었던 분들 중에서 사이드바나 푸터에 설치했었던 문의하기 양식 위젯을 삭제하고 이것만 사용할 분들은 이전에 추가했었던 코드를 삭제하도록 하자. (그냥 둬도 큰 문제는 없지만)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊
지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
0 Comments
댓글 쓰기
🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩