This is an anti-spam contact form that doesn't require any server-side scripting languages or a CAPTCHA challenge-response test. It uses elements of a standard contact form along with an external JavaScript file and a mail form file powered by Misk.com.
It's also completely cross-browser compatible and degrades nicely if a user does not have JavaScript enabled in their web browser.
A Pen by Mark Hillard on CodePen.
This donation button toggles between 2 view states via CSS and the slide-down effect is powered by some simple jQuery.
The second function appends the "amount" query string parameter and the value of your selected radio button to the end of the destination page URL upon a "faux" form submission.
This can be customized for all types of input fields.
A Pen by Mark Hillard on CodePen.
This is the destination page that's loaded after the "faux" form submission on the landing page.
The first function parses the value of your previously selected radio button from the "amount" query string parameter in the page URL.
The second function populates the associated radio button based on the query string parameter/value from the page URL.
A Pen by Mark Hillard on CodePen.
This is a simple contact form with built-in email validation, input field behaviors and an AJAX submission handler. The page will not refresh when the form is submitted, which allows for custom UI functions. In this example, the data will be posted in the background to a mail form file.
Use the console in your browser's developer tools to see the form in action.
A Pen by Mark Hillard on CodePen.
This is a lightly styled textarea that remembers what you type even if you reload the page or close your browser. Behold the power of HTML5 Local Storage!
A Pen by Mark Hillard on CodePen.
This little jammy utilizes the "jQuery.getScript()" shorthand AJAX method. You can use this to inject scripts (".js" files) directly into the DOM. It features URL validation and custom UI functions based on the status of the file you're trying to load.
Use the console in your browser's developer tools to see the form in action.
A Pen by Mark Hillard on CodePen.
Here's a smooth as butter page scrolling effect thanks to jQuery and the Velocity.js animation engine.
A Pen by Mark Hillard on CodePen.
It's amazing what you can do with some simple math inside Angular.js expressions. Here are some dynamically populated progress bars that are meant to show how a particular group of giving opportunities are doing.
A Pen by Mark Hillard on CodePen.
