Formden Bloghttps://formden.com/blog/feed/Articles by Chris Youderian, the founder of Formden.en-usFri, 22 Feb 2019 08:07:58 -0000How to Animate a Bootstrap Form with jQueryhttps://formden.com/blog/12<p>Adding animation to an HTML form not only makes it looks slick but can help communicate to users when they've made a mistake. This tutorial will teach you how to create a Bootstrap Form and add animations to it.</p>
<ol>
<li>We'll add a <strong>shake</strong> when the form is submitted with errors.</li>
<li>We'll <strong>fade out</strong> the form after it is successfully submitted.</li>
<li>Then, we'll <strong>fade in</strong> a &quot;thank you&quot; message.</li>
</ol>
<p><img src="https://formden.com/static/assets/img/posts/animate/animation.gif" alt="Animation of a Bootstrap Form" /></p>
<p><a class="btn btn-primary" href="https://formden.com/download-code/form_mLz1zLcF.html">View Demo</a>
<a class="btn btn-info" href="https://formden.com/set-example-redirect/1001/">Customize Demo Online</a>
<a class="btn btn-warning" href="https://formden.com/download-code/form_mLz1zLcF.html" download="">Download Demo</a></p>
<h3>Requirements</h3>
<p>To create our animated form, we'll need the following:</p>
<ol>
<li><strong>jQuery 1.9+</strong> (<a href="https://code.jquery.com">cdn</a>) <br /> This popular JavaScript library is needed for animation. You're likely already using it on your site.</li>
<li><strong>jQuery UI Shake Effect</strong> <br /> You either need to use jQuery UI or simply add <a href="https://github.com/ninty9notout/jquery-shake/blob/master/jquery.ui.shake.min.js">this snippet </a>which has extracted the shake effect from jQuery UI for you.</li>
<li><strong>Bootstrap 3</strong> (<a href="http://getbootstrap.com/getting-started/#download-cdn">cdn</a>) <br />If you aren't using Bootstrap on your site, you can use this <a href="https://formden.com/blog/isolate-bootstrap">isolated version of bootstrap</a>. You don't have to use Bootstrap, but it will be easier to follow this tutorial if you do.</li>
</ol>
<p>The header of your webpage should look something like this:</p>
<pre><code class="language-html">&lt;!-- jQuery --&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://code.jquery.com/jquery-1.11.3.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- Isolated Version of Bootstrap, not needed if your site already used Bootstrap --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://formden.com/static/cdn/bootstrap-iso.css&quot; /&gt;
&lt;!-- Add Shake from jQuery UI --&gt;
&lt;script&gt;
//Copyright (c) 2013 Hiren Patel https://github.com/ninty9notout/jquery-shake, MIT license
(function(d){d.fn.shake=function(a){&quot;function&quot;===typeof a&amp;&amp;(a={callback:a});a=d.extend({direction:&quot;left&quot;,distance:20,times:3,speed:140,easing:&quot;swing&quot;},a);return this.each(function(){var b=d(this),k={position:b.css(&quot;position&quot;),top:b.css(&quot;top&quot;),bottom:b.css(&quot;bottom&quot;),left:b.css(&quot;left&quot;),right:b.css(&quot;right&quot;)};b.css(&quot;position&quot;,&quot;relative&quot;);var c=&quot;up&quot;==a.direction||&quot;down&quot;==a.direction?&quot;top&quot;:&quot;left&quot;,e=&quot;up&quot;==a.direction||&quot;left&quot;==a.direction?&quot;pos&quot;:&quot;neg&quot;,f={},g={},h={};f[c]=(&quot;pos&quot;==e?&quot;-=&quot;:&quot;+=&quot;)+a.distance;g[c]=
(&quot;pos&quot;==e?&quot;+=&quot;:&quot;-=&quot;)+2*a.distance;h[c]=(&quot;pos&quot;==e?&quot;-=&quot;:&quot;+=&quot;)+2*a.distance;b.animate(f,a.speed,a.easing);for(c=1;c&lt;a.times;c++)b.animate(g,a.speed,a.easing).animate(h,a.speed,a.easing);b.animate(g,a.speed,a.easing).animate(f,a.speed/2,a.easing,function(){b.css(k);a.callback&amp;&amp;a.callback.apply(this,arguments)})})}})(jQuery);
&lt;/script&gt;
</code></pre>
<h3>Creating a Form</h3>
<p>For this example, we will create a simple Bootstrap form that includes an email field and a submit button. You can create this form, using our <a href="https://formden.com/form-builder/">Form Builder</a> or you can code it by hand using <a href="https://formden.com/bootstrap-form-guide/">Bootstrap form syntax</a>.</p>
<pre><code class="language-html">&lt;form&gt;
&lt;div class=&quot;form-group &quot;&gt;
&lt;label class=&quot;control-label requiredField&quot; for=&quot;email&quot;&gt;
Email &lt;span class=&quot;asteriskField&quot;&gt;*&lt;/span&gt;
&lt;/label&gt;
&lt;input class=&quot;form-control&quot; id=&quot;email&quot; name=&quot;email&quot; type=&quot;text&quot;/&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;button class=&quot;btn btn-primary &quot; name=&quot;submit&quot; type=&quot;submit&quot;&gt;
Submit
&lt;/button&gt;
&lt;/div&gt;
&lt;/form&gt;
</code></pre>
<p>Of course, you are welcome to use any form that you have created.</p>
<h3>Processing a Form</h3>
<p>After the form is submitted we need detect whether there any errors. For example, the email address must include an @ symbol or we know it is invalid. If a field is incorrect, we want to display an error message. If all fields are correct, we want the form to display a thank you message. Let FormDen handle all of this for you by following one set of these instructions:</p>
<ul>
<li><a href="https://formden.com/docs/guide/">Processing instructions</a> if you are creating a new form with the <strong>Form Builder</strong> (recommended)</li>
<li><a href="https://formden.com/docs/processing-guide/">Processing instructions</a> for an <strong>existing or hand-coded form</strong> (advanced)</li>
</ul>
<p>We want the form to shake when there are errors and we want to fade in a &quot;thank you&quot; message when the form is successfully submitted.</p>
<p><img src="https://formden.com/static/assets/img/posts/animate/animation-goal.png" alt="Animation of a Bootstrap Form" /></p>
<p>We can take advantage of <code>formden.js</code> hooks to listen for errors. And, we can use <code>formden.js</code>'s API to change how <code>formden.js</code> removes the form and displays the &quot;thank you&quot; message upon success. The appropriate functions are shown in the diagram below.</p>
<p><img src="https://formden.com/static/assets/img/posts/animate/animation-means.png" alt="Animation of a Bootstrap Form" /></p>
<p><em>Note: If you <strong>don't</strong> want to use FormDen for form processing, you will need to create functions to replicate the above functionality with JavaScript and/or a server-side language. Doing so requires expertise outside of the scope of this tutorial.</em></p>
<h3>Adding the &quot;Shake&quot; effect</h3>
<p>We can easily listen for form errors using the FormDen hook <code>formden.hooks.errors</code>. FormDen will provide the <code>&lt;form&gt;</code> element to <code>formden.hooks.errors</code> if our form is submitted with errors. We can simply overwrite this function to shake the form using the jQuery UI <code>shake</code> command.</p>
<pre><code class="language-javascript"> formden.hooks.errors=function(form){
var options={direction: 'left', distance: 20, times: 3, speed: 140}
$(form).shake(options);
}
</code></pre>
<p>You can adjust the default options to change the shake's speed, distance, direction and more.</p>
<h3>Adding the &quot;Fade&quot; effect</h3>
<p>By default, <code>formden.js</code> will remove the successfully submitted form and replace it with a &quot;thank you&quot; message. Therefore, rather than just listening for a form success, we need to overwrite the functions within <code>formden.js</code> that are doing the work. It's simple to use <code>formden.js</code>'s API to overwrite the <code>remove_form</code> function with a jQuery <code>fadeOut</code> effect.</p>
<pre><code class="language-javascript"> formden.remove_form=function(form){
$(form).fadeOut(function(){formden.callbacks.remove_form_complete()});
}
</code></pre>
<p>Notice that we tell <code>formden.js</code> when we've finished removing the form by calling <code>formden.callbacks.remove_form_complete()</code>. This tells <code>formden.js</code> that the removal animation is over and it is ok to display the &quot;thank you&quot; message. All that is left to do, is fade in the &quot;thank you&quot; message using <code>formden.js</code>'s api:</p>
<pre><code class="language-javascript"> formden.display_thanks=function(form_parent, message){
$(form_parent).append(&quot;&lt;p&gt;&quot;+message&quot;&lt;/p&gt;&quot;).hide().fadeIn();
}
</code></pre>
<p>Note how <code>formden.js</code> provides the form's parent as well as the message to display. The message will be appended to the form's parent within a <code>&lt;p&gt;</code> tag. It will match whatever you have set in &quot;Processing&quot; tab of our FormDen online account.</p>
<p><img src="https://formden.com/static/assets/img/posts/animate/processing-message.png" alt="Animation of a Bootstrap Form" /></p>
<h3>Simple Form Builder Instructions</h3>
<p>If you are using the Bootstrap Form Builder, you can simply do the following:</p>
<ol>
<li>Make sure that you have an <a href="https://formden.com/accounts/register/">account</a></li>
<li>Customize the form using the <strong>Builder</strong> tab</li>
<li>Click on the <strong>Processing</strong> tab --&gt; Click &quot;Import initial values from form builder&quot;</li>
<li>Click on the <strong>Builder</strong> tab again</li>
<li>Click on the sub-tab <strong>Settings</strong></li>
<li>Paste the following code into the <strong>Extra JavaScript/CSS</strong> section:</li>
</ol>
<pre><code class="language-html">&lt;script type=&quot;text/javascript&quot; src=&quot;https://code.jquery.com/jquery-1.11.3.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
//add jQuery shake available in jQuery UI - Copyright (c) 2013 Hiren Patel https://github.com/ninty9notout/jquery-shake
(function(d){d.fn.shake=function(a){&quot;function&quot;===typeof a&amp;&amp;(a={callback:a});a=d.extend({direction:&quot;left&quot;,distance:20,times:3,speed:140,easing:&quot;swing&quot;},a);return this.each(function(){var b=d(this),k={position:b.css(&quot;position&quot;),top:b.css(&quot;top&quot;),bottom:b.css(&quot;bottom&quot;),left:b.css(&quot;left&quot;),right:b.css(&quot;right&quot;)};b.css(&quot;position&quot;,&quot;relative&quot;);var c=&quot;up&quot;==a.direction||&quot;down&quot;==a.direction?&quot;top&quot;:&quot;left&quot;,e=&quot;up&quot;==a.direction||&quot;left&quot;==a.direction?&quot;pos&quot;:&quot;neg&quot;,f={},g={},h={};f[c]=(&quot;pos&quot;==e?&quot;-=&quot;:&quot;+=&quot;)+a.distance;g[c]=
(&quot;pos&quot;==e?&quot;+=&quot;:&quot;-=&quot;)+2*a.distance;h[c]=(&quot;pos&quot;==e?&quot;-=&quot;:&quot;+=&quot;)+2*a.distance;b.animate(f,a.speed,a.easing);for(c=1;c&lt;a.times;c++)b.animate(g,a.speed,a.easing).animate(h,a.speed,a.easing);b.animate(g,a.speed,a.easing).animate(f,a.speed/2,a.easing,function(){b.css(k);a.callback&amp;&amp;a.callback.apply(this,arguments)})})}})(jQuery);
formden.hooks.errors=function(form){
var options={direction: 'left', distance: 20, times: 3, speed: 140}
$(form).shake(options);
}
formden.remove_form=function(form){
$(form).fadeOut(function(){formden.callbacks.remove_form_complete()});
}
formden.display_thanks=function(form_parent, message){
$(form_parent).append(message).hide().fadeIn();
}
&lt;/script&gt;
</code></pre>
https://formden.com/blog/12How to Customize a Field's Focus Color in a Bootstrap Formhttps://formden.com/blog/11<p>This tutorial will teach you how to customize the the focus color and drop shadow in a Bootstrap form field. By default, a Bootstrap form field is blue with a drop shadow and looks like this when it is in <strong>focus</strong>:</p>
<p><img src="https://formden.com/static/assets/img/posts/input-color/default-input.png" alt="" /></p>
<p>Overall, this is a pretty clean modern look. However, it can look out of place if your site uses a different color palette or aesthetic vibe. For example, suppose you're using a green submit button via <code>.btn-success</code>:</p>
<p><img src="https://formden.com/static/assets/img/posts/input-color/default-input-green.png" alt="" /></p>
<p>Suddenly, the blue looks out of place. Moreover, the drop shadow on the input is not really consistent with the flat button. It looks much better after we remove the drop shadow and change the <code>&lt;input&gt;</code> focus color to match the green in the submit button.</p>
<p><img src="https://formden.com/static/assets/img/posts/input-color/default-input-green-flat.png" alt="" /></p>
<p>This can be done using our <a href="https://formden.com/form-builder/">free Bootstrap form builder</a> or by coding the CSS by hand. I'll demonstrate both approaches.</p>
<h3>Fast and Easy Approach: Bootstrap Form Builder</h3>
<p>You can create a form with custom focus color and shadow fields with our form builder by following these simple steps:</p>
<ol>
<li>Go to <a href="https://formden.com/form-builder/">https://formden.com/form-builder/</a>. You'll start with a default contact form. Customize the fields as you like.</li>
<li>Click on the <strong>Settings</strong> tab: <br /> <img src="https://formden.com/static/assets/img/posts/input-color/settings-tab.png" alt="" /></li>
<li>Scroll down to the <strong>Input Focus Color and Glow</strong> setting <br /><img src="https://formden.com/static/assets/img/posts/input-color/input-focus-and-glow.png" alt="" /></li>
<li>Choose a color and glow preference: <br /><img src="https://formden.com/static/assets/img/posts/input-color/choose-color.png" alt="" /></li>
<li>Click on the <strong>Preview</strong> Tab. All inputs will now have the new color and glow settings.</li>
<li>Click on the <strong>Code</strong> Tab. CSS has been added to the page to overwrite the default the <code>&lt;input&gt;</code> focus color and glow: <br /> <img src="https://formden.com/static/assets/img/posts/input-color/code-tab.png" alt="" />This CSS is designed to work with a form wrapped in a <code>.bootstrap-iso</code> div. This is because the form builder uses an <a href="https://formden.com/blog/isolate-bootstrap">isolated version of Bootstrap</a> that you can install on any website.</li>
<li>To embed the form you have created on your site, <strong>copy</strong> the HTML code and paste it into your webpage. <br /> <img src="https://formden.com/static/assets/img/posts/input-color/copied.png" alt="" /></li>
</ol>
<h3>Under the Hood: How to Change the CSS</h3>
<p>If you already have an existing form, you'll likely want to write the CSS by scratch. If you already are using Bootstrap 3 on your website, you simply need to add the following CSS to the <code>&lt;head&gt;</code> of your webpage:</p>
<pre><code class="language-html">&lt;style&gt;
.form-control:focus{border-color: #5cb85c; box-shadow: none; -webkit-box-shadow: none;}
.has-error .form-control:focus{box-shadow: none; -webkit-box-shadow: none;}
&lt;/style&gt;
</code></pre>
<p>If you are using our <a href="https://formden.com/blog/isolate-bootstrap">isolated version of Bootstrap</a> and wrapping your form with a <code>.bootstrap-iso</code> div, you need to prefix all styles with <code>.bootstrap-iso</code>:</p>
<pre><code class="language-html">&lt;style&gt;
.bootstrap-iso .form-control:focus{border-color: #5cb85c; box-shadow: none; -webkit-box-shadow: none;}
.bootstrap-iso .has-error .form-control:focus{box-shadow: none; -webkit-box-shadow: none;}
&lt;/style&gt;
</code></pre>
<p>All form fields in Bootstrap 3 are controlled using the <code>.form-control</code> class. We want to alter the <code>focus</code> state. We change the <code>border-color</code> and remove the box shadow using <code>box-shadow</code> and <code>-webkit-box-shadow</code> (for older browsers).</p>
<p>When a field is validated (e.g. if you use <a href="https://formden.com/docs/">FormDen processing</a>), it's parent will be given the <code>.has-error</code> class. The default Bootstrap styling for <code>.has-error .form-control:focus</code> will now control the element. In the absence of our second line of CSS, the invalid field will look like this:</p>
<p><img src="https://formden.com/static/assets/img/posts/input-color/invalid-shadow.png" alt="" /></p>
<p>Notice how everything is now red and <strong>the drop shadow (or glow) is back!</strong>. The red is ok, because we want to communicate that the field is invalid/missing. However, we need to remove the drop shadow, which is what our second line of CSS accomplishes.</p>
<h4>Changing Border Width and Color</h4>
<p>So far, we've only changed the appearance of our form when a field is in focus. You can also change the initial border width and color. For example, to make a thicker gray border you'd simply use:</p>
<pre><code class="language-css">.form-control{border-width: 2px; border-color: grey;}
</code></pre>
<p><em>(if you're using Bootstrap CSS on your page)</em></p>
<pre><code class="language-css">.bootstrap-iso .form-control{border-width: 2px; border-color: grey;}
</code></pre>
<p><em>(if you're using our isolated version of Bootstrap)</em></p>
<p><img src="https://formden.com/static/assets/img/posts/input-color/input-thick.png" alt="" /></p>
<p>Notice how this changes the width of fields in all states (not just in the <em>focus</em> state).</p>
<h3>Video Tutorial</h3>
<p>We've put together a short video that will walk you through this tutorial:</p>
<iframe width="560" height="460" src="https://www.youtube.com/embed/FD3rNFnQg4Y" frameborder="0" allowfullscreen></iframe>https://formden.com/blog/11