cfp.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
    <meta name="viewport" content="width=device-width" />
    <title>Call for Paper</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js"></script>
    <script src="script-cfp.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css">
    <link href="https://cdn.jsdelivr.net/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.0/js/bootstrapValidator.min.js"></script>

</head>

<body style="margin-top: 8px;margin-left:-1px">

<div id="img-header">
    <img src="https://weare.sfeir.com/wp-content/uploads/2017/05/logo.png">
    <h1>Booking</h1>
</div>


<form id="contact-form" role="form" data-toggle="validator" action="#">

    <h1>Call for Papers</h1>

    <div id="contact-info">
        <div id="login" class="hidden">N'oubliez pas d'autoriser les pop-ups afin d'autoriser la modification du Google Sheet relatif au calendrier !</div>

        <div id="nom-event" class="form-group has-feedback">
            <label for="nom-event-i" class="contact-titre">Nom du CFP</label>
            <input id="nom-event-i" class="contact-input" type="text" name="Nom" placeholder="Nom du CFP"/>
        </div>

        <div id="type-event" class="hidden">
            <select name="Type" id="cte">
                <option value="CFP">CFP</option>
            </select>
        </div>

        <div id="nom-ville" class="hidden">
            <select name="Ville" id="ville">
                <option value="/"></option>
            </select>
        </div>

        <div id="date-debut">
            <label for="dd" class="contact-titre">Date d'ouverture du CFP :</label>
            <input id="dd" type="date" name="Date DEBUT">
        </div>

        <div id="date-fin" class="hidden">
            <label for="df" class="contact-titre">Date de fin de soumission :</label>
            <input id="df" type="date" name="Date FIN">
        </div>

        <div id="email" class="form-group has-feedback hidden">
            <label for="Email-i" class="contact-titre">Votre adresse email</label>
            <input id="Email-i" class="contact-input" type="Email" name="Email" placeholder="Email"/>
        </div>

        <div id="description" class="form-group has-feedback hidden">
            <label for="site-i" class="contact-titre">Lien du site de l'évènement</label>
            <input id="site-i" class="contact-input" type="text" name="Description" placeholder="Lien du site"/>
        </div>

        <div id="lien" class="form-group has-feedback hidden">
            <label for="lien-i" class="contact-titre">Lien du CFP</label>
            <input id="lien-i" class="contact-input" type="text" name="Lien" placeholder="Lien du CFP"/>
        </div>

        <div id="adresse" class="form-group has-feedback hidden">
            <label for="adresse-i" class="contact-titre">Lien de l'évènement Workplace</label>
            <input id="adresse-i" class="contact-input" type="text" name="Adresse" placeholder="Event Workplace"/>
        </div>

        <div id="plage" class="hidden">
            <select name="Plage horaire" id="ph">
                <option value="/"></option>
            </select>
        </div>

        <div id="salle" class="hidden">
            <select name="Salle" id="cs">
                <option value="/"></option>
            </select>
        </div>

        <div id="speaker" class="hidden">
            <select name="Speaker" id="speak">
                <option value="/"></option>
            </select>
        </div>

        <div id="organisateur" class="hidden">
            <select name="Organisateurs" id="orga">
                <option value="/"></option>
            </select>
        </div>

        <div id="feedback" class="hidden">
            <select name="Feedback">
                <option value="/"></option>
            </select>
        </div>

        <div id="lien-feedback" class="hidden">
            <select name="LienFeedback1">
                <option value="/"></option>
            </select>
        </div>

        <div id="txt-feedback" class="hidden">
            <select name="TxtFeedback1">
                <option value="/"></option>
            </select>
        </div>

        <div id="lien-feedback2" class="hidden">
            <select name="LienFeedback2">
                <option value="/"></option>
            </select>
        </div>

        <div id="txt-feedback2" class="hidden">
            <select name="TxtFeedback2">
                <option value="/"></option>
            </select>
        </div>

        <div id="lien-feedback3" class="hidden">
            <select name="LienFeedback3">
                <option value="/"></option>
            </select>
        </div>

        <div id="txt-feedback3" class="hidden">
            <select name="TxtFeedback3">
                <option value="/"></option>
            </select>
        </div>

        <div id="lien-feedback4" class="hidden">
            <select name="LienFeedback4">
                <option value="/"></option>
            </select>
        </div>

        <div id="txt-feedback4" class="hidden">
            <select name="TxtFeedback4">
                <option value="/"></option>
            </select>
        </div>
        <div id="img" class="hidden">
            <select name="Image">
                <option value="URL nécessaire"></option>
            </select>
        </div>

        <div id="agenda" class="hidden">
            <select name="dans l'agenda?">
                <option value="OUI"></option>
            </select>
        </div>

        <div id="contact-btn"  class="form-group">
            <button type="submit" id="postForm" class="orange" disabled>Soumettre</button>
        </div>
    </div>
</form>

<script async defer src="https://apis.google.com/js/api.js"
        onload="this.onload=function(){};handleClientLoad()"
        onreadystatechange="if (this.readyState === 'complete') this.onload()"/>
</script>

</body>

</html>