altinn-designsystem

<!DOCTYPE html> <html lang="no" class=""> <head> <title>DESIGNSYSTEM PROTOTYPE - Altinn</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" /> <meta name="format-detection" content="telephone=no"> <meta name="ROBOTS" content="NOINDEX, NOFOLLOW">  <link rel="apple-touch-icon" sizes="57x57" href="../../images/favicons/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="../../images/favicons/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="../../images/favicons/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="../../images/favicons/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="../../images/favicons/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="../../images/favicons/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="../../images/favicons/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="../../images/favicons/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="../../images/favicons/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="../../images/favicons/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="../../images/favicons/android-chrome-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="../../images/favicons/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="../../images/favicons/favicon-16x16.png" sizes="16x16"> <link rel="manifest" href="../../images/favicons/manifest.json"> <link rel="mask-icon" href="../../images/favicons/safari-pinned-tab.svg"> <meta name="apple-mobile-web-app-title" content="Altinn"> <meta name="application-name" content="Altinn"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileImage" content="/mstile-144x144.png"> <meta name="theme-color" content="#ffffff">  <script src="https://use.fortawesome.com/ed31cded.js"></script> <script src="https://use.fortawesome.com/df832575.js"></script>  <link rel="stylesheet" href="../../css/style.prototype.altinn.css" type="text/css" media="screen"> <link rel="stylesheet" href="../../css/style.dist.brreg.css" type="text/css" media="screen"> <link rel="stylesheet" href="../../css/style.dist.altinnett.css" type="text/css" media="screen"> <script type="text/javascript"> if (self === top) { var elm = document.getElementsByTagName("html")[0]; elm.style.display = "none"; } </script>   <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <link rel="stylesheet" href="../../styleguide/css/styleguide.min.css?1535451812396" media="all"> <link rel="stylesheet" href="../../styleguide/css/prism-typeahead.min.css?1535451812396" media="all" />  </head> <body class="" id="top"> <div class="a-sg-content-preloader"> <div class="a-sg-content-preloader-status"> </div> </div>  <div class="modal-content"> <div class="modal-header a-modal-header"> <div class="a-iconText a-iconText-background a-iconText-large"> <div class="a-iconText-icon"> <i class="ai ai-send a-icon" aria-hidden="true"></i> </div> <h1 class="a-iconText-text mb-0"> <span class="a-iconText-text-small"></span> <span class="a-iconText-text-large">Kontaktskjema</span> </h1> </div> </div> <div class="modal-body a-modal-body"> <p>For at vi skal kunne hjelpe deg så fort som mulig er det viktig at du oppgir tilstrekkelig med informasjon om problemstillingen din. Haster det, ta kontakt per telefon 75 00 60 00.</p> <h2 class="a-h3">Hva kan vi hjelpe deg med?</h2> <ul class="nav nav-tabs custom-radio a-radioButtons a-navTabsRadio" role="tablist"> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#home" role="tab"> <div class="custom-control custom-radio a-custom-radio"> <span class="custom-control-label">Starte og drive bedrift</span> </div> </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile" role="tab"> <div class="custom-control custom-radio a-custom-radio"> <span class="custom-control-label">Hvordan bruke Altinn</span> </div> </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages" role="tab"> <div class="custom-control custom-radio a-custom-radio"> <span class="custom-control-label">Innhold i skjema og meldinger</span> </div> </a> </li> </ul> <div class="tab-content"> <div class="tab-pane" id="home" role="tabpanel"> <h3 class="a-h2">Spør oss om å starte og drive bedrift</h3> <form data-toggle="validator" id="contactForm"> <div class="row"> <div class="col-12 col-sm-8">  <div class="form-group a-form-group mb-2"> <label class="a-form-label " for="text-input-name">Navn: </label> <div class="a-form-group-items input-group "> <input class="form-control " type="text" placeholder="f.eks Kari Nordmann" name="text-input-name" data-val="true" id="text-input-name" required data-val-required="Du har ikke oppgitt navn."> </div> <div class="a-message a-message-error" data-valmsg-for="text-input-name" data-valmsg-replace="true"></div> </div>   <div class="form-group a-form-group mb-2"> <label class="a-form-label " for="text-input-epost1">Epost: </label> <div class="a-form-group-items input-group "> <span class="input-group-prepend d-none d-md-block"> <i class="ai ai-closedmessage " ></i>  </span> <input class="form-control a-hasIcon " type="text" placeholder="din@epost.no" name="text-input-epost1" data-val="true" id="text-input-epost1" required data-val-required="Du har ikke oppgitt e-post." data-val-regex="Du har ikke skrevet eposten korrekt" data-val-regex-pattern="(('[^']+')|(([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+(.([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+)*))@((((([a-zA-Z0-9æøåÆØÅ]([a-zA-Z0-9-æøåÆØÅ]{0,61})[a-zA-Z0-9æøåÆØÅ].)|[a-zA-Z0-9æøåÆØÅ].){1,9})([a-zA-Z]{2,14}))|((d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})))"> </div> <div class="a-message a-message-error" data-valmsg-for="text-input-epost1" data-valmsg-replace="true"></div> </div>   <div class="form-group a-form-group mb-2"> <label class="a-form-label " for="text-input-epost2">Bekreft epost: </label> <div class="a-form-group-items input-group "> <span class="input-group-prepend d-none d-md-block"> <i class="ai ai-closedmessage " ></i>  </span> <input class="form-control a-js-validateThisAgainstPrev a-hasIcon " type="text" placeholder="din@epost.no" name="text-input-epost2" data-val="true" id="text-input-epost2"> </div> <div class="a-message a-message-error" data-valmsg-for="text-input-epost2" data-valmsg-replace="true"></div> </div>   <div class="form-group a-form-group mb-2"> <label class="a-form-label " for="text-input-tlf">Telefonnummer:</label> <div class="a-form-group-items input-group "> <span class="input-group-prepend d-none d-md-block"> <i class="ai ai-phone " ></i>  </span> <input class="form-control a-hasIcon " type="tel" placeholder="f.eks 97837462" name="text-input-tlf" data-val="true" id="text-input-tlf" data-val-regex="Telefonnummer kan kun inneholde siffer" data-val-regex-pattern="[0-9]+"> </div> <div class="a-message a-message-error" data-valmsg-for="text-input-tlf" data-valmsg-replace="true"></div> </div>   <div class="form-group a-form-group mb-2"> <label class="a-form-label " for="text-input-title">Emne: </label> <div class="a-form-group-items input-group "> <input class="form-control " type="text" placeholder="f.eks Innboks" name="text-input-title" data-val="true" id="text-input-title" required data-val-required="Du har ikke oppgitt emne."> </div> <div class="a-message a-message-error" data-valmsg-for="text-input-title" data-valmsg-replace="true"></div> </div>   <div class="form-group a-form-group mb-2"> <label for="text-input-question" class="a-form-label">Ditt spørsmål: </label> <textarea class="form-control a-textarea" rows="3" placeholder="Fyll inn tekst" required data-val-required="Du har ikke oppgitt spørsmålstekst." name="text-input-question" id="text-input-question"></textarea> <div class="a-message a-message-error" data-valmsg-for="text-input-question" data-valmsg-replace="false"> <span class="has-error">Du har ikke oppgitt spørsmålstekst.</span> </div> </div>   <button type="button" class="a-btn mb-2" id="a-js-contactForm-submit" data-toggle="altinn-modal" data-action="next" data-url="../../patterns/02-organismer-80-Modal-js-innhold-11-kontaktskjema-ferdig/02-organismer-80-Modal-js-innhold-11-kontaktskjema-ferdig.markup-only.html" data-target="#modal" data-is-success="true"> Send </button>  </div> </div> </form> </div> <div class="tab-pane" id="profile" role="tabpanel"> <h3 class="a-h2">Spør oss om hvordan bruke Altinn</h3> <form data-toggle="validator" id="contactForm2"> <div class="row"> <div class="col-12 col-sm-8">  <div class="form-group a-form-group mb-2"> <label class="a-form-label " for="text-input-name2">Navn: </label> <div class="a-form-group-items input-group "> <input class="form-control " type="text" placeholder="f.eks Kari Nordmann" name="text-input-name2" data-val="true" id="text-input-name2" required data-val-required="Du har ikke oppgitt navn."> </div> <div class="a-message a-message-error" data-valmsg-for="text-input-name2" data-valmsg-replace="true"></div> </div>   <div class="form-group a-form-group mb-2"> <label class="a-form-label " for="text-input-epost11">Epost: </label> <div class="a-form-group-items input-group "> <span class="input-group-prepend d-none d-md-block"> <i class="ai ai-closedmessage " ></i>  </span> <input class="form-control a-hasIcon " type="text" placeholder="din@epost.no" name="text-input-epost11" data-val="true" id="text-input-epost11" required data-val-required="Du har ikke oppgitt e-post." data-val-regex="Du har ikke skrevet eposten korrekt" data-val-regex-pattern="(('[^']+')|(([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+(.([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+)*))@((((([a-zA-Z0-9æøåÆØÅ]([a-zA-Z0-9-æøåÆØÅ]{0,61})[a-zA-Z0-9æøåÆØÅ].)|[a-zA-Z0-9æøåÆØÅ].){1,9})([a-zA-Z]{2,14}))|((d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})))"> </div> <div class="a-message a-message-error" data-valmsg-for="text-input-epost11" data-valmsg-replace="true"></div> </div>   <div class="form-group a-form-group mb-2"> <label class="a-form-label " for="text-input-epost22">Bekreft epost: </label> <div class="a-form-group-items input-group "> <span class="input-group-prepend d-none d-md-block"> <i class="ai ai-closedmessage " ></i>  </span> <input class="form-control a-js-validateThisAgainstPrev a-hasIcon " type="text" placeholder="din@epost.no" name="text-input-epost22" data-val="true" id="text-input-epost22"> </div> <div class="a-message a-message-error" data-valmsg-for="text-input-epost22" data-valmsg-replace="true"></div> </div>   <div class="form-group a-form-group mb-2"> <label class="a-form-label " for="text-input-tlf2">Telefonnummer:</label> <div class="a-form-group-items input-group "> <span class="input-group-prepend d-none d-md-block"> <i class="ai ai-phone " ></i>  </span> <input class="form-control a-hasIcon " type="tel" placeholder="f.eks 97837462" name="text-input-tlf2" data-val="true" id="text-input-tlf2" data-val-regex="Telefonnummer kan kun inneholde siffer" data-val-regex-pattern="[0-9]+"> </div> <div class="a-message a-message-error" data-valmsg-for="text-input-tlf2" data-valmsg-replace="true"></div> </div>   <div class="form-group a-form-group mb-2"> <label class="a-form-label " for="text-input-title2">Emne: </label> <div class="a-form-group-items input-group "> <input class="form-control " type="text" placeholder="f.eks Innboks" name="text-input-title2" data-val="true" id="text-input-title2" required data-val-required="Du har ikke oppgitt emne."> </div> <div class="a-message a-message-error" data-valmsg-for="text-input-title2" data-valmsg-replace="true"></div> </div>   <div class="form-group a-form-group mb-2"> <label for="text-input-question2" class="a-form-label">Ditt spørsmål: </label> <textarea class="form-control a-textarea" rows="3" placeholder="Fyll inn tekst" required data-val-required="Du har ikke fyllt ut tekstfeltet." name="text-input-question2" id="text-input-question2"></textarea> <div class="a-message a-message-error" data-valmsg-for="text-input-question2" data-valmsg-replace="false"> <span class="has-error">Du har ikke fyllt ut tekstfeltet.</span> </div> </div>   <div id="js-attachmentForm">  <div class="a-form-label a-fontBold">Vedlegg</div> <label class="a-btn a-btn-action a-iconRight a-custom-fileupload mb-0 mt-1 a-js-uploadAttachment"> <input class="a-js-certificateContainer sr-only" type="file" id="newCertificateInput"> Legg ved en fil  <i class="ai ai-upload " ></i>  </label>  <div style="display:none" class="a-js-upload-error"> <div class="a-message a-message-error">Feilmelding</div> </div>  <div id="alert" class="a-message a-message-edit a-message--arrow-off a-message--fullwidth a-message--no-dropshadow mb-0 mt-1 a-js-attachment-box ">  <div class="row a-delete-add-container"> <div class="col a-fontBold a-js-attachment-name"> dittbilde.jpg </div> <div class="col-md-auto col-sm-12"> <button type='button' class='a-btn a-btn-icon a-btn-delete'><i class='ai ai-sm ai-circle-exit a-danger ai-left' aria-hidden='true'></i><span class='a-btn-icon-text'>Slett vedlegg</span></button> </div> </div>  </div>  </div>   <button type="button" class="a-btn d-block mt-3 mb-2" id="a-js-contactForm-submit2" data-toggle="altinn-modal" data-action="next" data-url="../../patterns/02-organismer-80-Modal-js-innhold-11-kontaktskjema-ferdig/02-organismer-80-Modal-js-innhold-11-kontaktskjema-ferdig.markup-only.html" data-target="#modal" data-is-success="true"> Send </button>  </div> </div> </form> </div> <div class="tab-pane" id="messages" role="tabpanel"> <h3 class="a-h2">Spør oss om innhold i skjema og meldinger</h3> <p>Spørsmål om innholdet i skjema og meldinger må stilles til etaten/kommunen som eier skjemaet eller har sendt deg meldingen. Du finner kontaktinformasjon til de ulike skjemaeierne under <a href="/patterns/04-sider-infoportal-20-navigasjonssider-50-kolonnenavigasjon-v-skjemaoversikt\04-sider-infoportal-20-navigasjonssider-50-kolonnenavigasjon-v-skjemaoversikt.html">Alle skjema</a></p> </div> </div> </div> </div>   <script type="text/json" id="sg-pattern-data-footer" class="sg-pattern-data"> { "cssEnabled": false, "patternLineageExists": true, "patternLineages": [{ "lineagePattern": "atomer-tekst-input", "lineagePath": "../../patterns/00-atomer-01-forms-10-tekst-input\\00-atomer-01-forms-10-tekst-input.html", "lineageState": "complete altinn altinnett" }, { "lineagePattern": "atomer-tekstfelt", "lineagePath": "../../patterns/00-atomer-01-forms-40-tekstfelt\\00-atomer-01-forms-40-tekstfelt.html", "lineageState": "complete altinn altinnett" }, { "lineagePattern": "atomer-knapp", "lineagePath": "../../patterns/00-atomer-03-knapper-10-knapp\\00-atomer-03-knapper-10-knapp.html", "lineageState": "complete altinn altinnett" }, { "lineagePattern": "molekyler-last-opp-og-fjern", "lineagePath": "../../patterns/01-molekyler-05-forms-00-last-opp-og-fjern\\01-molekyler-05-forms-00-last-opp-og-fjern.html", "lineageState": "indesignreview altinn" }], "lineage": [{ "lineagePattern": "atomer-tekst-input", "lineagePath": "../../patterns/00-atomer-01-forms-10-tekst-input\\00-atomer-01-forms-10-tekst-input.html", "lineageState": "complete altinn altinnett" }, { "lineagePattern": "atomer-tekstfelt", "lineagePath": "../../patterns/00-atomer-01-forms-40-tekstfelt\\00-atomer-01-forms-40-tekstfelt.html", "lineageState": "complete altinn altinnett" }, { "lineagePattern": "atomer-knapp", "lineagePath": "../../patterns/00-atomer-03-knapper-10-knapp\\00-atomer-03-knapper-10-knapp.html", "lineageState": "complete altinn altinnett" }, { "lineagePattern": "molekyler-last-opp-og-fjern", "lineagePath": "../../patterns/01-molekyler-05-forms-00-last-opp-og-fjern\\01-molekyler-05-forms-00-last-opp-og-fjern.html", "lineageState": "indesignreview altinn" }], "patternLineageRExists": false, "patternLineagesR": [], "lineageR": [], "patternLineageEExists": true, "patternDesc": "<p>Eksempelside for modal med javascript</p>\n", "patternBreadcrumb": { "patternType": "organismer", "patternSubtype": "Modal-js-innhold" }, "patternExtension": "mustache", "patternName": "Kontaktskjema", "patternPartial": "organismer-kontaktskjema", "patternState": "indesignreview altinn", "patternEngineName": "mustache", "extraOutput": {} } </script> <script> /*! * scriptLoader - v0.1 * * Copyright (c) 2014 Dave Olsen, http://dmolsen.com * Licensed under the MIT license * */ var scriptLoader = { run: function(js, cb, target) { var s = document.getElementById(target + '-' + cb); for (var i = 0; i < js.length; i++) { var src = (typeof js[i] != 'string') ? js[i].src : js[i]; var c = document.createElement('script'); c.src = '../../' + src + '?' + cb; if (typeof js[i] != 'string') { if (js[i].dep !== undefined) { c.onload = function(dep, cb, target) { return function() { scriptLoader.run(dep, cb, target); } }(js[i].dep, cb, target); } } s.parentNode.insertBefore(c, s); } } } </script> <script id="pl-js-polyfill-insert-1535451812396"> (function() { if (self != top) { var cb = '1535451812396'; var js = []; if (typeof document !== 'undefined' && !('classList' in document.documentElement)) { js.push('styleguide/bower_components/classList.min.js'); } scriptLoader.run(js, cb, 'pl-js-polyfill-insert'); } })(); </script> <script id="pl-js-insert-1535451812396"> (function() { if (self != top) { var cb = '1535451812396'; var js = [{ 'src': 'styleguide/bower_components/jwerty.min.js', 'dep': ['styleguide/js/patternlab-pattern.min.js'] }]; scriptLoader.run(js, cb, 'pl-js-insert'); } })(); </script>  <script src="../../js/jquery.min.js"></script>  <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&skin=sunburst"></script>  <script src="../../js/altinnPrototyping.vendor.js"></script>  <script src="./../../js/altinnPrototyping.js"></script>  <script type="text/javascript">  $(document).ready(function() { if (self === top) { var $body = 'body'; if ($('.sg-top').length) { var $panelBrsys = '.welcome-panel-brsys'; var $panelaltinn = '.welcome-panel-altinn'; switch (window.localStorage.getItem('selected_project')) { case 'altinn': $('link[href*="style.dist.altinnett.css"]').remove(); $('link[href*="style.dist.brreg.css"]').remove(); $($panelBrsys).hide(); $($panelaltinn).show(); break; case 'altinnett': $('link[href*="style.prototype.altinn.css"]').remove(); $('link[href*="style.dist.brreg.css"]').remove(); $($panelBrsys).hide(); $($panelaltinn).show(); break; case 'brsys': $('link[href*="style.prototype.altinn.css"]').remove(); $('link[href*="style.dist.altinnett.css"]').remove(); $($panelaltinn).hide(); $($panelBrsys).show(); break; default: $('link[href*="style.prototype.altinn.css"]').remove(); $('link[href*="style.dist.altinnett.css"]').remove(); $('link[href*="style.dist.brreg.css"]').attr({ href: '../../css/style.prototype.altinn.css?1535451812396', media: 'all' }); break; } } else { $('link[href*="style.prototype.altinn.css"]').remove(); $('link[href*="style.dist.altinnett.css"]').remove(); $('link[href*="style.dist.brreg.css"]').attr({ href: '../../css/style.prototype.altinn.css?1535451812396', media: 'all' }); } } }); $(window).on('load', function() { if (self === top) { var elm = document.getElementsByTagName("html")[0]; elm.style.display = "block"; } }); </script> </body> </html>