1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 6 7 <title>Examples</title> 8 9 10 11 12 <meta name="robots" content="index,follow"> 13 14 15 16 17 18 19 20 21 <title></title> 22 <meta name="description" content=""> 23 <meta name="title" content=""> 24 <meta name="author" content="SGWidget.com"> 25 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 26 <meta name="generator" content="OctoberCMS"> 27 28 <meta name="google-site-verification" content="p3-RKVwfZBI-IiMXy0i006iMARh_nPXrsum1d1bH2XA" /> 29 <link rel="icon" type="image/png" href="https://sgwidget.com/themes/demo/assets/images/favicon.png"> 30 31 32 <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 72 bytes, lines 32-33
32 33 <script async src="https://www.googletagmanager.com/gtag/js?id=
33UA-72180435-8
vendor: 20 bytes, lines 33-34
33"></script> 34
34<script> 35
vendor: 158 bytes, lines 35-39
35window.dataLayer = window.dataLayer || []; 36 function gtag(){dataLayer.push(arguments);} 37 gtag('js', new Date()); 38 39 gtag('config', '
39UA-72180435-8
vendor: 12 bytes, lines 39-40
39'); 40
40</script>
40 41 42
42<script defer data-domain="sgwidget.com" src="https://plausible.io/js/script.js"></script>
42 43
43<script src="https://cdn.speetals.com/rumagent/sp-rum-v2.1.js?apiKey=6t44U0K8WvPKh21nyBRswcakw4E8ZRkZ&sampling=100"></script>
43 44
44<script defer>function generatePageviewID() { const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; let id = ""; for (let i = 0; i < 20; i++) { id += chars.charAt(Math.floor(Math.random() * chars.length)); } return id; } const pageviewID = generatePageviewID(); function sendToAnalytics(metric) { const data = { ...metric, page_path: window.location.pathname, user_agent: navigator.userAgent, pageview_id: pageviewID, site_id: 429 }; const body = JSON.stringify(data); (navigator.sendBeacon && navigator.sendBeacon("https://rum-collector.leaderint.workers.dev", body)) || fetch("https://rum-collector.leaderint.workers.dev", { body, method: "POST", keepalive: true }); } (function () { var script = document.createElement("script"); script.src = "https://web-vitals-script.leaderint.workers.dev"; script.onload = function () { webVitals.onCLS(sendToAnalytics); webVitals.onINP(sendToAnalytics); webVitals.onLCP(sendToAnalytics); webVitals.onTTFB(sendToAnalytics); }; document.head.appendChild(script); })(); </script>
44 45 46 <link rel="stylesheet" href="https://sgwidget.com/themes/demo/assets/css/globals.css" /> 47 <link rel="stylesheet" href="https://sgwidget.com/themes/demo/assets/css/styleguide.css" /> 48 <link rel="stylesheet" href="https://sgwidget.com/themes/demo/assets/css/style-v2.css?v=3" /> 49 <link rel="stylesheet" href="https://sgwidget.com/themes/demo/assets/css/responsive.css" /> 50 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> 51 <style> 52 .header li { 53 padding-bottom: 0 !important; 54 55 } 56 .header .nav-link:hover { 57 background-color: unset !important; 58 } 59 60 .header { 61 margin-top: 0 !important; 62 padding: 0.5em 0; 63 } 64 65 .header-logo { 66 position: relative; 67 left: 0; 68 } 69 </style> 70 </head> 71 <body> 72 <div class="sgwidget"> 73 <div class="hero-section"> 74 <div class="header"> 75 <div class="header-logo"> 76 <a href="https://sgwidget.com/"><img class="logo-header" src="https://sgwidget.com/themes/demo/assets/images/sg-widget-logo-transparent-helvetica-150.png"/></a> 77 </div> 78 <div class="navbar"> 79 <div class="menu-icon" onclick="toggleMenu()"> 80 <div class="bar"></div> 81 <div class="bar"></div> 82 <div class="bar"></div> 83 </div> 84 <ul class="nav" id="nav-links"> 85 <li class="nav-item"> 86 <a class="nav-link" href="/#features">Features</a> 87 </li> 88 <li class="nav-item"> 89 <a class="nav-link" href="/#how-it-works">How it works</a> 90 </li> 91 <li class="nav-item"> 92 <a class="nav-link" href="/#pricing">Pricing</a> 93 </li> 94 <li class="nav-item"> 95 <a class="nav-link" href="/#reviews">Reviews</a> 96 </li> 97 <li class="nav-item"> 98 <a class="nav-link" href="https://sgwidget.com/examples">Examples</a> 99 </li> 100 <li class="nav-item"> 101 <a class="nav-link" href="https://sgwidget.com/docs">Docs</a> 102 </li> 103 <li class="nav-item"> 104 <a class="nav-link" href="https://sgwidget.com/blog">Blog</a> 105 </li> 106 </ul> 107 </div> 108 <div class="header-cta"> 109 <ul class="cta-buttons"> 110 <li class="cta-1"> 111 <a class="nav-link" href="https://app.sgwidget.com/login">Login</a> 112 </li> 113 <li class="cta-2"> 114 <a class="nav-link" href="https://app.sgwidget.com/register">Start Trial</a> 115 </li> 116 </ul> 117 </div> 118 </div><!-- end header --> 119 </div><!-- end hero-section --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> 120 121<style> 122 body { 123 font-family: Manrope; 124 } 125 h1 { 126 font-size: 3em; 127 } 128 .container { 129 padding-top: 2em; 130 padding-bottom:1em; 131 } 132 133 ul li { 134 padding-bottom: 2em; 135 } 136 137 .nav>li>a:hover { 138 background: none !important; 139 } 140</style> 141 142<section class="page" id="examples"> 143 <div class="heading-about"> 144 <div class="container"> 145 <div class="row"> 146 147 <div class="col-lg-8 col-lg-offset-2"> 148 <div class="section-heading text-center"> 149 <h1>Examples</h1> 150 <p>Working examples of the Sendgrid signup forms you can create with SG Widget</p> 151 152 153 </div> 154 </div> 155 </div> 156 </div> 157 </div> 158 159
159<script type="text/javascript" src="//app.sgwidget.com/js/sg-widget-v2.js"></script>
159 160 161 <div class="container examples"> 162 163 <div class="row"> 164 165 <div class="col-md-12"> 166 <h3>Basic</h3> 167 <p>Our simplest form that only asks for an email address.</p> 168 <div class="sendgrid-subscription-widget widget-963" data-emailerror="Please enter a valid email address" data-nameerror="Please enter your name" data-checkboxerror="Please tick the box to accept our conditions"><form class="sg-widget" data-token="3a6ae8ff011d271b3067cf4b20f81da6" onsubmit="return false;"><div class="sg-response"></div><input class="sg_email" type="email" name="sg_email" placeholder="[email protected]" required="required"> <input type="submit" class="sg-submit-btn" id="widget-963" value="Subscribe"></form></div> 169 </div> 170 171 </div> 172 173 <div class="row"> 174 175 <div class="col-md-12"> 176 177 <h3>Name fields</h3> 178 <p>Ask for first name and surnames so you can personalize your emails better.</p> 179 <div class="sendgrid-subscription-widget widget-964" data-emailerror="Please enter a valid email address" data-nameerror="Please enter your name" data-checkboxerror="Please tick the box to accept our conditions"><form class="sg-widget" data-token="1511a9e2bbad6764eb7f84c7c810bea5" onsubmit="return false;"><div class="sg-response"></div><input class="sg_signup_first_name" type="text" name="sg_signup_first_name" placeholder="First Name" required="required"><input class="sg_signup_last_name" type="text" name="sg_signup_last_name" placeholder="Last Name" required="required"><input class="sg_email" type="email" name="sg_email" placeholder="[email protected]" required="required"> <input type="submit" class="sg-submit-btn" id="widget-964" value="Subscribe"></form></div> 180 </div> 181 182 </div> 183 184 <div class="row"> 185 186 <div class="col-md-12"> 187 188 <h3>Consent Checkbox</h3> 189 <p>Include a consent checkbox that must be ticked before users can submit the form. Useful for GDOR compliance.</p> 190 <div class="sendgrid-subscription-widget widget-965" data-emailerror="Please enter a valid email address" data-nameerror="Please enter your name" data-checkboxerror="Please tick the box to accept our conditions"><form class="sg-widget" data-token="3e129b12ec98c8d27acf6416db140c17" onsubmit="return false;"><div class="sg-response"></div><input class="sg_signup_first_name" type="text" name="sg_signup_first_name" placeholder="First Name" required="required"><input class="sg_signup_last_name" type="text" name="sg_signup_last_name" placeholder="Last Name" required="required"><input class="sg_email" type="email" name="sg_email" placeholder="[email protected]" required="required"> <input type="submit" class="sg-submit-btn" id="widget-965" value="Subscribe"><div class="sg-consent-text"><label><input type="checkbox" class="sg_consent_checkbox" name="sg_consent_checkbox"> I understand and consent to the following</label> <a target="_blank" href="https://sgwidget.com/privacy">Privacy Notice</a></div></form></div> 191 </div> 192 193 </div> 194 195 <div class="row"> 196 197 <div class="col-md-12"> 198 199 <h3>Custom Fields</h3> 200 <p>Add custom fields of any type to collect much more information about your users and help you understand them better for hyper targeted marketing campaigns.</p> 201 <div class="sendgrid-subscription-widget widget-966" data-emailerror="Please enter a valid email address" data-nameerror="Please enter your name" data-checkboxerror="Please tick the box to accept our conditions" data-customfieldserror=""><form class="sg-widget" data-token="7fb6589375a13a1f1a7b84f0292af58e" onsubmit="return false;"><div class="sg-response"></div><input class="sg_signup_first_name" type="text" name="sg_signup_first_name" placeholder="First Name" required="required"><input class="sg_signup_last_name" type="text" name="sg_signup_last_name" placeholder="Last Name" required="required"><input class="sg_email" type="email" name="sg_email" placeholder="[email protected]" required="required"> <input type="text" name="company" id="sg_custom_0" class="sg_custom" placeholder="How you found us" required="required"><input type="text" name="company" id="sg_custom_1" class="sg_custom" placeholder="Company" required="required"> <input type="submit" class="sg-submit-btn" id="widget-966" value="Subscribe"><div class="sg-consent-text"><label><input type="checkbox" class="sg_consent_checkbox" name="sg_consent_checkbox"> I understand and consent to the following</label> <a target="_blank" href="https://sgwidget.com/privacy">Privacy Notice</a></div></form></div> 202 </div> 203 204 </div> 205 206 <div class="row"> 207 208 <div class="col-md-12"> 209 210 <h3>Multilingual</h3> 211 <p>Not everyone speaks english. All messages and emails can be customized to whatever language you want.</p> 212 <div class="sendgrid-subscription-widget widget-967" data-emailerror="Por favor, introduce una dirección de correo electrónico válida" data-nameerror="Por favor, escriba su nombre" data-checkboxerror="Please tick the box to accept our conditions"><form class="sg-widget" data-token="974bc69ef212ad8301129f2db7c61987" onsubmit="return false;"><div class="sg-response"></div><input class="sg_signup_first_name" type="text" name="sg_signup_first_name" placeholder="Nombre" required="required"><input class="sg_signup_last_name" type="text" name="sg_signup_last_name" placeholder="Apellidos" required="required"><input class="sg_email" type="email" name="sg_email" placeholder="[email protected]" required="required"> <input type="submit" class="sg-submit-btn" id="widget-967" value="Suscribe"></form></div> 213 </div> 214 215 </div> 216 217 <!--<div class="row"> 218 <div class="col-md-1"></div> 219 <div class="col-md-10"> 220 221 <h3>Styled</h3> 222 <div class="sendgrid-subscription-widget widget-968" data-emailerror="Please enter a valid email address" data-nameerror="Please enter your name" data-checkboxerror="Please tick the box to accept our conditions"><form class="sg-widget" data-token="2573c2750ce4b466e1e9f95344ba58ff" onsubmit="return false;"><div class="sg-response"></div><input class="sg_signup_first_name" type="text" name="sg_signup_first_name" placeholder="First Name" required="required"><input class="sg_signup_last_name" type="text" name="sg_signup_last_name" placeholder="Last Name" required="required"><input class="sg_email" type="email" name="sg_email" placeholder="[email protected]" required="required"> <input type="submit" class="sg-submit-btn" id="widget-968" value="Subscribe"></form></div> 223 </div> 224 <div class="col-md-1"></div> 225 </div>--> 226 227 228 229 230 231 232 233 </div> 234 <br/> 235</section> <div class="footer" id="footer"> 236 <div class="container"> 237 <div class="footer-left"> 238 <img src="https://sgwidget.com/themes/demo/assets/images/logo.png"/> 239 <p>SG Widget is a product by Leader Internet. We are a Software Development Company based in Ireland who are an official Sendgrid Partner and members of the Sendgrid Accelerte Program.</p> 240 <div class="footer-button"> 241 <a href="#">Subscribe to Newsletter</a> 242 </div> 243 </div> 244 <div class="footer-right"> 245 <h5>Support</h5> 246 <p>
246If you have any questions or feature requests send an <br/>email to:<a href="/cdn-cgi/l/email-protection#eb82858d84ab988c9c828f8c8e9fc5888486"><span class="__cf_email__" data-cfemail="472e292128073420302e232022336924282a">[email protected]</span></a></p> 247 <h5>Contact Info</h5> 248 <p>Leader Internet Limited<br/>The Black Church, Saint Mary's Place, Dublin 7, Ireland<br/>+353 1 2549083</p> 249 </div> 250 </div> 251 </div><!-- end footer --> 252 <div class="footer-bottom"> 253 <div class="container"> 254 <p>©2024 All Right Reserved</p> 255 <div class="footer-links"> 256 257 <a href="https://sgwidget.com/privacy">Privacy</a>| 258 <a href="https://sgwidget.com/terms">Terms</a> 259 </div> 260 </div> 261 </div>
vendor: 112 bytes, lines 261-262
261 262 <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
262<script type="text/javascript" defer src="//app.sgwidget.com/js/sg-widget-v2.js"></script>
262 </div> 263
263<script src="https://sgwidget.com/themes/demo/assets/javascript/script.js"></script>
263 264
264<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"5cc9ea3f1f304b9c867a8ab88e30ef4f","r":1,"spa":2}' crossorigin="anonymous"></script>
vendor: 1 bytes, line 264
264
265<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a44eff8d2d3aae82',t:'MTc5MTA2MjUwNA=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
265</body> 266</body>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.