templates/front/inc/newsletter.html.twig line 1

Open in your IDE?
  1. <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  2.     <div class="modal-dialog" role="document">
  3.         <div class="modal-content">
  4.             <div class="modal-header">
  5.                 <h5 class="modal-title" id="exampleModalLabel">Une Newsletter Royale</h5>
  6.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  7.                     <span aria-hidden="true"><i class="fa-solid fa-circle-xmark"></i></span>
  8.                 </button>
  9.             </div>
  10.             <div class="modal-body">
  11.                 <p>Envie de gagner un chèque cadeau d'une valeur de 300€, à venir dépenser dans l'une des boutiques* de votre choix du Royal Hamilius ?</p>
  12.                 <p>Rien de plus simple : <strong>abonnez-vous à notre Newsletter</strong></p>
  14.                 <form id="sb_form"
  15.                       onsubmit="process2(
  16.                         'https://services.sarbacane.com/core/v1/forms/contacts/upsert?listID&#x3D;tJ1tPNW5RNWaP5_DkytH-A&amp;formID&#x3D;IFfOBkq1TUazwnzLt6zMnw&amp;timezone&#x3D;Europe/Paris', 'https://forms.sbc33.com/', '5e833f98b95cee23e8abf69a', 'false', 'message',
  17.                         '', 'https://services.sarbacane.com/core/v1/transactional/sendmessage/optin', 'Merci', 'Vos informations ont été ajoutées avec succès.',
  18.                         'Vous allez recevoir un email', 'Vous devrez cliquer sur le lien de confirmation pour valider votre inscription', 'Erreur',
  19.                         'Une erreur inattendue s%27est produite.', 'Le formulaire est en cours d%27édition, veuillez patienter quelques minutes avant d%27essayer à nouveau.', '',
  20.                         '', ''
  21.                         );
  22.                         return false;"
  23.                       method="post" class="col-md-8 m-auto text-center d-flex flex-column align-items-center">
  24.                     <!--<label id="form-header-title"></label>-->
  26.                    <span style="display: flex;flex-direction: row;">
  27.                    <!--<label id="label-EMAIL_ID"></label>-->
  28.                     <div id="form-mandatory"></div>
  29.                     </span>
  30.                     <input placeholder="Adresse mail" id="input-email" type="email" name="email" required="true" sb-form-input>
  31.                     <div id="div-submitInput" align="left">
  32.                         <div class="col-md-12 text-center">
  33.                             <button class="link-arrow black ml-5 position-relative mobile-FW" id="submitInput" type="submit" value="VALIDER">
  34.                                 <img src="{{ asset('img/icons/arrow-right-black.svg') }}" class="position-absolute">
  35.                                 S’abonner
  36.                             </button>
  37.                         </div>
  38.                         <!--
  39.                         <button id="submitInput" type="submit" value="VALIDER" class="mobile-FW" ><span style="margin:0;">VALIDER</span>
  40.                         </button>
  41.                         -->
  42.                         <div class="loader" style="display:none"></div>
  43.                     </div>
  44.                 </form>
  46.                 <p>Le gagnant sera tiré au sort parmi les nouveaux inscrits entre le 5 juillet et jusqu'au 15 juillet.
  47.                     Vous n'êtes peut-être plus qu'à un clic d'un shopping de folie.</p>
  48.             </div>
  49.             <div class="modal-footer">
  50.                 <small>*Galeries Lafayette, Décathlon, Daniel Gérard, FNAC, Tango, Post, Delhaize, Steffen</small>
  51.             </div>
  52.         </div>
  53.     </div>
  54. </div>
  56. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  57.     Launch demo modal
  58. </button>
  60. <script type="text/javascript" src="https://forms.sbc33.com/form.js"></script>
  61. <style>
  62.     @import url(https://fonts.googleapis.com/css?family=Bree+Serif|Ubuntu|Dancing+Script|Droid+Sans|Lato|Lobster|Montserrat|Open+Sans|Pacifico|Raleway|Roboto|Source+Sans+Pro|Titillium+Web&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese);
  66.     #form-header-title {
  67.         color: #393939;
  68.         font-family: Arial, Verdana, sans-serif;
  69.         font-size: 25px;
  70.         display: block;
  71.         text-align: center;
  72.         margin-bottom: 30px;
  73.     }
  74.     #label-EMAIL_ID {
  75.         color: #393939;
  76.         font-family: Arial, Verdana, sans-serif;
  77.         font-size: 14px;
  78.         margin-bottom: 8px;
  79.     }
  80.     #input-email {
  81.         height: 35px;
  82.         margin: 5px 0 18px 0;
  83.         font-size: 0.9em;
  84.         padding-left: 5px;
  85.         -webkit-box-sizing: border-box;
  86.         box-sizing: border-box;
  87.         text-indent: 5px;
  88.         width: 100%;
  89.     }
  90.     #form-mandatory {
  91.         font-size: 13px;
  92.         margin-left: 5px;
  93.         font-family: Arial, Verdana, sans-serif;
  94.         color: #393939;
  95.     }
  96.     input::-webkit-input-placeholder, input:-moz-placeholder, input::-moz-placeholder, input:-ms-input-placeholder, input::-ms-input-placeholder {
  97.         color: #848484;
  98.         opacity: 0.6;
  99.     }
  100.     select {
  101.         -webkit-appearance:none;
  102.         -moz-appearance:none;
  103.         appearance:none;
  104.         cursor:pointer;
  105.     }
  106.     @media screen and (-webkit-min-device-pixel-ratio:0) {
  107.         select {padding-right:18px}
  108.     }
  109.     .select-arrow {
  110.         position:relative;
  111.     }
  112.     .select-arrow:after {
  113.         content:'^';
  114.         font:15px "Consolas", monospace;
  115.         color: #848484;
  116.         -webkit-transform:rotate(180deg);
  117.         -moz-transform:rotate(180deg);
  118.         -ms-transform:rotate(180deg);
  119.         transform:rotate(180deg);
  120.         right:8px; top:-3px;
  121.         padding:0 0 0px;
  122.         position:absolute;
  123.         pointer-events:none;
  124.     }
  125.     .control {
  126.         display: block;
  127.         position: relative;
  128.         padding-left: 30px;
  129.         margin-left: 5px;
  130.         margin-right: 6px;
  131.         cursor: pointer;
  132.         font-size: 18px;
  133.     }
  134.     .control input {
  135.         position: absolute;
  136.         z-index: -1;
  137.         opacity: 0;
  138.     }
  139.     .control__indicator {
  140.         position: absolute;
  141.         border: 1px solid;
  142.         top: 2px;
  143.         left: 0;
  144.         height: 20px;
  145.         width: 20px;
  146.         border-radius: 3px;
  147.         -webkit-border-radius: 3px;
  148.         -moz-border-radius: 3px;
  149.     }
  150.     .control--radio .control__indicator {
  151.         border-radius: 50%;
  152.     }
  153.     .control__indicator:after {
  154.         content: '';
  155.         position: absolute;
  156.         display: none;
  157.     }
  158.     .control input:checked ~ .control__indicator:after {
  159.         display: block;
  160.     }
  161.     .control--checkbox .control__indicator:after {
  162.         left: 8px;
  163.         top: 4px;
  164.         width: 3px;
  165.         height: 8px;
  166.         transform: rotate(45deg);
  167.         border-style: solid;
  168.         border-color: #848484;
  169.         border-width: 0 2px 2px 0;
  170.         position: absolute;
  171.     }
  172.     .control--radio .control__indicator:after {
  173.         left: 7px;
  174.         top: 7px;
  175.         height: 6px;
  176.         width: 6px;
  177.         border-radius: 50%;
  178.         background: #848484;
  179.         position: absolute;
  180.     }
  181.     input[type="number"]::-webkit-inner-spin-button {
  182.         -webkit-appearance: none;
  183.     }
  184.     input[type="number"] {
  185.         -moz-appearance: textfield;
  186.     }
  187.     input:focus {
  188.         outline: solid 1px #736F6F !important;
  189.     }
  190.     textarea:focus {
  191.         outline: solid 1px #736F6F !important;
  192.     }
  193.     select:focus {
  194.         outline: solid 1px #736F6F !important;
  195.     }
  196.     input:disabled,
  197.     input[disabled]{
  198.         opacity: 0.2;
  199.         cursor: default;
  200.     }
  201.     .loader,
  202.     .loader:after {
  203.         border-radius: 50%;
  204.         width: 1.8em;
  205.         height: 1.8em;
  206.     }
  207.     .loader {
  208.         margin-top: 5px;
  209.         margin-left: 10px;
  210.         font-size: 10px;
  211.         position: relative;
  212.         border: 0.5em solid #919798;
  213.         border-left-color: #3c9f51;
  214.         -webkit-transform: translateZ(0);
  215.         -ms-transform: translateZ(0);
  216.         transform: translateZ(0);
  217.         -webkit-animation: load8 1s infinite linear;
  218.         animation: load8 1s infinite linear;
  219.     }
  220.     @-webkit-keyframes load8 {
  221.         0% {
  222.             -webkit-transform: rotate(0deg);
  223.             transform: rotate(0deg);
  224.         }
  225.         100% {
  226.             -webkit-transform: rotate(360deg);
  227.             transform: rotate(360deg);
  228.         }
  229.     }
  230.     @keyframes load8 {
  231.         0% {
  232.             -webkit-transform: rotate(0deg);
  233.             transform: rotate(0deg);
  234.         }
  235.         100% {
  236.             -webkit-transform: rotate(360deg);
  237.             transform: rotate(360deg);
  238.         }
  239.     }
  240.     #sb_form {
  241.         padding: 10px 20px 20px 20px;
  242.         border-radius: 0px;
  243.     }
  244.     input {
  245.         color: #848484 !important;
  246.     }
  247.     #div-submitInput {
  248.         display: flex;
  249.         flex-direction: row;
  250.         justify-content: flex-start;
  251.     }
  252.     #submitInput {
  253.         border-style: solid;
  254.         text-align: center;
  255.         color: #ffffff;
  256.         padding: 10px 25px;
  257.         text-decoration: none;
  258.         display: block;
  259.         font-family: &#x27;Arial&#x27;;
  260.         font-style: inherit;
  261.         font-weight: inherit;
  262.         font-size: 15px;
  263.         background-color:#0595d6;
  264.         cursor: pointer;
  266.     }
  267.     #form-footer-mandatory {
  268.         color: #393939;
  269.         font-family: Arial, Verdana, sans-serif;
  270.         font-size: 12px;
  271.         display: block;
  272.         margin-top: 20px;
  273.     }
  274. </style>
  276. <form id="sb_form"
  277.       onsubmit="process2(
  278. 'https://services.sarbacane.com/core/v1/forms/contacts/upsert?listID&#x3D;tJ1tPNW5RNWaP5_DkytH-A&amp;formID&#x3D;IFfOBkq1TUazwnzLt6zMnw&amp;timezone&#x3D;Europe/Paris', 'https://forms.sbc33.com/', '5e833f98b95cee23e8abf69a', 'false', 'message',
  279. '', 'https://services.sarbacane.com/core/v1/transactional/sendmessage/optin', 'Merci', 'Vos informations ont été ajoutées avec succès.',
  280. 'Vous allez recevoir un email', 'Vous devrez cliquer sur le lien de confirmation pour valider votre inscription', 'Erreur',
  281. 'Une erreur inattendue s%27est produite.', 'Le formulaire est en cours d%27édition, veuillez patienter quelques minutes avant d%27essayer à nouveau.', '',
  282. '', ''
  283. );
  284. return false;"
  285.       method="post">
  286.     <label id="form-header-title"></label>
  290.     <span style="display: flex;flex-direction: row;">
  291. <label id="label-EMAIL_ID">Email</label>
  292. <div id="form-mandatory">*</div>
  293. </span>
  294.     <input id="input-email" type="email" name="email" required="true" sb-form-input>
  295.     <div id="div-submitInput" align="left">
  296.         <button id="submitInput" type="submit" value="VALIDER" class="mobile-FW" ><span style="margin:0;">VALIDER</span>
  297.         </button>
  298.         <div class="loader" style="display:none"></div>
  299.     </div>
  300.     <label id="form-footer-mandatory">* Champs obligatoires</label>
  301. </form>