콘텐츠로 건너뛰기

WordPress에 모기지 계산기를 추가하는 방법(단계별)

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

WordPress에 모기지 계산기를 추가하고 싶나요?

부동산이나 금융 웹사이트가 있는 경우 모기지 계산기를 사용하면 방문자가 귀하가 홍보하는 부동산을 구입할 여유가 있는지 확인하는 데 도움이 될 수 있습니다. 이렇게 하면 사람들이 귀하의 웹사이트에 더 오랫동안 머무를 수 있고 더 많은 부동산을 판매하는 데 도움이 됩니다.

이 기사에서는 WordPress에 모기지 계산기를 쉽게 추가하는 방법을 설명합니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

WordPress에 모기지 계산기를 추가하는 이유는 무엇입니까?

모기지 계산기를 사용하면 사용자는 이자율 및 상환 기간을 통해 모기지 상환액에 대한 견적을 얻을 수 있습니다.

방문자는 주택 가치, 계약금, 이자율 등과 같은 정보를 간단히 입력할 수 있습니다. 그 후, 모기지 지불 계산기는 주어진 세부 사항을 기반으로 한 달에 지불해야 하는 금액을 계산합니다.

IDX 부동산 목록을 사용하여 부동산 웹사이트를 만들고 있다면 모기지 계산기도 리드 생성에 도움이 될 것입니다. 방문자는 계산기를 사용할 수 있지만 결과를 저장하려면 이메일 주소를 입력해야 합니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

또한 방문자가 모기지 계산을 위해 다른 사이트를 방문할 필요가 없기 때문에 이탈률을 줄일 수도 있습니다.

자신의 사이트에 있는 모기지 계산기의 혜택을 누릴 수 있는 다른 사람들로는 금융 자문가, 모기지 브로커 또는 은행, 개인 금융 교육자 등이 있습니다.

그러면 WordPress에서 모기지 계산기를 쉽게 만드는 방법을 살펴보겠습니다. 이 튜토리얼에서는 두 가지 모기지 계산기 플러그인인 WPForms와 Formidable Forms를 사용하여 초보자에게 친숙한 두 가지 방법을 보여줍니다.

다음 빠른 링크를 사용하여 특정 플러그인으로 건너뛸 수 있습니다.

  • 방법 1: WPForms를 사용하여 간단한 WordPress 모기지 계산기 추가
  • 방법 2: 강력한 양식을 갖춘 고급 WordPress 모기지 계산기 추가

방법 1: WPForms를 사용하여 간단한 WordPress 모기지 계산기 추가

첫 번째 방법은 WPForms를 사용하는 것입니다. 1700개 이상의 양식 템플릿을 갖춘 이 끌어서 놓기 양식 플러그인은 다양한 유형의 웹사이트에 대한 모기지 계산기를 포함한 다양한 양식을 만드는 데 적합합니다.

이 방법은 세금이나 보험에 대한 추가 계산 없이 간단하면서도 응답성이 뛰어난 모기지 계산기를 만들고 싶은 사람들에게 권장됩니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

메모: WPForms의 무료 버전이 있지만 이 튜토리얼에서는 계산 애드온을 사용할 수 있는 Pro 계획을 사용합니다. 구매 시 50% 할인을 받을 수 있는 WPForms 할인이 있습니다!

먼저 WordPress에 플러그인을 설치하세요.

완료되면 다음으로 이동하세요. WP양식 » 설정 WPForms 계정 페이지에서 Pro 플랜의 라이선스 키를 삽입하세요. 그런 다음 ‘키 확인’을 클릭하세요.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

모기지 계산기 양식 템플릿 선택 및 사용자 정의

이제 라이센스 키가 활성화되었으므로 다음으로 이동해야 합니다. WP양식 ” 새로운 걸 더하다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

다음 화면에서 새 양식에 이름을 지정할 수 있습니다. ‘모기지 계산기 양식’처럼 간단할 수도 있습니다.

아래로 스크롤하여 검색창을 사용하여 모기지 계산기 양식 템플릿을 찾으세요.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

