logo

Formulaire de contact avec nombres en js

AccueilBulmaIntégration BulmaBoxFormulaire de contact avec nombres en js

Html

<section class="offer-section">
    <div class="auto-container">
        <div class="sec-title">
            <h2 class="sec-title">Contactez-nous</h2>
            <div class="text">What We Provide For You check now and deside it<br> do you want now this</div>
        </div>
        <div class="row-form">
            <div class="column is-6 form-column">
                <div class="inner-column">
                    <div class="discount-form">
                        <div class="text">Remplissez le formulaire, notre responsable vous contactera pour plus de détails.</div>
                        <form action="#" method="post" id="email-form">
                            <div class="form-group">
                                <div class="response"></div>
                            </div>

                            <div class="form-group">
                                <input type="text" name="username" class="username" placeholder="Your Name *">
                            </div>

                            <div class="form-group">
                                <input type="email" name="email" class="email" placeholder="Your Email *">
                            </div>

                            <div class="form-group">
                                <textarea name="contact_message" class="message" placeholder="Text Message"></textarea>
                            </div>

                            <div class="form-group">
                                <button class="theme-btn btn-style-wood" type="button" id="submit" name="submit-form">
                                    <span class="btn-title">Envoyer</span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="column is-6 content-column">
                <div class="inner-column">
                    <span class="title">Offre spécial</span>
                    <h2>Comment économisé <span class="discount">50%</span> <br>d'argent dans les répérations</h2>
                    <div class="text">Not everyone Knows and where but there are 10 very importent tips, how each it is to save up to 50% on repairs, and on the money saved to buy new applicances.</div>
                    <div class="fact-counter">
                        <div class="row-form">
                            <div class="counter-column wow fadeInUp">
                                <div class="inner-column">
                                    <span class="icon flaticon-carpentry"></span>
                                    <div class="count-box"><span class="count-text" data-speed="3000" data-stop="10">0</span></div>
                                    <h4 class="counter-title">Years of Carpenting <br>Experience</h4>
                                </div>
                            </div>

                            <div class="counter-column wow fadeInUp" data-wow-delay="300ms">
                                <div class="inner-column">
                                    <span class="icon flaticon-door-1"></span>
                                    <div class="count-box"><span class="count-text" data-speed="3000" data-stop="58">0</span></div>
                                    <h4 class="counter-title">Local Branches in <br>City New York</h4>
                                </div>
                            </div>

                            <div class="counter-column wow fadeInUp" data-wow-delay="600ms">
                                <div class="inner-column">
                                    <span class="icon flaticon-team"></span>
                                    <div class="count-box"><span class="count-text" data-speed="3000" data-stop="8">0</span>k</div>
                                    <h4 class="counter-title">Happy Customer <br>with our work</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

Css

.sec-title h2 {
    position: relative;
    display: inline-block;
    font-size: 60px;
    color: #353535;
    line-height: 1em;
    font-weight: 600;
    cursor: default;
    -webkit-text-stroke: 1px #353535;
}

.row-form {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    margin-right: -15px;
    margin-left: -15px;
}

.offer-section{
    position: relative;
    padding: 120px 0 70px;
    overflow: hidden;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-color: #fafafa;
}

.offer-section:before {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    opacity: .10;
    content: "";
}

.offer-section:after{
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   background-repeat: repeat;
    content: "";
   opacity: .40;
}

.offer-section .content-column{
    position: relative;
    margin-bottom: 50px;
    z-index: 1;
}

.offer-section .content-column > .inner-column{
    position: relative;
    padding: 50px 30px 30px;
    box-shadow: 0 0 30px rgba(0,0,0,0.05);
    margin-left: -80px;
    padding-left: 100px;
    background: #fff;
    margin-top: 30px;
}

.offer-section .content-column .title{
    position: relative;
    display: inline-block;
    font-size: 16px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 500;
    padding: 0 15px;
    background-color: #ab7442;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.offer-section .content-column .title:before{
    position: absolute;
    top: 0;
    left: 100%;
    border-right: 20px solid transparent;
    border-top: 30px solid #ab7442;
    content: "";
}

.offer-section .content-column h2{
    position: relative;
    display: block;
    font-size: 32px;
    line-height: 1.4em;
    color: #353535;
    font-weight: 500;
    text-transform: capitalize;
    margin-bottom: 20px;
}

.offer-section .content-column h2 .discount{
    position: relative;
    display: inline-block;
    font-size: 48px;
    line-height: 1em;
    color: #ab7442;
    font-weight: 500;
}

.offer-section .content-column .text{
    position: relative;
    margin-bottom: 30px;
}

.offer-section .fact-counter{
    position: relative;
}

.offer-section .fact-counter .counter-column{
    position:relative;
    margin-bottom: 30px;
}

.offer-section .fact-counter .counter-column .inner-column{
    position: relative;
    text-align: center;
    box-shadow: none;
    margin: 10px;
}

.offer-section .fact-counter .icon{
    position: relative;
    display: block;
    font-size: 50px;
    text-align: center;
    color: #ab7442;
    margin-bottom: 10px;
    line-height: 1em;
}

.offer-section .fact-counter .count-box{
    position: relative;
    display: block;
    font-size:40px;
    line-height: 1em;
    font-weight:700;
    color:#353535;
    margin-bottom: 10px;
}

.offer-section .fact-counter .count-box .count-text{
    position:relative;
    font-size:40px;
    line-height: 1em;
    font-weight:700;
    color:#353535;
}

.offer-section .fact-counter .counter-title{
    position: relative;
    display: block;
    font-size:16px;
    line-height:24px;
    font-weight:400;
    color:#353535;
}

.offer-section .form-column{
    position: relative;
    z-index: 9;
    margin-bottom: 50px;
}

.offer-section .form-column .inner-column{
    position: relative;
    padding-right: 40px;
}

.offer-section .form-column .text{
    position: relative;
    display: block;
    font-weight: 500;
    padding: 15px 30px;
    font-size: 16px;
    background: #ffffff;
    border:1px solid #dddddd;
    margin-bottom: 30px;
}

.offer-section .discount-form{
    position: relative;
    background-color: #cccccc;
    padding: 50px 30px 30px;
    border: 10px solid #ffffff;
    box-shadow: 0px 0px 30px rgba(0,0,0,0.15);
}

.discount-form .form-group{
    position:relative;
    margin-bottom:20px;
}

.discount-form .form-group input[type="text"],
.discount-form .form-group input[type="email"],
.discount-form .form-group input[type="url"],
.discount-form .form-group textarea,
.discount-form .form-group select{
    position: relative;
    display: block;
    width: 100%;
    font-size: 14px;
    color: #353535;
    line-height: 20px;
    padding: 14px 20px;
    background-color: rgba(255,255,255,1);
    border: 1px solid #dddddd;
    font-weight: 400;
    border-radius: 5px;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
    outline: none;
}

.discount-form .form-group input:focus,
.discount-form .form-group select:focus,
.discount-form .form-group textarea:focus{
    border-color:#ab7442;
}

.discount-form .form-group textarea{
    height: 160px;
    resize: none;
    padding-top: 20px;
}

.discount-form .form-group button{

}

.theme-btn{
    display:inline-block;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -ms-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    transition:all 0.5s ease;
    cursor: pointer;
    border: none;
    outline: none;
}

.theme-btn .btn-title{
    position: relative;
    z-index: 9;
    color: inherit;
}

.theme-btn span:not(.btn-title){
    position: absolute;
    left: 0;
    bottom: 0;
    width: 20%;
    height: 100%;
    border-radius: 50%;
    transform: translateY(150%);
    transition: all 500ms ease;
    background-color: #ab7442;
    z-index: 0;
}

.theme-btn span:nth-child(2){
    left: 20%;
    transition-delay: 100ms;
}

.theme-btn span:nth-child(3){
    left: 40%;
    transition-delay: 200ms;
}

.theme-btn span:nth-child(4){
    left: 60%;
    transition-delay: 300ms;
}

.theme-btn span:nth-child(5){
    left: 80%;
    transition-delay: 400ms;
}

.theme-btn:hover span{
    transform: translateY(0) scale(2);
}

.btn-style-wood{
    position: relative;
    font-size: 16px;
    line-height: 30px;
    color: #ffffff;
    padding: 11px 30px 9px;
    font-weight: 600;
    border-radius: 5px;
    background-color: #ab7442;
    overflow: hidden;
}

.btn-style-wood:hover{
    color: #ab7442;
    box-shadow: 0 10px 20px rgba(0,0,0,0.10);
}

.btn-style-wood span:not(.btn-title){
    background-color: #ffffff !important;
}

.centered{
    text-align:center !important;
}

@media screen and (max-width: 768px) {
    .row-form {
        display: flex;
        flex-flow: column-reverse;
    }
    .offer-section .form-column .inner-column{
        padding-right: 0;
    }
}

JavaScript

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

(Crée un fichier appear.js et mettre le code ci dessous dans le fichier appear.js)

<script src="appear.js">
/*
 * jQuery.appear
 * https://github.com/bas2k/jquery.appear/
 * http://code.google.com/p/jquery-appear/
 * http://bas2k.ru/
 *
 * Copyright (c) 2009 Michael Hixson
 * Copyright (c) 2012-2014 Alexander Brovikov
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
 */
(function($) {
    $.fn.appear = function(fn, options) {

        var settings = $.extend({

            //arbitrary data to pass to fn
            data: undefined,

            //call fn only on the first appear?
            one: true,

            // X & Y accuracy
            accX: 0,
            accY: 0

        }, options);

        return this.each(function() {

            var t = $(this);

            //whether the element is currently visible
            t.appeared = false;

            if (!fn) {

                //trigger the custom event
                t.trigger('appear', settings.data);
                return;
            }

            var w = $(window);

            //fires the appear event when appropriate
            var check = function() {

                //is the element hidden?
                if (!t.is(':visible')) {

                    //it became hidden
                    t.appeared = false;
                    return;
                }

                //is the element inside the visible window?
                var a = w.scrollLeft();
                var b = w.scrollTop();
                var o = t.offset();
                var x = o.left;
                var y = o.top;

                var ax = settings.accX;
                var ay = settings.accY;
                var th = t.height();
                var wh = w.height();
                var tw = t.width();
                var ww = w.width();

                if (y + th + ay >= b &&
                    y <= b + wh + ay &&
                    x + tw + ax >= a &&
                    x <= a + ww + ax) {

                    //trigger the custom event
                    if (!t.appeared) t.trigger('appear', settings.data);

                } else {

                    //it scrolled out of view
                    t.appeared = false;
                }
            };

            //create a modified fn with some additional logic
            var modifiedFn = function() {

                //mark the element as visible
                t.appeared = true;

                //is this supposed to happen only once?
                if (settings.one) {

                    //remove the check
                    w.unbind('scroll', check);
                    var i = $.inArray(check, $.fn.appear.checks);
                    if (i >= 0) $.fn.appear.checks.splice(i, 1);
                }

                //trigger the original fn
                fn.apply(this, arguments);
            };

            //bind the modified fn to the element
            if (settings.one) t.one('appear', settings.data, modifiedFn);
            else t.bind('appear', settings.data, modifiedFn);

            //check whenever the window scrolls
            w.scroll(check);

            //check whenever the dom changes
            $.fn.appear.checks.push(check);

            //check now
            (check)();
        });
    };

    //keep a queue of appearance checks
    $.extend($.fn.appear, {

        checks: [],
        timeout: null,

        //process the queue
        checkAll: function() {
            var length = $.fn.appear.checks.length;
            if (length > 0) while (length--) ($.fn.appear.checks[length])();
        },

        //check the queue asynchronously
        run: function() {
            if ($.fn.appear.timeout) clearTimeout($.fn.appear.timeout);
            $.fn.appear.timeout = setTimeout($.fn.appear.checkAll, 20);
        }
    });

    //run checks when these methods are called
    $.each(['append', 'prepend', 'after', 'before', 'attr',
        'removeAttr', 'addClass', 'removeClass', 'toggleClass',
        'remove', 'css', 'show', 'hide'], function(i, n) {
        var old = $.fn[n];
        if (old) {
            $.fn[n] = function() {
                var r = old.apply(this, arguments);
                $.fn.appear.run();
                return r;
            }
        }
    });

})(jQuery);
</script>
<script>
(function($) {

   if($('.count-box').length){
      $('.count-box').appear(function(){

         var $t = $(this),
            n = $t.find(".count-text").attr("data-stop"),
            r = parseInt($t.find(".count-text").attr("data-speed"), 10);

         if (!$t.hasClass("counted")) {
            $t.addClass("counted");
            $({
               countNum: $t.find(".count-text").text()
            }).animate({
               countNum: n
            }, {
               duration: r,
               easing: "linear",
               step: function() {
                  $t.find(".count-text").text(Math.floor(this.countNum));
               },
               complete: function() {
                  $t.find(".count-text").text(this.countNum);
               }
            });
         }

      },{accY: 0});
   }

   function enableMasonry() {
      if($('.sortable-masonry').length){

         var winDow = $(window);
         // Needed variables
         var $container=$('.sortable-masonry .items-container');
         var $filter=$('.filter-btns');

         $container.isotope({
            filter:'*',
             masonry: {
               columnWidth : 1
             },
            animationOptions:{
               duration:500,
               easing:'linear'
            }
         });

         $filter.find('li').on('click', function(){
            var selector = $(this).attr('data-filter');

            try {
               $container.isotope({
                  filter : selector,
                  animationOptions: {
                     duration: 500,
                     easing : 'linear',
                     queue  : false
                  }
               });
            } catch(err) {

            }
            return false;
         });


         winDow.on('resize', function(){
            var selector = $filter.find('li.active').attr('data-filter');

            $container.isotope({
               filter : selector,
               animationOptions: {
                  duration: 500,
                  easing : 'linear',
                  queue  : false
               }
            });
         });


         var filterItemA    = $('.filter-btns li');

         filterItemA.on('click', function(){
            var $this = $(this);
            if ( !$this.hasClass('active')) {
               filterItemA.removeClass('active');
               $this.addClass('active');
            }
         });
      }
   }

})(window.jQuery);
</script>

À placer avant la fermeture du body.

 

Compteur js seul

Html

<section class="offer-section">
    <div class="column is-6 content-column">
        <div class="inner-column"><span class="title">Offre spécial</span>
            <h2>Comment économisé <span class="discount">50%</span><br>d'argent dans les répérations</h2>
            <div class="text">Not everyone Knows and where but there are 10 very importent tips, how each it is to save up to 50% on repairs, and on the money saved to buy new applicances.</div>
            <div class="fact-counter">
                <div class="row-form">
                    <div class="counter-column wow fadeInUp">
                        <div class="inner-column"><span class="icon flaticon-carpentry"></span>
                            <div class="count-box"><span class="count-text" data-speed="3000" data-stop="10">0</span></div>
                            <h4 class="counter-title">Years of Carpenting <br>Experience</h4>
                        </div>
                    </div>
                    <div class="counter-column wow fadeInUp" data-wow-delay="300ms">
                        <div class="inner-column"><span class="icon flaticon-door-1"></span>
                            <div class="count-box"><span class="count-text" data-speed="3000" data-stop="58">0</span></div>
                            <h4 class="counter-title">Local Branches in <br>City New York</h4>
                        </div>
                    </div>
                    <div class="counter-column wow fadeInUp" data-wow-delay="600ms">
                        <div class="inner-column"><span class="icon flaticon-team"></span>
                            <div class="count-box"><span class="count-text" data-speed="3000" data-stop="8">0</span>k</div>
                            <h4 class="counter-title">Happy Customer <br>with our work</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Formulaire de contact seul

Html

<section class="offer-section">
    <div class="auto-container">
        <div class="sec-title">
            <h2 class="sec-title">Contactez-nous</h2>
            <div class="text">What We Provide For You check now and deside it<br> do you want now this</div>
        </div>
        <div class="row-form">
            <div class="column is-6 form-column">
                <div class="inner-column">
                    <div class="discount-form">
                        <div class="text">Remplissez le formulaire, notre responsable vous contactera pour plus de détails.</div>
                        <form action="#" method="post" id="email-form">
                            <div class="form-group">
                                <div class="response"></div>
                            </div>

                            <div class="form-group">
                                <input type="text" name="username" class="username" placeholder="Your Name *">
                            </div>

                            <div class="form-group">
                                <input type="email" name="email" class="email" placeholder="Your Email *">
                            </div>

                            <div class="form-group">
                                <textarea name="contact_message" class="message" placeholder="Text Message"></textarea>
                            </div>

                            <div class="form-group">
                                <button class="theme-btn btn-style-wood" type="button" id="submit" name="submit-form">
                                    <span class="btn-title">Envoyer</span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Une idée ? Partagez-la !

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *