<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <section> <div class="wizard"> <div class="header"> <div class="header-intro"> <div class="header-left"> <h2 class="header2"> Welcome, Firstname!</h2> <!--we will have the anchor points at the top of this page--> <div class="wizard-inner"> <ul class="nav nav-tabs" role="tablist" style="background-color: #fff !important; margin-top: 0px; padding-top: 10px; padding-bottom: 0px;"> <li role="presentation" class="active"> <span class="navlinks"> <a href="#step1" data-toggle="tab"> Facebook </a></span> </li> <li role="presentation" class="disabled"> <span class="navlinks"> <a href="#step2" data-toggle="tab">Twitter </a></span> </li> <li role="presentation" class="disabled"> <span class="navlinks"> <a href="#step3" data-toggle="tab">Instagram </a></span> </li> </ul> </div> <!--end of the form cycling --> </div> </div> </div> <div class="tab-content"> <div class="tab-pane active" role="tabpanel" id="step1"> <style> /*custom font*/ @import url(import url here); /* Multi-Step Form */ * { box-sizing: border-box; } #regForm { background-color: #fff; font-family: Open Sans; padding: 40px; width: 100%; } /* Mark input boxes that get errors during validation: */ input.invalid { background-color: #ffdddd; } /* Hide all steps by default: */ .tab { display: none; } button:hover { opacity: 0.8; } #prevBtn { background-color: #bbbbbb; } /* Step marker: Place in the form. */ .step { height: 15px; width: 15px; margin: 0 2px; background-color: #bbbbbb; border: none; border-radius: 50%; display: inline-block; opacity: 0.5; } .step.active { opacity: 1; } /* Mark the steps that are finished and valid: */ .step.finish { background-color: #4CAF50; } </style> <main class="col-md-8 " role="content"> <section id="section1"> <div class="container-fluid col-md-8 col-md-offset-0"> <!-- MultiStep Form --> <form id="regForm" action="/submit_page.php"> <!-- One "tab" for each step in the form: --> <div class="tab"> <div class="col-sm-8"> To get started we need you to grant us access to your Facebook business page. Please go to your Business Page, click Setting on top right, and go to Page Roles tab. Enter “Danny Alsaffar” and set Role to Admin. Once added click Next </div> <div class="col-sm-9"> <div class="card"> <div class="firstinfo"><img src="http://34.217.69.61/wp-content/uploads/2019/03/social-facebook-1489-1488-1494-1500-1497-1491-1505-1493-1499-1504-1493-1514-1508-1512-1505-1493-1501-1491-1497-1490-1497-1496-1500-1497-buzzlead-16424.png" /> <div class="profileinfo"> <p class="bio">Add Your Facebook Manager:</p> <div class="input-group"> <style> input { color: #ff0000; font: 1em/1.25em Arial, Helvetica, sans-serif; } </style> <input type="text" style="color:#3B5998; font-size: 20px; " id="copyTarget" class="form-control" value="Danny Alsaffar"> <span id="copyButton" class="input-group-addon btn" title="Click to copy"> <strong> <span style="color: white; ">COPY </span></strong> </span> </div> </div> <div class="firstinfo2"> <img src="http://34.217.69.61/wp-content/uploads/2019/03/47258824_10155921801647503_7287465727760531456_n.jpg"/ style=" border-radius: 50% !important; width: 120px; height: 120px;"> </div> </div> </div> <div class="col-sm-12" style="padding-left: 0; padding-right: 0; padding-top: 15px;"> <div class="col-sm-3" style="padding-top: 30px;"> <button class="subscribe btn btn-primary btn-block" type="button" style="border-radius: 35px 35px 35px 35px; background-color: #38BEEF; height: 57px; width: 285px; font-family: Roboto Condensed, Regular; border: none; font-size: 22px; font-weight: 100; "> CONNECT YOUR FACEBOOK </button> </div> <div class="col-sm-4" style="padding-top: 30px;"> <button class="subscribe btn btn-primary btn-block" type="button" style="border-radius: 35px 35px 35px 35px; background-color: #F0843C; height: 57px; float: right; width: 131px; font-family: Roboto Condensed, Regular; border: none; font-size: 22px; font-weight: 100; "> SKIP </button> </div> <!-- form-group.// --> </div> </div> </div> <div class="tab"> Link to dannys facebook </div> <div class="tab"> Twitter </div> <div class="tab">instagram </div> <div style="overflow:auto;"> <div style="float:right;"> <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button> <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button> </div> </div> <!-- Circles which indicates the steps of the form: --> <div style="text-align:center;margin-top:40px;"> <span class="step"></span> <span class="step"></span> <span class="step"></span> <span class="step"></span> </div> </form> <!-- /.MultiStep Form --> </div> </section> </main> <!-- /content --> <!-- alerts are for fun of it --> <script> $(document).ready(function() { // Random Alert shown for the fun of it }); $('.btn').click(function(event) { event.preventDefault(); var target = $(this).data('target'); // console.log('#'+target); $('#click-alert').html('data-target= ' + target).fadeIn(50).delay(3000).fadeOut(1000); }); // Multi-Step Form var currentTab = 0; // Current tab is set to be the first tab (0) showTab(currentTab); // Display the crurrent tab function showTab(n) { // This function will display the specified tab of the form... var x = document.getElementsByClassName("tab"); x[n].style.display = "block"; //... and fix the Previous/Next buttons: if (n == 0) { document.getElementById("prevBtn").style.display = "none"; } else { document.getElementById("prevBtn").style.display = "inline"; } if (n == (x.length - 1)) { document.getElementById("nextBtn").innerHTML = "Submit"; } else { document.getElementById("nextBtn").innerHTML = "Next"; } //... and run a function that will display the correct step indicator: fixStepIndicator(n) } function nextPrev(n) { // This function will figure out which tab to display var x = document.getElementsByClassName("tab"); // Exit the function if any field in the current tab is invalid: if (n == 1 && !validateForm()) return false; // Hide the current tab: x[currentTab].style.display = "none"; // Increase or decrease the current tab by 1: currentTab = currentTab + n; // if you have reached the end of the form... if (currentTab >= x.length) { // ... the form gets submitted: document.getElementById("regForm").submit(); return false; } // Otherwise, display the correct tab: showTab(currentTab); } function validateForm() { // This function deals with validation of the form fields var x, y, i, valid = true; x = document.getElementsByClassName("tab"); y = x[currentTab].getElementsByTagName("input"); // A loop that checks every input field in the current tab: for (i = 0; i < y.length; i++) { // If a field is empty... if (y[i].value == "") { // add an "invalid" class to the field: y[i].className += " invalid"; // and set the current valid status to false valid = false; } } // If the valid status is true, mark the step as finished and valid: if (valid) { document.getElementsByClassName("step")[currentTab].className += " finish"; } return valid; // return the valid status } function fixStepIndicator(n) { // This function removes the "active" class of all steps... var i, x = document.getElementsByClassName("step"); for (i = 0; i < x.length; i++) { x[i].className = x[i].className.replace(" active", ""); } //... and adds the "active" class on the current step: x[n].className += " active"; } </script> <!--end of facebok connect--> <form role="form" action="" method="post"> <div class="row setup-content" id="step-1"> <P> Connect your facebook </P> <div class="col-sm-6" style="padding-top: 40px;"> </div> </div> <div class="row setup-content" id="step-2"> <p> Connect your twitter </p> </div> </form> </div> <div class="tab-pane" role="tabpanel" id="step2"> <div class="col-sm-9" style="padding-left: 0; padding-right: 0; padding-top: 0px;"> <style> .twitter { border-radius: 0px !important; height: 5% !important; width: 5% !important; padding-right: 10px; } </style> <p> <img class="twitter" src="http://34.217.69.61/wp-content/uploads/2019/03/twitter_logo_bird_transparent_png.png" /> <div class="col-sm-8"> If you want to connect your Twitter - it’s included! Just provide us with your logins and we’ll start posting there. </p> </div> <div class="col-sm-12" style="padding-left: 0; padding-right: 0; padding-top: 10px;"> <div class="col-sm-4"> <div class="form-group"> <label for="email" class="creditcardtext">TWITTER USERNAME</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="email@address.com"> </div> <!-- form-group.// --> </div> <div class="col-sm-4"> <div class="form-group"> <label for="Password" class="creditcardtext">TWITTER PASSWORD</label> <input type="password" class="form-control" name="password" id="password" placeholder="Password"> </div> <!-- form-group.// --> </div> </div> </div> <div class="col-sm-9" style="padding-left: 0; padding-right: 0; padding-top: 10px;"> <div class="col-sm-4" style="padding-top: 30px;"> <button class="subscribe btn btn-primary btn-block" type="button" style="border-radius: 35px 35px 35px 35px; background-color: #38BEEF; height: 57px; width: 207px; font-family: Roboto Condensed, Regular; border: none; font-size: 20px; font-weight: 100; "> CONNECT TWITTER </button> </div> <div class="col-sm-6" style="padding-top: 30px;"> <button class="subscribe btn btn-primary btn-block" type="button" style="border-radius: 35px 35px 35px 35px; background-color: #F0843C; height: 57px; width: 99px; font-family: Roboto Condensed, Regular; border: none; font-size: 20px; font-weight: 100; "> SKIP </button> </div> <!-- form-group.// --> </div> </div> <div class="tab-pane" role="tabpanel" id="step3"> <div class="col-sm-9" style="padding-left: 0; padding-right: 0; padding-top: 0px;"> <style> .twitter { border-radius: 0px !important; height: 5% !important; width: 5% !important; padding-right: 10px; } </style> <p> <img class="twitter" src="http://34.217.69.61/wp-content/uploads/2019/03/insta.png" /> <div class="col-sm-8"> If you want to connect your Instagram - it’s included! Just provide us with your logins and we’ll start posting there. </p> </div> <div class="col-sm-12" style="padding-left: 0; padding-right: 0; padding-top: 10px;"> <div class="col-sm-4"> <div class="form-group"> <label for="email" class="creditcardtext">INSTAGRAM USERNAME</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="email@address.com"> </div> <!-- form-group.// --> </div> <div class="col-sm-4"> <div class="form-group"> <label for="Password" class="creditcardtext">INSTAGRAM PASSWORD</label> <input type="password" class="form-control" name="password" id="password" placeholder="Password"> </div> <!-- form-group.// --> </div> </div> </div> <div class="col-sm-9" style="padding-left: 0; padding-right: 0; padding-top: 10px;"> <div class="col-sm-4" style="padding-top: 30px;"> <button class="subscribe btn btn-primary btn-block" type="button" style="border-radius: 35px 35px 35px 35px; background-color: #38BEEF; height: 57px; width: 207px; font-family: Roboto Condensed, Regular; border: none; font-size: 20px; font-weight: 100; "> CONNECT INSTAGRAM </button> </div> <div class="col-sm-6" style="padding-top: 30px;"> <button class="subscribe btn btn-primary btn-block" type="button" style="border-radius: 35px 35px 35px 35px; background-color: #F0843C; height: 57px; width: 99px; font-family: Roboto Condensed, Regular; border: none; font-size: 20px; font-weight: 100; "> SKIP </button> </div> <!-- form-group.// --> </div> </div> <div class="tab-pane" role="tabpanel" id="complete"> <h3>Complete</h3> <p>You have successfully completed all steps.</p> </div> <div class="clearfix"></div> </div> </div> </section> </div> </div>