WPForms에는 모기지 계산기 양식과 단순 모기지 계산기 양식의 두 가지 템플릿이 있음을 알 수 있습니다. 두 템플릿 모두 비슷한 기능을 제공하지만 포함된 특정 필드가 다릅니다.

단순 모기지 계산기 양식 템플릿은 잠재 구매자가 월별 모기지 금액을 신속하게 추정하는 데 도움을 주고자 하는 부동산 사이트에 가장 적합합니다.

반면, 모기지 계산기 양식 템플릿은 총 지불 이자, 총 모기지 지불 및 연간 지불 금액을 포함하여 모기지 세부 정보에 대한 포괄적인 분석을 제공합니다. 이 수준의 세부정보는 재정적 의무를 완전히 이해하려는 고객에게 유용할 수 있습니다.

어떤 계산기를 사용할지는 귀하에게 달려 있지만 데모 목적으로 모기지 계산기 양식 템플릿을 사용하겠습니다.

‘데모 보기’를 클릭하면 각 양식이 실제로 어떻게 보이는지 확인할 수 있습니다.

선택을 마친 후 ‘템플릿 사용’을 클릭하세요.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

이 단계에서는 양식에 계산 애드온이 필요하다는 팝업이 나타납니다.

계속하려면 ‘예, 설치하고 활성화합니다’를 클릭하세요.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

이제 드래그 앤 드롭 양식 작성 도구가 나타납니다. 보시다시피 템플릿에는 이미 계산기 필드가 추가되어 있습니다.

이 특정 템플릿에는 사용자가 주택 가치(집의 총 비용)와 계약금 금액(부동산을 구입할 때 구매자가 선불로 지불하는 금액)을 입력할 수 있는 필드가 있습니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

사용자는 슬라이더를 사용하여 주택 대출 이자율 및 모기지 기간에 대한 정보를 입력할 수도 있습니다.

양식에 모든 모기지 세부정보가 포함되면 하단 섹션에서 사용자의 모기지 월별 및 연간 지불 금액, 지불된 총 이자 및 총 모기지 지불액을 자동으로 계산합니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

‘필드 옵션’으로 이동하여 왼쪽 패널의 ‘고급’ 탭으로 이동하면 이 하단 섹션에 대한 계산 공식을 찾을 수 있습니다. 하단에 ‘수식’ 상자가 있습니다.

확신이 없으면 이 섹션을 변경하지 않는 것이 좋습니다. 즉, WPForms에는 도움이 필요할 때 사용할 수 있는 계산 치트 시트가 있습니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

계속해서 양식을 사용자 정의해 보겠습니다. 새 필드를 추가하려면 왼쪽 패널의 ‘필드 추가’ 섹션으로 이동하세요. 그런 다음 필드를 양식 작성기로 끌어서 놓기만 하면 됩니다.

여기서는 사용자 이름을 캡처하기 위해 양식에 ‘이름’ 필드를 추가했습니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

필드를 사용자 정의하려면 필드를 클릭하기만 하면 왼쪽 패널에 ‘필드 옵션’ 탭이 나타납니다. 추가로 구성할 수 있는 세 가지 탭은 일반, 고급 및 스마트 로직입니다.

사용자 정의할 수 있는 항목은 필드 유형에 따라 다릅니다. 필드 레이블을 변경하거나, 설명 텍스트를 삽입하거나, 해당 필드를 필수로 설정하려면 ‘일반’으로 이동하세요.

여기에서는 ‘주택 가치’ 필드 라벨을 ‘부동산 가격’으로 변경하고 추가 지침에 대한 설명 텍스트를 추가했습니다. 또한 사용자가 모기지 지불 계산을 얻으려면 이 필드를 삽입해야 하도록 필수 필드를 만들었습니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

‘고급’ 탭에서는 자리 표시자 텍스트를 추가하고, 사용자 정의 CSS를 사용하려는 경우 필드의 CSS 클래스를 지정하고, 필드 레이블을 숨기도록 선택하고, 필요한 경우 계산 기능을 활성화할 수 있습니다.

