wordpress Salient Input Placeholder Overrides

[Nathan]

One of my favorite Wordpress themes lately is the Salient Wordpress Theme by ThemeNectar.  It does most things with ease and there are settings that save you quite a bit of time once you become familiar with the layout.  

This week I ran into an issue that I couldn't find any information on Google.  In the Salient admin area there is General Settings -> Styling.  Here you can find the overall theme skin.  I really like the "Material" setting as it gives nice effects around the site.  This setting adds some javascript to the site though and seems to override some basic functionality.  

I have a contact form on a contact us page.  Everything looks and works correctly with the form, but once I submit the form successfully and it resets the placeholders are missing.  I tried several different things such as setting the placeholders again with jQuery, but when I looked in the element inspector the placeholders were there, but not displaying.  The only way I could get them to show up again was by clicking into the input field then tabbing to the next one or clicking outside.

My solution was to use the jQuery blur(); function.  I tried this by using on click of the submit, but ran into issues where it would reset those inputs even if it failed validation and didn't successfully submit.  So I modified it and on a successful submit it will then blur all of the fields after 1 second and the placeholders return as expected.

The easiest way to add the jQuery to your page is through the page builder, just add a Raw JS Element.

Here's the code to place within there:

<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
setTimeout(
  function(){
jQuery('#cfname').blur();
jQuery('#cfemail').blur();
jQuery('#cfcompany').blur();
jQuery('#cfphone').blur();
jQuery('#cfmassage').blur();

},1000);
}, false );
</script>

The wpcf7mailsent you will not modify, that's the Contact Form 7 success event to listen for.  You will change the field names before each blur function, you can add as many as you need.