Source Code For Link HTML Form Data To Whatsapp and WhatsApp Floating Button

Free

Source Code For Link HTML Form Data To Whatsapp and WhatsApp Floating Button

Just copy and paste and you're ready to go


CSS HTML

Snapshots


HTML Form

<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"
        id="bootstrap-css" />
    <style>
        .register .nav-tabs .nav-link:hover {
            border: none;
        }

        .text-align {
            margin-top: -3%;
            margin-bottom: -9%;

            padding: 10%;
            margin-left: 30%;
        }

        .form-new {
            margin-right: 22%;
            margin-left: 20%;
        }

        .register-heading {
            margin-left: 21%;
            margin-bottom: 10%;
            color: #e9ecef;
        }

        .register-heading h1 {
            margin-left: 21%;
            margin-bottom: 10%;
            color: #e9ecef;
        }

        .register {
            background: -webkit-linear-gradient(left, #055a4f, #00c6ff);
            margin-top: 3%;
            padding: 3%;
            border-radius: 2.5rem;
        }

        .btnSubmit {
            width: 50%;
            border-radius: 1rem;
            padding: 1.5%;
            color: #fff;
            background-color: #03612e;
            border: none;
            cursor: pointer;
            margin-right: 6%;
            color: rgb(246, 246, 252);
            margin-top: 4%;
        }
    </style>
</head>

<body>
    <div class="container register">
        <div class="row">
            <div class="col-md-12">
                <div class="tab-pane fade show active text-align form-new" id="home" role="tabpanel"
                    aria-labelledby="home-tab">
                    <h3 class="register-heading text-nowrap">HTML Form to WhatsApp</h3>
                    <div class="row register-form">
                        <div class="col-md-12">
                            <form autocomplete="off">
                                <div class="form-group">
                                    <input type="text" name="Name" id="name" class="form-control"
                                        placeholder="Your Name *" value="" required="" />
                                </div>
                                <div class="form-group">
                                    <input type="text" name="Email" id="email" class="form-control"
                                        placeholder="Your Email *" value="" required="" />
                                </div>
                                <div class="form-group">
                                    <input type="number" name="Phone" id="phone" class="form-control"
                                        placeholder="Your Contact Number *" value="" required="" />
                                </div>
                                <div class="form-group">
                                    <select class="form-control" id="service">
                                        <option>Default select</option>
                                        <option>Website Development</option>
                                        <option>Mobile App Development</option>
                                        <option>Web and Mobile Application</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <input type="button" name="submit" class="btnSubmit btn-block" onclick="gotowhatsapp()" value="Submit" />
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        function gotowhatsapp() {

            var name = document.getElementById("name").value;
            var phone = document.getElementById("phone").value;
            var email = document.getElementById("email").value;
            var service = document.getElementById("service").value;

            var url = "https://wa.me/918789529215?text="
                + "Name: " + name + "%0a"
                + "Phone: " + phone + "%0a"
                + "Email: " + email + "%0a"
                + "Service: " + service;

            window.open(url, '_blank').focus();
        }
    </script>
</body>

</html>


WhatsApp Floating Button

<a href="https://wa.me/918789529215?text=Hi%20There!" class="float" style=" position: fixed; width: 50px; height: 50px; bottom: 70px; right: 120px; color: #fff; border-radius: 50px; text-align: center; cursor: pointer; box-shadow: 2px 2px 3px #999; " > <img src="https://trickuweb.com/whatsapp.png" alt="" height="60px" width="60px" /> </a>


Javascript Code For Sending Form Data To WhatsApp

<script> function gotowhatsapp() { var name = document.getElementById("name").value; var phone = document.getElementById("phone").value; var email = document.getElementById("email").value; var service = document.getElementById("service").value; var url = "https://wa.me/918789529215?text=" + "Name: " + name + "%0a" + "Phone: " + phone + "%0a" + "Email: " + email + "%0a" + "Service: " + service; window.open(url, '_blank').focus(); } </script>



Watch Source Code For Link HTML Form Data To Whatsapp and WhatsApp Floating Button Installation



Related Projects


Recent Comments

Latest Comments section by users