기본적으로 양식에는 값이 미국 달러로 표시되어야 함을 사용자에게 알리기 위해 자리 표시자로 ‘$’ 기호가 있습니다.

또는 필드 레이블에 ‘예: 500,000’과 같은 예를 삽입하여 사용자가 가격을 올바르게 삽입하는 방법을 알 수 있습니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

‘스마트 로직’ 탭을 사용하면 현장에서 조건부 로직을 활성화할 수 있습니다. 선택 사항이지만 모기지 계산기를 더욱 매력적으로 만드는 데 유용한 기능입니다.

이를 사용하려면 ‘조건부 논리 활성화’ 버튼을 켜기만 하면 됩니다.

그런 다음 특정 기준에 따라 필드를 표시하거나 숨기도록 선택할 수 있습니다. 아래 예에서는 사용자가 이메일 주소를 입력한 경우 ‘부동산 가격’ 필드를 표시하도록 선택했습니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

양식 사용자 정의가 완료되면 오른쪽 상단에 있는 ‘저장’을 클릭하세요.

양식 설정 구성

이제 메뉴의 가장 왼쪽에 있는 ‘설정’ 탭으로 전환해 보겠습니다.

‘일반’ 탭에서는 양식 이름을 변경하고 양식 상단에 설명을 삽입할 수 있습니다. 사용자가 양식을 작성하도록 유도하기 위해 몇 가지 지침과 클릭 유도 문구 텍스트를 입력할 수 있습니다.

또한 제출 버튼의 텍스트와 버튼 처리 텍스트를 맞춤설정할 수 있습니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

또한 ‘스팸 방지 및 보안’ 탭으로 전환하고 싶습니다.

WPForms에는 기본적으로 활성화된 스팸 방지 보호 기능이 이미 제공됩니다. 그러나 추가 보호 조치를 위해 Akismet을 활성화할 수도 있습니다.

또한 사용자가 양식을 제출하기 전에 소비해야 하는 최소 시간(초)을 자유롭게 설정하세요. 이는 사용자에게 양식을 작성할 충분한 시간을 제공하지만 스팸 봇이 양식을 신속하게 제출할 시간은 충분하지 않습니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

아래로 스크롤하면 국가 필터를 활성화하여 특정 국가의 사용자가 양식을 작성할 수도 있습니다. 귀하의 부동산 웹사이트가 특정 국가에서만 판매되는 경우 이 방법을 사용하는 것이 좋습니다.

‘국가 필터 활성화’ 버튼을 켠 후 국가 필터 아래의 ‘허용’을 클릭하고 판매 국가를 선택하세요.

필요한 경우 국가 필터 메시지를 사용자 정의할 수도 있습니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

페이지 아래로 이동하면 CAPTCHA 기능을 활성화하여 스팸 양식 제출을 방지할 수도 있습니다.

WPForms에서는 사용자 정의 CAPTCHA, reCAPTCHA 및 hCAPTCHA를 허용합니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

계속해서 ‘알림’ 탭으로 이동하겠습니다. 여기에서 새로운 양식이 제출될 때마다 자신에게 이메일을 보낼 수 있습니다.

이 기능을 활성화하려면 ‘알림 활성화’를 클릭하기만 하면 됩니다. WordPress에서 보낸 이메일은 분실될 가능성이 높으므로 항상 이러한 이메일 알림을 받을 수 있도록 WP Mail SMTP를 사용하는 것이 좋습니다.

이에 대한 자세한 내용은 WordPress에서 이메일을 보내지 않는 문제를 해결하는 방법에 대한 가이드를 확인하세요.

필요에 따라 이메일 내용을 자유롭게 편집하세요.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

또한 이러한 설정에서 사용자에게 보내는 맞춤 확인 이메일을 생성할 수도 있습니다. 이렇게 하려면 WordPress 양식 제출 후 확인 이메일을 보내는 방법에 대한 튜토리얼을 따르세요.

이전과 마찬가지로 설정이 완료되면 ‘저장’을 클릭하는 것을 잊지 마세요.

WordPress 사이트에 모기지 비용 계산기 삽입

