Plugin Planet

Premium WordPress Plugins

USP Pro can do a LOT, but there always are fringe cases where some task needs done that requires an alternate solution. To help dial it in, here is a growing collection of simple, plug-&-play jQuery snippets for fine-tuning the behavior of any USP Form.

Notes

1) jQuery is required for these snippets to work, so make sure that it is included on the page.

2) These snippets are written to be included directly in USP Form content (via the Edit Form screen). If instead you include the snippets via the plugin’s “CSS/JS” Settings or via your theme’s JavaScript file, remove the <script> tags. That is, the <script> tags are necessary only if adding the snippets directly to form content.

3) Remember to test thoroughly before going live with any of these snippets.

Grab data, use for hidden field

Let’s say you have a form that includes the following fields:

.
.
.
[usp_url]
<input name="usp-title" type="hidden" value="User Submitted Title" />
.
.
.

The [usp_url] shortcode will display the URL field in the form. But let’s say now that you want to use the URL as the default Post Title. To do so, we can use the following snippet of jQuery to copy the value of the URL field (usp-url) to the hidden input (usp-title):

<script>
jQuery(document).ready(function($) {
	$('input[name="usp-url"]').change(function() {
		$('input[name="usp-title"]').val($(this).val());
	});
});
</script>

By changing the input names, this technique can be used and extended for a variety of form manipulations and customizations.

Clear default field values

Nice little snippet for targeting field values and clearing any auto-filled information. Just include the following:

<script>
jQuery(document).ready(function($) {
	$('.usp-input-name').val('');
	$('.usp-input-email').val('');
});
</script>

Here we are auto-clearing the values of the Name and Email fields. Customize to suit your needs.

Replace option text

This snippet replaces the text of the specified <option> element.

<script>
jQuery(document).ready(function($) {
	$('select option:contains("replace-this")').text('With whatever');
});
</script>

By default, USP <option> elements have the same value and text. So this snippet can be used to change the text to whatever is desired.

Set default selected option

This snippet can be used to set the default selected <option> for the category field (when displaying as a select/dropdown menu). So instead of the default selected option being “Please select..”, it will be the option that is specified via the following code:

<script>
jQuery(document).ready(function($){
	$('.usp-input-category').val('24');
});
</script>

Here we are targeting the class of the category field, .usp-input-category, and setting its selected <option> to the one that has a value of 24. Of course, you can change the option value to the one that you would like to use. Also, you can target other fields by changing .usp-input-category to the class of the tag select field, taxonomy select field, or any other select/dropdown field. It may also work on radio fields, but I have not tested it.

Here is an alternate technique for setting the selected option:

$('.usp-input-category option[value="24"]').attr('selected',true);

And this technique targets the <option> based on its text instead of its value:

$('.usp-input-category option:contains("Web Design")').prop('selected',true);

So the option that has text of “Web Design” will be the default selected option when the page loads.

Remove attributes, clear placeholder input text

Although USP Pro can be set to exclude the placeholder attribute, we can use it as an example for removing field attributes in general.

<script>
jQuery(document).ready(function($) {
	$('.usp-input').removeAttr('placeholder');
});
</script>

Here we are targeting all form inputs that have a class of .usp-input and removing the placeholder attribute. The joy of this technique is that you can swap out the selector and target any specific tags, and you can change the value of removeAttr() to specify any attribute that you would like to remove.

Hide/disable error messages

Quick snippet to hide any default form-submission errors on the page:

<script>
jQuery(document).ready(function($) {
	$('#usp-form-errors').remove();
});
</script>

Customize as desired to target specific errors.

Change the form’s action attribute

This snippet changes the form’s action attribute:

<script>
jQuery(document).ready(function($) {
	$('.usp-form').attr('action', 'http://example.com/custom.php');
});
</script>

Customize the specified URL to match your custom location.

Remove the “for” attribute

Here’s how to remove the for attribute for any label(s):

<script>
jQuery(document).ready(function($) {
	$('label[for="usp-category"]').each(function() { $(this).removeAttr('for'); });
});
</script>

Lots of possibilities here, could customize to target any field and remove any attribute.

Add tag that’s the same as selected category

This jQuery snippet grabs the value of the selected category (from dropdown/select menu), and then sets it as the value for a hidden tag field.

<script>
jQuery(document).ready(function($) {
     $('select[name="usp-category"]').change(function() {
         $('input[name="usp-tags"]').val($(this).find('option:selected').text());
     });
});
</script>

So in your form you would have the category field:

[usp_category label="Category" include="all" type="dropdown" multiple="false"]

..and also the hidden tags field:

<input name="usp-tags" value="fixed" type="hidden" />

Replace field value on form submit

This snippet can be used to change a field value when the form is submitted:

