{"id":100,"date":"2018-04-01T15:59:22","date_gmt":"2018-04-01T15:59:22","guid":{"rendered":"https:\/\/wpgeodirectory.com\/docs-v2\/docs\/addons\/ninja-forms\/"},"modified":"2020-02-18T02:42:35","modified_gmt":"2020-02-18T02:42:35","slug":"ninja-forms","status":"publish","type":"docs","link":"https:\/\/wpgeodirectory.com\/docs-v2\/integrations\/ninja-forms\/","title":{"rendered":"Ninja Forms"},"content":{"rendered":"<p><iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/3848xBO_PW8\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen><\/iframe><\/p>\n<p><span class='bookmark-index'><br \/>\n<a href=\"#intro\">Introduction<\/a><br \/>\n<a href=\"#prep\">Preparation<\/a><br \/>\n<a href=\"#contact\">Contact Form<\/a><br \/>\n<a href=\"#claim\">Claim<\/a><br \/>\n<a href=\"#faq\">FAQ<\/a><\/span><\/p>\n<h3><a name=\"intro\" href=\"#intro\">Introduction<\/a><\/h3>\n<p>This doc covers two (2) Ninja Forms integrations. The first is to provide your visitors with a &#8220;Send Enquiry&#8221; type button to fill out a form to contact the listing owner by email using the &#8217;email&#8217; field. The second is using a Ninja Form to allow users to &#8216;Claim&#8217; a listing.<\/p>\n<h3><a name=\"prep\" href=\"#prep\">Preparation<\/a><\/h3>\n<p>For the guide you have completed the following:<\/p>\n<ol>\n<li>Setup Geodirectory (Beta Version 2.0.0.5-beta or higher)<\/li>\n<li>Install and Activate Ninja Forms <\/li>\n<li>Optional &#8211; For Claim form &#8211; <a href=\"https:\/\/wpgeodirectory.com\/docs-v2\/addons\/claim\/\" rel=\"noopener noreferrer\" target=\"_blank\">Setup claim Listings Addon<\/a><\/li>\n<\/ol>\n<h3><a name=\"contact\" href=\"#contact\">Contact Form Setup<\/a><\/h3>\n<p>Open the Ninja Forms menu in WordPress to &#8220;Add New&#8221; to see the list of Forms that come with Ninja Forms. In the list you will see the &#8220;GeoDirectory Contact Form&#8221;.<\/p>\n<p>Only the <strong><em>&#8220;GeoDirectory Contact Form&#8221; form template<\/em><\/strong> comes prepared with the hidden field necessary to make this integration work. The form you create must use this template, as shown here:<\/p>\n<p><a href=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/Screenshot-2018-09-28-at-4.14.47-PM.png\"><img src=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/Screenshot-2018-09-28-at-4.14.47-PM.png\" alt=\"\" width=\"433\" height=\"180\" class=\"alignnone size-full wp-image-335\" srcset=\"https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/Screenshot-2018-09-28-at-4.14.47-PM.png 433w, https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/Screenshot-2018-09-28-at-4.14.47-PM-300x125.png 300w\" sizes=\"(max-width: 433px) 100vw, 433px\" \/><\/a><\/p>\n<ol>\n<li>Visit the Custom Fields ssettings and add the &#8220;Email&#8221; field to your post type. Make the sure field uses the key &#8217;email&#8217;.<\/li>\n<li>Navigate to <strong><em>Ninja Forms &#8211; Add new form<\/em><\/strong><\/li>\n<li>Select the &#8220;GeoDirectory Contact form&#8221;<\/li>\n<li>Edit and save the form.<\/li>\n<li>Visit WP &#8211; Appearance &#8211; Widgets<\/li>\n<li>Add GD > Ninja Forms Widget to Sidebar, and set for Display on Detail Page<\/li>\n<\/ol>\n<h3><a name=\"display\" href=\"#display\">Form Display Options<\/a><\/h3>\n<p>You have several options for how you can display the option to use a form. <\/p>\n<p><a href=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/Archive-Item-Display.png\"><img src=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/Archive-Item-Display.png\" alt=\"\" width=\"204\" height=\"293\" class=\"alignnone size-full wp-image-336\" \/><\/a><\/p>\n<p><a href=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/contact-detail-sidebar.jpg\"><img src=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/contact-detail-sidebar.jpg\" alt=\"\" width=\"254\" height=\"207\" class=\"alignnone size-full wp-image-794\" \/><\/a><\/p>\n<h4><a href=\"#button\" name=\"button\">Lightbox Button<\/a><\/h4>\n<p>Once a form integration is setup, you can also use the following shortcode to display a button to launch your form in a lightbox popup. This button can easily be added to the Detail or Archive Item templates, or a tab.<\/p>\n<p>Adjust the form_id to that of your GeoDirectory Contact Form.<br \/>\nAdjust the text param to change the text on the button.<\/p>\n<pre><code class='css'>[gd_ninja_forms form_id=&quot;3&quot; text=&quot;Contact form&quot; post_contact=&quot;1&quot; output=&quot;button&quot;]<\/code><\/pre>\n<h4>Widget Sidebar Lightbox Button<\/h4>\n<ol>\n<li>Visit WP &#8211; Appearance &#8211; Widgets<\/li>\n<li>Select the GD > Ninja Forms widget<\/li>\n<li>Set the widget to display in the Sidebar that is visible on Detail Page<\/li>\n<li>Configure the widget for the correct Ninja Form form_id<\/li>\n<li>Check the option &#8220;GD Contact Form&#8221; to only display the widget if the listing email is populated.<\/li>\n<li>Save settings<\/li>\n<li>Visit the Detail page to confirm display of the form.<\/li>\n<\/ol>\n<h4>Add Lightbox Button to Detail Page Template<\/h4>\n<p>Do you want to place the button somewhere specific on the Detail page, within the content area, instead of in the sidebar?<\/p>\n<p>To do that, you will edit the Detail page template.<\/p>\n<ol>\n<li>Navigate to your site&#8217;s Detai page template<\/li>\n<li>Edit the template (page)<\/li>\n<li>Add your Lighbox Button shortcode to the template<\/li>\n<\/ol>\n<h4>Add Lightbox Button to Archive Item Page template<\/h4>\n<p>Do you want to place the button somewhere specific in the Archive Item display, so the button shows up for each listing on the Listing page?<\/p>\n<p>To do that, you will edit the Archive Item page template.<\/p>\n<ol>\n<li>Navigate to your site&#8217;s Archive Item page template<\/li>\n<li>Edit the template (page)<\/li>\n<li>Add your Lighbox Button shortcode to the template<\/li>\n<\/ol>\n<h3><a name=\"claim\" href=\"#claim\">Claim Form<\/a><\/h3>\n<p>You should complete all the steps outlined in the <a href=\"https:\/\/wpgeodirectory.com\/docs-v2\/addons\/claim\/#setup\" rel=\"noopener noreferrer\" target=\"_blank\">Claim Listing addon setup<\/a> before setting up your Ninja Form for Claim Listings.<\/p>\n<p>Open the Ninja Forms menu in WordPress to &#8220;Add New&#8221; to see the list of Forms that come with Ninja Forms. In the list you will see the &#8220;GeoDirectory Claim Form&#8221;.<\/p>\n<p>Only the <strong><em>&#8220;GeoDirectory Claim Form&#8221; form template<\/em><\/strong> comes prepared with the hidden field necessary to make this integration work. The form you create must use this template, as shown here:<\/p>\n<p><a href=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/ninjagd-claim-form.jpg\"><img src=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/ninjagd-claim-form.jpg\" alt=\"\" width=\"300\" class=\"alignnone size-full wp-image-549\" srcset=\"https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/ninjagd-claim-form.jpg 820w, https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/ninjagd-claim-form-300x130.jpg 300w, https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/ninjagd-claim-form-768x332.jpg 768w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><\/p>\n<h4>Pricing Manager Integration<\/h4>\n<p>If you are also using the Pricing Manager addon, you can add an additional field to allow the user to select the desired price package and proceed to checkout. Be sure to have set the Price Packages for all listings.<\/p>\n<blockquote><p>Select the field by clicking the &#8220;+&#8221; to add a new field. Then drag the field on to your form.<\/p><\/blockquote>\n<p><a href=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/ninja-claim-2.jpg\"><img src=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/ninja-claim-2-1024x461.jpg\" alt=\"\" width=\"600 class=\"alignnone size-large wp-image-552\" srcset=\"https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/ninja-claim-2-1024x461.jpg 1024w, https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/ninja-claim-2-300x135.jpg 300w, https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/ninja-claim-2-768x346.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<blockquote><p>Drag the field to re-order it and place it where you want.<\/p><\/blockquote>\n<p><a href=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/gd-ninja-claim-3.jpg\"><img src=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/gd-ninja-claim-3-1024x312.jpg\" alt=\"\" width=\"300\" class=\"alignnone size-large wp-image-551\" srcset=\"https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/gd-ninja-claim-3-1024x312.jpg 1024w, https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/gd-ninja-claim-3-300x91.jpg 300w, https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/gd-ninja-claim-3-768x234.jpg 768w, https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/gd-ninja-claim-3.jpg 1339w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<h4>Claim Form Design Options<\/h4>\n<p>The Ninja Forms integration for the claim form can only be used as a popup with the GD > Ninja Form widget as shown below.<\/p>\n<p>Be sure to disable the &#8220;Is Contact Form&#8221; from the advanced options.<\/p>\n<p><a href=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/gd-ninja-claim-4.jpg\"><img src=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/gd-ninja-claim-4-734x1024.jpg\" alt=\"\" width=\"300\" class=\"alignnone size-large wp-image-550\" srcset=\"https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/gd-ninja-claim-4-734x1024.jpg 734w, https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/gd-ninja-claim-4-215x300.jpg 215w, https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/gd-ninja-claim-4-768x1071.jpg 768w, https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/gd-ninja-claim-4.jpg 775w\" sizes=\"(max-width: 734px) 100vw, 734px\" \/><\/a><\/p>\n<h3><a name=\"faq\" href=\"#faq\">FAQ &#8211; Frequently Asked Questions<\/a><\/h3>\n<blockquote><p><strong><em>My form is setup, but the email is not sent to the listing email. What do I do?<\/em><\/strong><\/p><\/blockquote>\n<p>Here are some items you can check:<\/p>\n<ul>\n<li>Does the form use the <a href=\"https:\/\/wpgeodirectory.com\/docs-v2\/integrations\/ninja-forms\/#setup\" rel=\"noopener noreferrer\" target=\"_blank\">GeoDirectory Contact Form template?<\/a><\/li>\n<li>Does the CPT with your test listing use the pre-defined Email field?<\/li>\n<li>Does your test listing have an email value filled in the Email field?<\/li>\n<li>Is the email being created? (<a href=\"https:\/\/wpgeodirectory.com\/docs-v2\/integrations\/email\/#email-log\" rel=\"noopener noreferrer\" target=\"_blank\">Diagnose with Email Log<\/a>)<\/li>\n<li>Still no joy? Get <a href=\"https:\/\/wpgeodirectory.com\/docs-v2\/geodirectory\/support\/\" rel=\"noopener noreferrer\" target=\"_blank\">support<\/a>.<\/li>\n<\/ul>\n<blockquote><p><strong><em>I want to make a form from scratch, what do I do?<\/em><\/strong><\/p><\/blockquote>\n<p>If you are feeling adventurous and want to setup a form from scratch to integrate with GD Listings, then these two settings are required.<\/p>\n<p>1. If your form will be displayed anywhere besides the detail page, then there must be a hidden field with the following settings:<br \/>\n<a href=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/Screenshot-2018-09-28-at-6.24.46-PM.png\"><img src=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/Screenshot-2018-09-28-at-6.24.46-PM.png\" alt=\"\" width=\"1327\" height=\"439\" class=\"alignnone size-full wp-image-338\" srcset=\"https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/Screenshot-2018-09-28-at-6.24.46-PM.png 1327w, https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/Screenshot-2018-09-28-at-6.24.46-PM-300x99.png 300w, https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/Screenshot-2018-09-28-at-6.24.46-PM-768x254.png 768w, https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/Screenshot-2018-09-28-at-6.24.46-PM-1024x339.png 1024w\" sizes=\"(max-width: 1327px) 100vw, 1327px\" \/><\/a><\/p>\n<p>2. Then, the Email Notification, in order to be sent to the email field of the listing, needs to be setup like this, to send the email to {GD:listing_email} instead of the default {system:admin_email}.<\/p>\n<p><a href=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/Screenshot-2018-09-28-at-6.26.02-PM.png\"><img src=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/Screenshot-2018-09-28-at-6.26.02-PM.png\" alt=\"\" width=\"1308\" height=\"361\" class=\"alignnone size-full wp-image-339\" srcset=\"https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/Screenshot-2018-09-28-at-6.26.02-PM.png 1308w, https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/Screenshot-2018-09-28-at-6.26.02-PM-300x83.png 300w, https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/Screenshot-2018-09-28-at-6.26.02-PM-768x212.png 768w, https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2018\/04\/Screenshot-2018-09-28-at-6.26.02-PM-1024x283.png 1024w\" sizes=\"(max-width: 1308px) 100vw, 1308px\" \/><\/a><\/p>\n<h3><a href=\"#faq\" name=\"faq\">FAQ<\/a><\/h3>\n<blockquote class=\"gd-faq\">\n<h5>Maintenance Mode<\/h5>\n<p>Error: \u201cThis form is currently undergoing maintenance. Please try again later. \u201d<\/p>\n<p>Check the form settings and CHECK: Remove Maintenance Mode<\/p><\/blockquote>\n<blockquote class=\"gd-faq\">\n<h5>Set Reply-To Email Value<\/h5>\n<p>When a GD contact form is submitted, the default setup fo the form is to set the value of the &#8220;Email&#8221; field of the form (the user submitted email value) as the reply-to email.<\/p>\n<p>Unfortunately this is not supported by all email sending systems.<\/p>\n<p>To troubleshoot it you can install the email log plugin to see if the email values are being set correctly before they are sent by the server.<\/p>\n<p>Ultimately even Ninja Forms may not be able to force the \u2018reply to\u2019 email value. This ultimately depends on how the mail is sent from the server and whether the reply-to email address can be set as different from the \u2018from\u2019 address. If you see a difference between the log and the email you receive then you can look to your host or email service for more information.<\/p>\n<p>This isn\u2019t a GD function and isn\u2019t something we support, but with these pointers you can diagnose the issue and take it further up the chain to your host or email partner.<\/p><\/blockquote>\n<blockquote class=\"gd-faq\">\n<h5>Form Styles<\/h5>\n<p><strong>I want to change the style of the form<\/strong><\/p>\n<p>The GD > Ninja Forms widget loads the form in an iFrame for technical reasons (listed below).<\/p>\n<p>To change the style of the form, you can set the forms to use the Ninja Forms default styles.<\/p>\n<p>Visit <\/p>\n<p>WP Backend -> Ninja Forms -> Settings -> Styles -> Light or Dark<\/p>\n<p>It is not possible to load additional styles beyond those settings to the GD > Ninja Forms forms without a customization.<\/p>\n","protected":false},"featured_media":0,"parent":99,"menu_order":8,"comment_status":"closed","ping_status":"closed","template":"","doc_tag":[],"amp_validity":null,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/wpgeodirectory.com\/docs-v2\/wp-json\/wp\/v2\/docs\/100"}],"collection":[{"href":"https:\/\/wpgeodirectory.com\/docs-v2\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/wpgeodirectory.com\/docs-v2\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/docs-v2\/wp-json\/wp\/v2\/comments?post=100"}],"version-history":[{"count":0,"href":"https:\/\/wpgeodirectory.com\/docs-v2\/wp-json\/wp\/v2\/docs\/100\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/docs-v2\/wp-json\/wp\/v2\/docs\/99"}],"next":[{"title":"Google APIs","link":"https:\/\/wpgeodirectory.com\/docs-v2\/integrations\/google\/","href":"https:\/\/wpgeodirectory.com\/docs-v2\/wp-json\/wp\/v2\/docs\/108"}],"prev":[{"title":"Gutenberg","link":"https:\/\/wpgeodirectory.com\/docs-v2\/integrations\/gutenberg\/","href":"https:\/\/wpgeodirectory.com\/docs-v2\/wp-json\/wp\/v2\/docs\/499"}],"wp:attachment":[{"href":"https:\/\/wpgeodirectory.com\/docs-v2\/wp-json\/wp\/v2\/media?parent=100"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/docs-v2\/wp-json\/wp\/v2\/doc_tag?post=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}