Showing A Custom Success Message After Submitting A Contact Form

When a contact, buyers or sellers form is submitted on a RealtyNinja website, we show this message:

You can replace that with your own custom success message, or any content/code.

Here's how to set your own custom success message on any form widget:

Login to your RealtyNinja website (yourwebsite.com/login)
Click EDIT MY WEBSITE
Go to a page with a form widget on it (or place a form widget onto a page)
Click "Page Layout and Widgets"
Click "Widget Options" on next to the form widget you wish to edit
Fill in the "Custom success message" field
Click APPLY CHANGES

Examples

The "custom success message" field can be used for basic text (like the example above) or any code (HTML, Javascript, etc.).

Custom Thank You page:

For example, you could use this javascript to redirect the user to a custom thank you page once the form is submitted. To do this, you would first create a new page on your RealtyNinja website. I've called mine "thanks" and hidden it from the navigation menu (via the lightbulb icon in "manage pages"). Then I used the code snippet below in the "Custom success message" field on a form widget.

Note: Replace "yourwebsite.com" with your website URL.

<script>
window.location.replace("https://www.yourwebsite.com/thanks");
</script>

Download Freebie:

Another idea is to offer a free download in exchange for your website users contact information. To do this, you would first upload your freebie (for example a PDF file) to your Google Drive or Dropbox (or alternative cloud storage solution) and copy the public link to it. Then, you would use the code snippet below in the "Custom success message" field on a form widget.

Note: Replace "#" with the link to your file.

Thanks! Your freebie is now ready. <a href="#">Click here</a> to download it.

A Note About Custom Javascript

Make sure that any Javascript used in the "Custom success message" field is wrapped in a <script>...</script> tag. Also, script tags sourcing external JS files (<scripts> with "src" attribute) should be included in the page's custom code and not in this "Custom success message" field.

Advanced Integration Method

This is for advanced users only that are familiar with javascript programming.

If the custom success message functionality explained above does not cover your needs, you can put the below code snippet in a pages custom footer code and have complete control of what happens on after a form is submitted.

The code snippet is just a starting point, and we cannot support any issues you may have when implementing it.

<script>
$(document).ready(function() {
    $("form.f-katana").on("rn.leadformsubmit", function(event, data) {
        //code goes here that you want to fire on lead form submission
    });
});
</script>

Reminder: Script tags sourcing external JS files should be included in the page's custom code and not in this "Custom success message" field. Another thing to keep in mind is that the code that goes within the snippet above should not include any additional <script> tags or other '$(document).ready' lines.

How to call custom code on a specific listings form submit

All forms on RealtyNinja sites fire a custom event on submit which includes information that can be used to identify which listing the lead form was submitted for. Here is an example of the data we receive on a listing form submission:

Using that data I can adjust the code snippet from above to only fire when the form on listing id 34990 is submitted (the id can be pulled from the listing URL):

<script>
$(function(){
  var leadform = $( "form.f-katana");
  $( "form.f-katana").on( "rn.leadformsubmit", function(event, data) {
    if (data.listingid == 364119) {
    console.log("Form submitted for listing with id 364119");
    }
  });
});
</script>

You would replace the console.log() in the example above with whatever code the customer wants to submit.

Tracking Form Submission Events in Google Analytics / Facebook:

If you're looking to track form submission events in Google Analytics or Facebook please follow these guides: