JSFiddle - React, Tailwind, and code Playground

by dikucher

HTML

<form class="envelope-form modal-form" id="envelope-form">

                <div class="row">
                    <div class="narrow">
                        <input type="text" placeholder="Ваше имя" name="name" required="">
                    </div>
                    <div class="wide">
                        <input type="text" placeholder="Ваша фамилия" name="last-name" required="">
                    </div>
                </div><!-- /row -->

                <div class="row">
                    <input type="text" placeholder="Введите e-mail" name="email" required="">
                </div><!-- /row -->

                <div class="row">
                    <input type="text" placeholder="Введите телефон" name="phone" required="">
                </div><!-- /row -->

                <div class="row">
                    <input type="text" placeholder="Организация" name="company" required="">
                </div><!-- /row -->

                <div class="row">
                    <input type="text" placeholder="Ваша должность" name="post" required="">
                </div><!-- /row -->

                <div class="row">
                    <div class="wide">
                        <select class="style-select" data-placeholder="Тип билета" id="select-type-ticket">
                            <option value=""></option>
                            <option>онлайн</option>
                            <option>basic</option>
                            <option>business</option>
                            <option>VIP</option>
                        </select>
                    </div>

                    <input type="text" class="hidden" name="type-ticket" id="type-ticket" value="000">

                    <div class="narrow">
                        <select class="style-select" data-placeholder="Количество" id="select-sum-ticket">
                            <option value=""></option>
                            <option>1</option>
                        ...

CSS

.modal-form {
  width: 264px;
  margin: 36px auto 0;
}
.modal-form ::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #461864;
}
.modal-form :-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #461864;
}
.modal-form ::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #461864;
}
.modal-form :-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #461864;
}
.modal-form .row {
  width: 100%;
  margin-bottom: 20px;
  position: relative;
}
.modal-form .row.req:after {
  content: "*";
  display: inline;
  position: absolute;
  top: 14px;
  right: 13px;
  font: 14px 'Open Sans', sans-serif;
  color: #461864;
  z-index: 10;
}
.modal-form input[type="text"] {
  width: 100%;
  height: 42px;
  background: #e5e5e5;
  border-radius: 5px;
  outline: none;
  border: none;
  font: 14px 'Open Sans', sans-serif;
  color: #461864;
  padding: 0 0 0 10px;
}
.modal-form textarea {
  width: 100%;
  height: 162px;
  padding: 6px 0 0 10px;
  background: #e5e5e5;
  border-radius: 5px;
  outline: none;
  border: none;
  font: 14px 'Open Sans', sans-serif;
  color: #461864;
}

.hidden {
    display: none;
}

JavaScript

var envelopeForm = tFormer('envelope-form', {
        submitButton: document.getElementById('submit-envelope')
    });

    envelopeForm.submit(function(){

        var url = "../mail/reg.php"; // the script where you handle the form input.

        $.ajax({
            type: "POST",
            url: url,
            data: $("#envelope-form").serialize(), // serializes the form's elements.
            success: function(data)
            {
                $("#envelope-form .reset").click();
                $(".fancybox-close").click();
                $('#button-thanks').click();

                setTimeout(function(){
                    $(".fancybox-close").click();
                }, 500000);
            }
        });


        envelopeForm.processing( false );

    });