Jump to content

Search the Community

Showing results for tags 'contact form'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Welcome
    • Announcements & News
    • New Arrivals
  • Web Development
    • Programming
    • Database Development
    • Server Administration
    • Hosting & Domains
    • Frameworks
  • Web Design
    • HTML & CSS
    • Graphics & Multimedia
  • Desktop Discussion
    • Linux Development
    • Windows Development
    • Mac/Apple Development
    • Hardware Discussion
  • Marketing & Business
    • Advertising, Marketing, Monetization & Social Media
    • Search Engine Optimization & Traffic Building
    • Buy, Sell or Trade
  • Prodjex Web Development Applications, Tools and Plugins
    • IP.Board Applications and Plugins
    • Web Tools
  • The Developer Dump
    • General Chat

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 2 results

  1. Nathan

    Bootstrap Contact Form

    This is a good example for a simple design of a Bootstrap contact form. Demo <form class="form-horizontal" role="form" method="post" action="index.php"> <div class="form-group"> <label for="name" class="col-sm-2 control-label">Name</label> <div class="col-sm-10"> <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value=""> </div> </div> <div class="form-group"> <label for="email" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value=""> </div> </div> <div class="form-group"> <label for="message" class="col-sm-2 control-label">Message</label> <div class="col-sm-10"> <textarea class="form-control" rows="4" name="message"></textarea> </div> </div> <div class="form-group"> <label for="human" class="col-sm-2 control-label">2 + 3 = ?</label> <div class="col-sm-10"> <input type="text" class="form-control" id="human" name="human" placeholder="Your Answer"> </div> </div> <div class="form-group"> <div class="col-sm-10 col-sm-offset-2"> <input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary"> </div> </div> <div class="form-group"> <div class="col-sm-10 col-sm-offset-2"> <! Will be used to display an alert to the user> </div> </div> </form>
  2. 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.
×