이제 WordPress 블로그나 웹사이트에 모기지 계산기 양식을 표시할 준비가 되었습니다. 당신이 해야 할 일은 상단 메뉴에서 ‘Embed’ 버튼을 클릭하는 것입니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

이제 기존 페이지를 선택하거나 양식을 추가할 새 페이지를 생성하라는 삽입 팝업이 나타납니다.

또는 단축 코드를 사용할 수도 있습니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

기존 페이지나 새 페이지에 양식을 추가하는 프로세스는 매우 유사합니다.

‘기존 페이지 선택’ 옵션을 선택하면 다음 화면에서 양식을 추가할 페이지를 선택하라는 메시지가 표시됩니다. 그런 다음 ‘Let’s Go!’를 클릭하세요.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

새 페이지 옵션을 선택하면 다음 화면에서 WPForms가 새 페이지를 생성할 수 있도록 이 새 페이지의 이름을 지정하라는 메시지가 표시됩니다.

이전 방법과 유사하게 ‘Let’s Go!’를 클릭하세요. 계속하려면.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

두 옵션 모두 구텐베르그 블록 편집기로 이동합니다.

이제 페이지 아무 곳에서나 ‘+’ 블록 추가 버튼을 클릭하고 WPForms 블록을 선택하세요.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

블록이 있으면 ‘양식 선택’ 드롭다운 메뉴를 엽니다.

그런 다음 앞서 만든 양식을 선택하기만 하면 됩니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

이제 새로 생성된 양식이 블록 편집기에 표시됩니다.

차단 설정 사이드바에서 배경색 및 필드 테두리와 같은 양식의 디자인을 추가로 사용자 정의할 수 있습니다. 필요한 경우 ‘양식 편집’을 클릭하여 WPForms 빌더로 돌아갈 수도 있습니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

양식 모양이 만족스러우면 ‘업데이트’ 또는 ‘게시’를 클릭하여 변경 사항을 공식화하세요.

모기지 계산기 양식은 다음과 같습니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

고전적인 비차단 WordPress 테마를 사용하고 머리글, 바닥글, 사이드바와 같은 위젯 지원 영역에 양식을 표시하려는 경우에도 그렇게 할 수 있습니다.

그냥 가세요 모양 » 위젯 위젯이 준비된 영역에서 ‘+’ 블록 추가 버튼을 클릭하세요. 이전과 마찬가지로 거기에 WPForms 블록을 추가하고 방금 만든 양식을 선택합니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

위젯 편집기에서는 블록 편집기에서와 마찬가지로 모기지 계산기 위젯의 블록 설정을 편집할 수도 있습니다.

양식에 만족하시면 ‘업데이트’를 클릭하시면 됩니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

또는 위의 방법이 작동하지 않으면 단축 코드 방법을 사용하여 페이지, 게시물 및 기타 템플릿 부분에 양식을 삽입할 수 있습니다. 이전 삽입 팝업에서 ‘단축 코드 사용’ 링크를 클릭하기만 하면 됩니다.

그런 다음 단축 코드를 복사하여 원하는 곳에 붙여넣으세요.

자세한 내용은 WordPress에 단축 코드를 추가하는 방법을 읽어보세요.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

방법 2: 강력한 양식을 갖춘 고급 WordPress 모기지 계산기 추가

이 다음 방법은 연간 재산세, 보험 및 PMI(개인 모기지 보험)를 고려하는 고급 WordPress 모기지 계산기를 만들려는 경우에 탁월합니다.

양식에 사용자의 주택 가격, 대출 금액, 대출 기간 및 이자율과 함께 해당 데이터가 있으면 분할 상환 일정이라고도 하는 사용자의 지불 내역을 미리 볼 수 있습니다.

이 방법에서는 Formidable Forms 플러그인을 사용합니다. 이 사용자 친화적인 WordPress 문의 양식 플러그인은 사이트에 추가할 수 있는 고급 모기지 계산기 템플릿과 함께 제공됩니다.

가장 먼저 해야 할 일은 Formidable Forms Lite와 Formidable Forms 프리미엄(사업 계획) 플러그인을 모두 설치하고 활성화하는 것입니다.

