네, 가능합니다. 다만 개발자가 아니시라면 조금 어려우실 수도 있으니 아래 내용을 잘 읽고 따라해 보세요.
기본적으로 제공하는 웹 페이지 삽입 코드와 버튼 모양은 아래와 같습니다.
<a class="moaform-embed moaform-style-button" href="https://moaform.com/q/s52ct3?embed" data-type="popup" target="_blank">답변하기</a>
<script>(function() { var s, b; s = document.createElement('script'); s.src = '//asset.moaform.com/embed/e.js'; b = document.getElementsByTagName('body')[0]; b.insertBefore(s, b.firstChild); })()</script>
<script>(function() { var s, b; s = document.createElement('script'); s.src = '//asset.moaform.com/embed/e.js'; b = document.getElementsByTagName('body')[0]; b.insertBefore(s, b.firstChild); })()</script>
이 코드에 몇 가지 요소를 추가하여 버튼의 모양 및 텍스트 내용을 바꿔보겠습니다. (추가된 부분, 변경된 부분만 볼드로 표시해 두겠습니다.)
<a class="moaform-embed moaform-style-button" href="https://moaform.com/q/s52ct3?embed" data-type="popup" target="_blank" style="background: #D97362; border-radius: 8px; width:140px; height: 50px; line-height: 50px;">참여해 주세요!</a>
<script>(function() { var s, b; s = document.createElement('script'); s.src = '//asset.moaform.com/embed/e.js'; b = document.getElementsByTagName('body')[0]; b.insertBefore(s, b.firstChild); })()</script>
<script>(function() { var s, b; s = document.createElement('script'); s.src = '//asset.moaform.com/embed/e.js'; b = document.getElementsByTagName('body')[0]; b.insertBefore(s, b.firstChild); })()</script>
두 번째 코드에 추가 및 수정된 각 내용들의 의미는 다음과 같습니다.
- background: #D97362 --> 버튼 색깔을 #D97362 색깔로 지정. (#D97362는 HEX 색상코드입니다.)
- border-radius: 8px --> 버튼 모서리를 반경 8px 둥글기로 깍기
- width: 140px --> 버튼의 너비를 140px 로 지정
- height: 50px --> 버튼의 높이를 50px 로 지정
- line-height: 50px --> 텍스트 영역 높이를 50px로 지정. (이 것은 버튼 내 텍스트를 상하 중앙에 위치하도록 하기 위한 값으로 그냥 버튼 높이와 같게 지정하시면 됩니다.)
- 참여해 주세요! --> 첫 번째 코드의 '답변하기' 텍스트를 '참여해 주세요!' 와 같이 원하시는 텍스트로 변경하시면 됩니다.
이 외에도 여러가지 스타일을 줄 수 있으나, 이 정도만 알아두셔도 나의 웹페이지 스타일과 맞는 버튼을 만들 수 있을 것입니다.