Quick tutorial explaining how to implement a live post-preview in your USP Forms. Three steps, estimated time required: 1 – 5 minutes.
Live Demo
Here is a live preview of this “live preview” technique (type something):
Pretty spiffy, eh? Even understands basic markup like <strong> and <em> tags. And what’s great is that jQuery makes this possible with only a few lines of code. Read on to learn how!
Step 1: Add the class
In your form, add a class named usp-preview-source to the content field, like so:
[usp_content class="usp-preview-source"]Step 2: Add the markup
In order for the preview to appear in your form, it needs to know which tag to use. So let’s add the following markup to the form (just after the [usp_content] shortcode):
<div class="usp-preview-display"></div>Step 3: Add the JavaScript
Lastly, visit CSS/JS settings and add the following snippet of jQuery to “Custom JavaScript” (or include via any other method):
jQuery(document).ready(function($) {
var input = $('.usp-preview-source');
var preview = $('.usp-preview-display');
input.keyup(function(e) {
// preview.text(input.val());
preview.html(input.val().replace(/\r\n|\r|\n/g, '<br />'));
});
});That’s all there is to it. If all went well, you should see a live preview of your post content as you type. Note that line breaks and HTML tags are preserved and shown live in the preview.
Note 1:
The code snippet from Step 3 is meant to be added to USP Pro’s CSS/JS settings. If you would like to add the snippet directly to the USP Form content, that is okay too, but you will need to wrap the code with <script> tags.
Note 2:
If you would rather not include any tags or line breaks in the live preview, replace this line in the jQuery:
preview.html(input.val().replace(/\r\n|\r|\n/g, '<br />'));
..with this one:
preview.text(input.val());
Everything else should be straightforward. Apply any CSS/jQuery as needed to customize the results to your suit your needs.