무료 플러그인에는 기능이 제한되어 있지만 Formidable Forms Pro는 이를 고급 기능의 기반으로 사용합니다.

자세한 지침은 WordPress 플러그인 설치 방법에 대한 단계별 가이드를 참조하세요.

활성화되면 다음으로 이동하세요. 강력함 » 전역 설정 WordPress 대시보드에서. 여기에서 ‘계정 연결’을 클릭하세요.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

다음 화면에서 Formidable Forms 계정에 로그인하기만 하면 됩니다.

요금제를 구매한 후 계정 정보가 있어야 합니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

이제 Formidable Forms Pro 설치 권한을 요청하는 페이지가 나타납니다.

라이센스 키를 활성화하려면 ‘Formidable Forms Pro 연결 및 설치’를 클릭하세요.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

이제 Formidable Forms를 성공적으로 설정했으므로 WordPress에 모기지 계산기 양식을 추가할 준비가 되었습니다.

고급 모기지 계산기 양식 템플릿 사용

시작하려면 다음으로 이동하세요. 만만치 않은 » 양식 그런 다음 ‘새로 추가’를 클릭하세요.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

이제 WordPress 웹사이트에서 사용할 수 있는 모든 미리 만들어진 템플릿을 보여주는 팝업이 나타납니다.

모기지 계산 양식 템플릿을 찾으려면 검색창에 ‘고급 모기지 계산기’를 입력하세요. 그런 다음 템플릿 위에 커서를 놓고 ‘템플릿 사용’을 클릭하세요.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

이제 Formidable Forms 빌더에 도착하게 됩니다. 이 시점에서 필요에 맞게 양식을 사용자 정의할 수 있습니다.

시작하려면 사용자 정의하려는 필드를 클릭한 다음 ‘필드 옵션’ 탭을 선택하세요.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

여기에서 필드 레이블을 변경하고 필드가 필수인지 선택인지 선택하고 자리 표시자 텍스트를 추가하는 등 다양한 작업을 수행할 수 있습니다.

Formidable Forms의 멋진 점은 계산기에 기본값을 삽입하여 사용자가 나중에 계산 결과를 확인할 수 있다는 것입니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

‘재무 분석’ 섹션의 필드를 클릭한 경우 ‘고급 옵션’을 변경하지 마십시오.

이 영역에는 계산 공식이 포함되어 있으므로 이를 변경하면 모기지 계산기가 완전히 손상될 수 있습니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

양식 모양이 만족스러우면 오른쪽 상단에 있는 ‘저장’을 클릭하여 변경 사항을 저장하세요.

그런 다음 나중에 쉽게 식별할 수 있도록 양식 이름을 입력하세요. 그런 다음 ‘저장’을 클릭하세요.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

모기지 계산기 양식 스타일 사용자 정의

이제 상단 메뉴의 ‘스타일’ 탭으로 전환해 보겠습니다. 여기에서 양식에 대한 디자인을 선택할 수 있습니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

스타일이 마음에 들지 않으면 ‘+ 새 스타일’ 버튼을 클릭하세요.

그 후 팝업이 나타납니다. 새 스타일의 이름을 입력하고 ‘새 스타일 만들기’를 클릭하세요.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

이제 양식 스타일의 디자인을 사용자 정의할 수 있는 페이지로 이동됩니다.

타이포그래피, 색 구성표, 버튼 스타일, 체크박스 등을 자유롭게 수정하세요.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

디자인이 만족스러우면 오른쪽 상단에 있는 ‘업데이트’ 버튼을 클릭하세요.

강력한 양식 설정 구성

이 단계에서는 상단의 ‘설정’ 메뉴로 이동할 수 있습니다.

먼저 ‘일반’ 탭에서 양식 제목과 설명을 맞춤설정하고 나중에 웹사이트에 표시하도록 선택할 수 있습니다. 여기에는 양식 사용 방법에 대한 지침을 삽입하기에 좋은 장소일 수 있습니다.

텍스트 스타일을 지정하려면 HTML을 사용해야 합니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

아래로 스크롤하면 스팸 방지를 위해 허니팟 및 JavaScript를 활성화하는 설정을 찾을 수 있습니다.

가짜 스팸 및 악성 스팸 항목을 방지하려면 둘 다 활성화하는 것이 좋습니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

‘작업 및 알림’ 탭에서는 사용자에 대한 확인 이메일을 맞춤설정할 수 있습니다.

사용자 정의 감사 메시지를 표시하거나, 사용자를 특정 URL로 리디렉션하거나, 다른 페이지로 보낼 수 있습니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

확인해 볼 것을 권장하는 또 다른 탭은 ‘버튼’입니다.

여기에서 제출 버튼 텍스트와 위치를 사용자 정의할 수 있으며 사용자가 양식을 비우고 다시 시작하려는 경우 ‘다시 시작’ 버튼을 활성화할 수도 있습니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

양식 설정을 구성한 후 ‘업데이트’ 버튼을 클릭하기만 하면 됩니다.

웹사이트에 고급 모기지 계산기 양식 삽입

이제 고급 모기지 계산기 양식이 준비되었으므로 WordPress 테마의 게시물, 페이지 또는 위젯 지원 영역에 추가할 수 있습니다.

시작하려면 오른쪽 상단에 있는 ‘삽입’ 버튼을 클릭하세요.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

이제 세 가지 방법으로 양식을 추가할 수 있다는 팝업이 표시됩니다.

양식을 기존 페이지에 삽입하거나 새 페이지에 삽입하거나 단축 코드를 사용할 수 있습니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

기존 페이지 옵션을 선택하면 다음 화면에서 페이지를 선택하게 됩니다.

그런 다음 ‘양식 삽입’을 클릭하세요.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

반면에 새 페이지 옵션을 선택하면 새 페이지를 만들고 이름을 지정하게 됩니다.

그런 다음 ‘페이지 만들기’를 클릭하세요.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

두 옵션을 모두 사용하면 Formidable Forms가 페이지의 블록 편집기에 양식 블록을 자동으로 삽입합니다. 당신이해야 할 일은 그것을 재배치하는 것뿐입니다.

블록 편집기에서 바로 양식을 편집해야 하는 경우 블록의 설정 사이드바를 열고 ‘양식으로 이동’을 클릭하세요.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

준비가 되면 ‘게시’ 또는 ‘업데이트’를 클릭하세요.

Formidable Forms 모기지 계산기 양식은 다음과 같습니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

또는 단축 코드나 PHP 코드를 사용하여 모기지 계산기를 추가할 수 있습니다.

앞서 삽입 팝업에서 ‘수동 삽입’을 클릭하세요.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

그런 다음 단축 코드나 PHP 코드를 복사할 수 있습니다. 다시 말하지만, 첫 번째 옵션의 경우 WordPress에 단축 코드를 추가하는 방법에 대한 기사를 읽어보세요.

PHP 코드의 경우, 코드 조각 작업에 익숙한 경우에만 사용하는 것이 좋습니다. 이 플러그인을 사용하면 WordPress에 코드를 안전하고 쉽게 삽입할 수 있으므로 WPCode를 사용하는 것이 좋습니다.

WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그WordPress에 모기지 계산기를 추가하는 방법(단계별), 시보드 블로그

자세한 내용은 WordPress에 코드 조각을 삽입하는 방법에 대한 가이드를 읽어보세요.

이 기사가 WordPress에 모기지 계산기를 추가하는 방법을 배우는 데 도움이 되었기를 바랍니다. 또한 WordPress에서 자동 대출 또는 자동차 지불 계산기를 만드는 방법에 대한 기사와 중소기업을 위한 최고의 이메일 마케팅 서비스에 대한 전문가의 선택을 보고 싶을 수도 있습니다.

이 기사가 마음에 드셨다면 WordPress 비디오 튜토리얼을 볼 수 있는 YouTube 채널을 구독해 주세요. 당신은 또한 우리를 찾을 수 있습니다 트위터 그리고 페이스북.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다