<script>
jQuery(document).ready(function($) {
    $('.usp-submit').click(function() {
        if ($('#usp-custom-yourfieldname').val() == '') {
            $('#usp-custom-yourfieldname').val('whatever');
        }
    });
});
</script>

This is sort of a general technique that may be applied in numerous scenarios, depending on your form configuration, goals, etc.

Customize id attribute based on label value

This snippet grabs the label text for each input and used it as the input’s id attribute.

<script>
jQuery(window).load( function($) {
	var $label = jQuery('label');
	$label.each(function() {
		$this = jQuery(this);
		var $newLabID = $this.text().toLowerCase().trim().replace(/ /g,'-');
		$this.attr('ID',$newLabID);
	});
});
</script>

This snippet makes all id values lowercase, replacing blank spaces with hyphens, and trimming unwanted space.

Note that if you’re thinking about using this snippet to make radio and checkbox ids more specific, so as to apply styles to individual options, there is no need as of USP Pro version 2.4. Newer versions of the plugin have option-specific id attributes.

Add markup to textarea

This snippet adds the specified markup to any <textarea>:

<script>
jQuery(document).ready(function($) {
       var content = '<div>Custom Markup</div>';
       $('textarea').append(content.replace(/\&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'));   
});
</script>

You can customize the markup by editing the value of the content variable. Also you can change the selector from textarea to something more specific, like the class name of the Post Content field, .usp-content.

Replace error-message text

This snippet enables you to change the default text displayed when the submitted form is returned with errors:

<script>
jQuery(document).ready(function($) {
	$('.usp-error').each(function(index) {
		var text = $(this).text(); 
		$(this).text(text.replace('mycustomfield', 'My Custom Field'));
	}); 
});
</script>

So for example, if you have a Custom Field defined as follows:

data-required#true|name#mycustomfield

The above jQuery snippet will replace the default error message, so instead of the error displaying “Required field: mycustomfield”, it will display “Required field: My Custom Field”. To target a specific Custom Field, change mycustomfield to the name you are using for the Custom Field (e.g., name#mycustomfield).

Note: this snippet is required only for Custom Field errors. To customize Primary Field errors (like Name, Email, URL, et al) visit the plugin’s “More” settings/tab.

Replace placeholder attribute

This snippet can be used to customize any placeholder attribute:

<script>
jQuery(document).ready(function($) {
	$('.class').attr('placeholder', 'New Value');
});
</script>

You can target any form field by replacing .class with your selector. You also can change the attribute from placeholder to whichever attribute you want to customize. Lastly, you can change the New Value to the value that you would like to use for the attribute value.

Disable the submit button after first click

Quick jQuery snippet to disable the submit button after the user clicks it the first time when submitting the form. This can be useful to prevent users from clicking repeatedly on the submit button for whatever reason. Just add the following jQuery snippet to your form:

<div class="submitting"></div>

<script>
jQuery(document).ready(function($) {
	$('.usp-form').on('submit', function(e) {
		$('.usp-submit').attr('disabled', true);	
		$('.submitting').text('Submitting form...');
	});
});
</script>

With this code in place, the submit button will be disabled after the user clicks it the first time to submit the form. Also, while the form is being submitted, the empty “submitting” <div> will display a message that says “Submitting form…”, to help the user understand what’s up. Additionally, you may want to look at the plugin settings for “Display Form on Success” (Advanced tab), and also “Unique Post Titles” and “Unique Post Content” (General tab). These settings can be used to help control the rate of form submissions, spam, etc.

Customize the “Please select…” for select fields

One thing that can be tricky to customize is the default text displayed by the browser for the “Please select…” text that appears within the select field itself. To get at it, here is a small snippet of jQuery that you can add directly to the bottom of the form:

<script>
jQuery(document).ready(function($) {
	$('.usp-input-category option:contains("Please select..")').text('Pick your poison..');
});
</script>

In that code, you can change “Pick your poison..” to whatever you would like to replace the default “Please select..”. Note that, as written, this snippet works with the category field, which is added to any form using the following shortcode:

[usp_category]

You can adapt the snippet to other select fields by getting the field’s class name and using it to replace .usp-input-category.

Update! As of USP Pro version 2.0, you can customize the “Please select…” text for Category, Taxonomy, and Tag fields using the default attribute. Here is a quick example:

[usp_tags default="Pick your tag.."]
[usp_category default="Pick your category.."]
[usp_taxonomy default="Pick your taxonomy.."]

If you would rather exclude the default “Please select…” string, use default="null".

And for Custom Fields, you can customize the default “Please select…” text using the option_default attribute, like so:

field#select|options#null:Option 1:Option 2:Option 3|option_default#Pick yer poison..|option_select#null|label#Options

Learn more about custom select fields »