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

Open in your IDE?
  1. <script type="text/javascript" src="https://forms.sbc33.com/form.js"></script>
  2. <style>
  3.     @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);
  7.     #form-header-title {
  8.         color: #393939;
  9.         font-family: Arial, Verdana, sans-serif;
  10.         font-size: 25px;
  11.         display: block;
  12.         text-align: center;
  13.         margin-bottom: 30px;
  14.     }
  15.     #label-EMAIL_ID {
  16.         color: #393939;
  17.         font-family: Arial, Verdana, sans-serif;
  18.         font-size: 14px;
  19.         margin-bottom: 8px;
  20.     }
  21.     #input-email {
  22.         border: 1px solid #e6e4e4;
  23.         background-color: #f1f1f1;
  24.         height: 35px;
  25.         margin: 5px 0 18px 0;
  26.         font-size: 0.9em;
  27.         padding-left: 5px;
  28.         border-radius: 0px;
  29.         -webkit-border-radius: 0px;
  30.         -moz-border-radius: 0px;
  31.         -webkit-box-sizing: border-box;
  32.         box-sizing: border-box;
  33.         text-indent: 5px;
  34.         width: 100%;
  35.     }
  36.     #form-mandatory {
  37.         font-size: 13px;
  38.         margin-left: 5px;
  39.         font-family: Arial, Verdana, sans-serif;
  40.         color: #393939;
  41.     }
  42.     input::-webkit-input-placeholder, input:-moz-placeholder, input::-moz-placeholder, input:-ms-input-placeholder, input::-ms-input-placeholder {
  43.         color: #848484;
  44.         opacity: 0.6;
  45.     }
  46.     select {
  47.         -webkit-appearance:none;
  48.         -moz-appearance:none;
  49.         appearance:none;
  50.         cursor:pointer;
  51.     }
  52.     @media screen and (-webkit-min-device-pixel-ratio:0) {
  53.         select {padding-right:18px}
  54.     }
  55.     .select-arrow {
  56.         position:relative;
  57.     }
  58.     .select-arrow:after {
  59.         content:'^';
  60.         font:15px "Consolas", monospace;
  61.         color: #848484;
  62.         -webkit-transform:rotate(180deg);
  63.         -moz-transform:rotate(180deg);
  64.         -ms-transform:rotate(180deg);
  65.         transform:rotate(180deg);
  66.         right:8px; top:-3px;
  67.         padding:0 0 0px;
  68.         position:absolute;
  69.         pointer-events:none;
  70.     }
  71.     .control {
  72.         display: block;
  73.         position: relative;
  74.         padding-left: 30px;
  75.         margin-left: 5px;
  76.         margin-right: 6px;
  77.         cursor: pointer;
  78.         font-size: 18px;
  79.     }
  80.     .control input {
  81.         position: absolute;
  82.         z-index: -1;
  83.         opacity: 0;
  84.     }
  85.     .control__indicator {
  86.         position: absolute;
  87.         border: 1px solid;
  88.         top: 2px;
  89.         left: 0;
  90.         height: 20px;
  91.         width: 20px;
  92.         border-radius: 3px;
  93.         -webkit-border-radius: 3px;
  94.         -moz-border-radius: 3px;
  95.     }
  96.     .control--radio .control__indicator {
  97.         border-radius: 50%;
  98.     }
  99.     .control__indicator:after {
  100.         content: '';
  101.         position: absolute;
  102.         display: none;
  103.     }
  104.     .control input:checked ~ .control__indicator:after {
  105.         display: block;
  106.     }
  107.     .control--checkbox .control__indicator:after {
  108.         left: 8px;
  109.         top: 4px;
  110.         width: 3px;
  111.         height: 8px;
  112.         transform: rotate(45deg);
  113.         border-style: solid;
  114.         border-color: #848484;
  115.         border-width: 0 2px 2px 0;
  116.         position: absolute;
  117.     }
  118.     .control--radio .control__indicator:after {
  119.         left: 7px;
  120.         top: 7px;
  121.         height: 6px;
  122.         width: 6px;
  123.         border-radius: 50%;
  124.         background: #848484;
  125.         position: absolute;
  126.     }
  127.     input[type="number"]::-webkit-inner-spin-button {
  128.         -webkit-appearance: none;
  129.     }
  130.     input[type="number"] {
  131.         -moz-appearance: textfield;
  132.     }
  133.     input:focus {
  134.         outline: solid 1px #736F6F !important;
  135.     }
  136.     textarea:focus {
  137.         outline: solid 1px #736F6F !important;
  138.     }
  139.     select:focus {
  140.         outline: solid 1px #736F6F !important;
  141.     }
  142.     input:disabled,
  143.     input[disabled]{
  144.         opacity: 0.2;
  145.         cursor: default;
  146.     }
  147.     .loader,
  148.     .loader:after {
  149.         border-radius: 50%;
  150.         width: 1.8em;
  151.         height: 1.8em;
  152.     }
  153.     .loader {
  154.         margin-top: 5px;
  155.         margin-left: 10px;
  156.         font-size: 10px;
  157.         position: relative;
  158.         border: 0.5em solid #919798;
  159.         border-left-color: #3c9f51;
  160.         -webkit-transform: translateZ(0);
  161.         -ms-transform: translateZ(0);
  162.         transform: translateZ(0);
  163.         -webkit-animation: load8 1s infinite linear;
  164.         animation: load8 1s infinite linear;
  165.     }
  166.     @-webkit-keyframes load8 {
  167.         0% {
  168.             -webkit-transform: rotate(0deg);
  169.             transform: rotate(0deg);
  170.         }
  171.         100% {
  172.             -webkit-transform: rotate(360deg);
  173.             transform: rotate(360deg);
  174.         }
  175.     }
  176.     @keyframes load8 {
  177.         0% {
  178.             -webkit-transform: rotate(0deg);
  179.             transform: rotate(0deg);
  180.         }
  181.         100% {
  182.             -webkit-transform: rotate(360deg);
  183.             transform: rotate(360deg);
  184.         }
  185.     }
  186.     #sb_form {
  187.         background: #ffffff;
  188.         padding: 10px 20px 20px 20px;
  189.         border-radius: 0px;
  190.     }
  191.     input {
  192.         color: #848484 !important;
  193.     }
  194.     #div-submitInput {
  195.         display: flex;
  196.         flex-direction: row;
  197.         justify-content: flex-start;
  198.     }
  199.     #submitInput {
  200.         border-style: solid;
  201.         text-align: center;
  202.         color: #ffffff;
  203.         border-color: #ffffff;
  204.         border-width: 1px;
  205.         border-radius: 5px;
  206.         padding: 10px 25px;
  207.         text-decoration: none;
  208.         display: block;
  209.         font-family: &#x27;Arial&#x27;;
  210.         font-style: inherit;
  211.         font-weight: inherit;
  212.         font-size: 15px;
  213.         background-color:#0595d6;
  214.         cursor: pointer;
  216.     }
  217.     #form-footer-mandatory {
  218.         color: #393939;
  219.         font-family: Arial, Verdana, sans-serif;
  220.         font-size: 12px;
  221.         display: block;
  222.         margin-top: 20px;
  223.     }
  224. </style>
  226. <form id="sb_form"
  227.       onsubmit="process2(
  228. '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',
  229. '', 'https://services.sarbacane.com/core/v1/transactional/sendmessage/optin', 'Merci', 'Vos informations ont été ajoutées avec succès.',
  230. 'Vous allez recevoir un email', 'Vous devrez cliquer sur le lien de confirmation pour valider votre inscription', 'Erreur',
  231. 'Une erreur inattendue s%27est produite.', 'Le formulaire est en cours d%27édition, veuillez patienter quelques minutes avant d%27essayer à nouveau.', '',
  232. '', ''
  233. );
  234. return false;"
  235.       method="post">
  236.     <label id="form-header-title"></label>
  240.     <span style="display: flex;flex-direction: row;">
  241. <label id="label-EMAIL_ID">Email</label>
  242. <div id="form-mandatory">*</div>
  243. </span>
  244.     <input id="input-email" type="email" name="email" required="true" sb-form-input>
  245.     <div id="div-submitInput" align="left">
  246.         <button id="submitInput" type="submit" value="VALIDER" class="mobile-FW" ><span style="margin:0;">VALIDER</span>
  247.         </button>
  248.         <div class="loader" style="display:none"></div>
  249.     </div>
  250.     <label id="form-footer-mandatory">* Champs obligatoires</label>
  251. </form>