Questo è un segnaposto del codice personalizzato. Passa ad Anteprima o pubblica la pagina per vedere come funziona il codice.
Fai doppio clic per modificare
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- the 2 lines below is needed -->
<link href="fcf-assets/css/fcf.default.css" rel="stylesheet">
<link href="fcf-assets/css/fcf.default-custom.css" rel="stylesheet">
<title>Contact Form</title>
</head>
<script>
new JustValidate('.fcf-form-class', {
rules: {
"Nome": {
"required": true,
"maxLength": 100
},
"Email": {
"required": true,
"maxLength": 100,
"email": true
},
"Cognome": {
"required": true,
"maxLength": 100
},
"Azienda": {
"required": true,
"maxLength": 100
},
"Funzione_Aziendale": {
"required": true,
"maxLength": 100
},
"Phone": {
"required": true,
"maxLength": 30
},
"Consenso1": {
"required": true,
"maxLength": 3000
}
"Consenso2": {
"required": true,
"maxLength": 3000
}
},
colorWrong: '#dc3545',
focusWrongField: true,
submitHandler: function (cform, values, ajax) {
var button_value = getButtonValue('fcf-button');
disableButton('fcf-button');
ajax({
url: cform.getAttribute('action'),
method: 'POST',
data: values,
async: true,
callback: function (response) {
var done = false;
if (response.indexOf('Fail:') == 0) {
// configration problem
showFailMessage(response);
enableButon('fcf-button', button_value);
done = true;
}
if (response.indexOf('Error:') == 0) {
// validation problem
showErrorMessage(response);
enableButon('fcf-button', button_value);
done = true;
}
if (response.indexOf('Success') == 0) {
showSuccessMessage(response);
done = true;
}
if (response.indexOf('URL:') == 0) {
doRedirect(response);
done = true;
}
if (response.indexOf('Debug:') == 0) {
showDebugMessage(response);
enableButon('fcf-button', button_value);
done = true;
}
if (done == false) {
showErrorMessage('Error:Sorry, an unexpected error occurred. Please try later.');
enableButon('fcf-button', button_value);
}
}
});
},
});
function getButtonValue(id) {
return document.getElementById(id).innerText;
}
function disableButton(id) {
document.getElementById(id).innerText = 'Please wait...';
document.getElementById(id).disabled = true;
}
function enableButon(id, val) {
document.getElementById(id).innerText = val;
document.getElementById(id).disabled = false;
}
function showFailMessage(message) {
var display = '<strong>Unexpected errors. </strong>(form has been misconfigured)<br>';
display += message.substring(5);
document.getElementById('fcf-status').innerHTML = display;
}
function showErrorMessage(message) {
var display = '<strong>Validation problem:</strong><br>';
display += message.substring(6);
document.getElementById('fcf-status').innerHTML = display;
}
function showDebugMessage(message) {
var display = '<strong>Debug details.</strong><br>(Please remember to switch off DEBUG mode when done!)<br>';
display += message.substring(6);
document.getElementById('fcf-status').innerHTML = display;
}
function showSuccessMessage(message) {
var message = '<br><br>' + message.substring(8);
var content = document.getElementById('fcf-thank-you').innerHTML;
document.getElementById('fcf-thank-you').innerHTML = content + message;
document.getElementById('fcf-status').innerHTML = '';
document.getElementById('fcf-form').style.display = 'none';
document.getElementById('fcf-thank-you').style.display = 'block';
}
function doRedirect(response) {
var url = response.substring(4);
window.location.href = url;
}
</script>
<style>
.fcf-form-wrap {
max-width: 500px;
padding: 30px;
border-radius: 4px;
background-color: #ffffff;
}
#fcf-form {
background-color: #ffffff;
color: #363636;
}
#fcf-thank-you {
color: #363636;
}
.label {
color: #363636;
}
strong {
color: #363636;
}
.input, .textarea, .select select {
background-color: #ffffff;
border-color: #dbdbdb;
color: #363636;
}
.input:focus, .textarea:focus, .select select:focus, .input:active, .textarea:active, .select select:active, .input:hover, .textarea:hover, .select select:hover {
border-color: #dbdbdb;
box-shadow: none;
}
.file-label:hover .file-cta {
background-color: #808080;
color: #ffffff;
}
.file-label:hover .file-name {
border-color: #dbdbdb;
}
.file-label:active .file-cta {
background-color: #808080;
color: #ffffff;
}
.file-label:active .file-name {
border-color: #cfcfcf;
}
.file-cta {
background-color: #363636;
border-color: #dbdbdb;
color: #ffffff;
}
.file-name {
background-color: #ffffff;
border-color: #dbdbdb;
}
.button.is-link {
background-color: #58a7dc;
color: #ffffff;
}
.button.is-link:hover {
background-color: #808080;
color: #ffffff;
}
.button.is-link[disabled] {
background-color: #808080;
border-color: transparent;
box-shadow: none;
}
.fcf-attribution {
color: #363636;
text-align: right;
}
.fcf-attribution-link {
color: #363636;
}
@keyframes spinAround {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.button,.file {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.button,.input,.textarea,.select select,.file-cta,.file-name {
-moz-appearance: none;
-webkit-appearance: none;
align-items: center;
border: 1px solid transparent;
border-radius: 4px;
box-shadow: none;
display: inline-flex;
font-size: 1rem;
height: 2.5em;
justify-content: flex-start;
line-height: 1.5;
padding-bottom: calc(0.5em - 1px);
padding-left: calc(0.75em - 1px);
padding-right: calc(0.75em - 1px);
padding-top: calc(0.5em - 1px);
position: relative;
vertical-align: top;
}
.button:focus,.input:focus,.textarea:focus,.select select:focus,.file-cta:focus,.file-name:focus,.button:active,.input:active,.textarea:active,.select select:active,.file-cta:active,.file-name:active {
outline: none;
}
.button[disabled],.input[disabled],.textarea[disabled],.select select[disabled],.file-cta[disabled],.file-name[disabled] {
cursor: not-allowed;
}
html {
background-color: white;
font-size: 16px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
min-width: 300px;
overflow-x: hidden;
overflow-y: scroll;
text-rendering: optimizeLegibility;
text-size-adjust: 100%;
}
body,button,input,select,textarea {
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
body {
color: #4a4a4a;
font-size: 1em;
font-weight: 400;
line-height: 1.5;
}
input[type="checkbox"],input[type="radio"] {
vertical-align: baseline;
}
span {
font-style: inherit;
font-weight: inherit;
}
strong {
color: #363636;
font-weight: 700;
}
legend,textarea {
margin: 0;
padding: 0;
}
button,input,select,textarea {
margin: 0;
}
html {
box-sizing: border-box;
}
*,*::before,*::after {
box-sizing: inherit;
}
.button {
background-color: white;
border-color: #dbdbdb;
border-width: 1px;
color: #363636;
cursor: pointer;
justify-content: center;
padding-bottom: calc(0.5em - 1px);
padding-left: 1em;
padding-right: 1em;
padding-top: calc(0.5em - 1px);
text-align: center;
white-space: nowrap;
}
.button strong {
color: inherit;
}
.button:hover {
border-color: #b5b5b5;
color: #363636;
}
.button:focus {
border-color: #3273dc;
color: #363636;
}
.button:focus:not(:active) {
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
}
.button:active {
border-color: #4a4a4a;
color: #363636;
}
.button.is-text {
background-color: transparent;
border-color: transparent;
color: #4a4a4a;
text-decoration: underline;
}
.button.is-text:hover,.button.is-text:focus {
background-color: whitesmoke;
color: #363636;
}
.button.is-text:active {
background-color: #e8e8e8;
color: #363636;
}
.button.is-text[disabled] {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
.button.is-link {
background-color: #58a7dc;
border-color: transparent;
color: #fff;
}
.button.is-link:hover {
background-color: #276cda;
border-color: transparent;
color: #fff;
}
.button.is-link:focus {
border-color: transparent;
color: #fff;
}
.button.is-link:focus:not(:active) {
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
}
.button.is-link:active {
background-color: #2366d1;
border-color: transparent;
color: #fff;
}
.button.is-link[disabled] {
background-color: #3273dc;
border-color: transparent;
box-shadow: none;
}
.button.is-normal {
font-size: 1rem;
}
.button.is-medium {
font-size: 1.25rem;
}
.button[disabled] {
background-color: white;
border-color: #dbdbdb;
box-shadow: none;
opacity: 0.5;
}
.button.is-fullwidth {
display: flex;
width: 100%;
}
.buttons {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.buttons .button {
margin-bottom: 0.5rem;
}
.buttons .button:not(:last-child):not(.is-fullwidth) {
margin-right: 0.5rem;
}
.buttons:last-child {
margin-bottom: -0.5rem;
}
.buttons:not(:last-child) {
margin-bottom: 1rem;
}
.input,.textarea,.select select {
background-color: white;
border-color: #dbdbdb;
border-radius: 4px;
color: #363636;
}
.input::-moz-placeholder,.textarea::-moz-placeholder,.select select::-moz-placeholder {
color: rgba(54, 54, 54, 0.3);
}
.input::-webkit-input-placeholder,.textarea::-webkit-input-placeholder,.select select::-webkit-input-placeholder {
color: rgba(54, 54, 54, 0.3);
}
.input:-moz-placeholder,.textarea:-moz-placeholder,.select select:-moz-placeholder {
color: rgba(54, 54, 54, 0.3);
}
.input:-ms-input-placeholder,.textarea:-ms-input-placeholder,.select select:-ms-input-placeholder {
color: rgba(54, 54, 54, 0.3);
}
.input:hover,.textarea:hover,.select select:hover {
border-color: #b5b5b5;
}
.input:focus,.textarea:focus,.select select:focus,.input:active,.textarea:active,.select select:active {
border-color: #3273dc;
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
}
.input[disabled],.textarea[disabled],.select select[disabled] {
background-color: whitesmoke;
border-color: whitesmoke;
box-shadow: none;
color: #7a7a7a;
}
.input[disabled]::-moz-placeholder,.textarea[disabled]::-moz-placeholder,.select select[disabled]::-moz-placeholder {
color: rgba(122, 122, 122, 0.3);
}
.input[disabled]::-webkit-input-placeholder,.textarea[disabled]::-webkit-input-placeholder,.select select[disabled]::-webkit-input-placeholder {
color: rgba(122, 122, 122, 0.3);
}
.input[disabled]:-moz-placeholder,.textarea[disabled]:-moz-placeholder,.select select[disabled]:-moz-placeholder {
color: rgba(122, 122, 122, 0.3);
}
.input[disabled]:-ms-input-placeholder,.textarea[disabled]:-ms-input-placeholder,.select select[disabled]:-ms-input-placeholder {
color: rgba(122, 122, 122, 0.3);
}
.input,.textarea {
box-shadow: inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05);
max-width: 100%;
width: 100%;
}
.input[readonly],.textarea[readonly] {
box-shadow: none;
}
.is-link.input,.is-link.textarea {
border-color: #3273dc;
}
.is-link.input:focus,.is-link.textarea:focus,.is-link.input:active,.is-link.textarea:active {
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
}
.is-medium.input,.is-medium.textarea {
font-size: 1.25rem;
}
.is-fullwidth.input,.is-fullwidth.textarea {
display: block;
width: 100%;
}
.textarea {
display: block;
max-width: 100%;
min-width: 100%;
padding: calc(0.75em - 1px);
resize: vertical;
}
.textarea:not([rows]) {
max-height: 40em;
min-height: 8em;
}
.textarea[rows] {
height: initial;
}
.checkbox,.radio {
cursor: pointer;
display: inline-block;
line-height: 1.25;
position: relative;
}
.checkbox input,.radio input {
cursor: pointer;
}
.checkbox:hover,.radio:hover {
color: #363636;
}
.checkbox[disabled],.radio[disabled] {
color: #7a7a7a;
cursor: not-allowed;
}
.radio + .radio {
margin-left: 0.5em;
}
.select {
display: inline-block;
max-width: 100%;
position: relative;
vertical-align: top;
}
.select:not(.is-multiple) {
height: 2.5em;
}
.select:not(.is-multiple):not(.is-loading)::after {
border: 3px solid transparent;
border-radius: 2px;
border-right: 0;
border-top: 0;
content: " ";
display: block;
height: 0.625em;
margin-top: -0.4375em;
pointer-events: none;
position: absolute;
top: 50%;
transform: rotate(-45deg);
transform-origin: center;
width: 0.625em;
}
.select:not(.is-multiple):not(.is-loading)::after {
border-color: #3273dc;
right: 1.125em;
z-index: 4;
}
.select select {
cursor: pointer;
display: block;
font-size: 1em;
max-width: 100%;
outline: none;
}
.select select::-ms-expand {
display: none;
}
.select select[disabled]:hover {
border-color: whitesmoke;
}
.select select:not([multiple]) {
padding-right: 2.5em;
}
.select select[multiple] {
height: auto;
padding: 0;
}
.select select[multiple] option {
padding: 0.5em 1em;
}
.select.is-link:not(:hover)::after {
border-color: #3273dc;
}
.select.is-link select {
border-color: #3273dc;
}
.select.is-link select:hover {
border-color: #2366d1;
}
.select.is-link select:focus,.select.is-link select:active {
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
}
.select.is-medium {
font-size: 1.25rem;
}
.select.is-fullwidth {
width: 100%;
}
.select.is-fullwidth select {
width: 100%;
}
.file {
align-items: stretch;
display: flex;
justify-content: flex-start;
position: relative;
}
.file.is-link .file-cta {
background-color: #3273dc;
border-color: transparent;
color: #fff;
}
.file.is-link:hover .file-cta {
background-color: #276cda;
border-color: transparent;
color: #fff;
}
.file.is-link:focus .file-cta {
border-color: transparent;
box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25);
color: #fff;
}
.file.is-link:active .file-cta {
background-color: #2366d1;
border-color: transparent;
color: #fff;
}
.file.is-medium {
font-size: 1.25rem;
}
.file.has-name .file-cta {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.file.has-name .file-name {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.file.is-fullwidth .file-label {
width: 100%;
}
.file.is-fullwidth .file-name {
flex-grow: 1;
max-width: none;
}
.file-label {
align-items: stretch;
display: flex;
cursor: pointer;
justify-content: flex-start;
overflow: hidden;
position: relative;
}
.file-label:hover .file-cta {
background-color: #eeeeee;
color: #363636;
}
.file-label:hover .file-name {
border-color: #d5d5d5;
}
.file-label:active .file-cta {
background-color: #e8e8e8;
color: #363636;
}
.file-label:active .file-name {
border-color: #cfcfcf;
}
.file-input {
height: 100%;
left: 0;
opacity: 0;
outline: none;
position: absolute;
top: 0;
width: 100%;
}
.file-cta,.file-name {
border-color: #dbdbdb;
border-radius: 4px;
font-size: 1em;
padding-left: 1em;
padding-right: 1em;
white-space: nowrap;
}
.file-cta {
background-color: whitesmoke;
color: #4a4a4a;
}
.file-name {
border-color: #dbdbdb;
border-style: solid;
border-width: 1px 1px 1px 0;
display: block;
max-width: 16em;
overflow: hidden;
text-align: inherit;
text-overflow: ellipsis;
}
.label {
color: #363636;
display: block;
font-size: 1rem;
font-weight: 700;
}
.label:not(:last-child) {
margin-bottom: 0.5em;
}
.label.is-medium {
font-size: 1.25rem;
}
.field:not(:last-child) {
margin-bottom: 0.75rem;
}
.field-label .label {
font-size: inherit;
}
@media screen and (max-width: 768px) {
.field-label {
margin-bottom: 0.5rem;
}
}
@media screen and (min-width: 769px), print {
.field-label {
flex-basis: 0;
flex-grow: 1;
flex-shrink: 0;
margin-right: 1.5rem;
text-align: right;
}
.field-label.is-normal {
padding-top: 0.375em;
}
.field-label.is-medium {
font-size: 1.25rem;
padding-top: 0.375em;
}
}
.field-body .field .field {
margin-bottom: 0;
}
@media screen and (min-width: 769px), print {
.field-body {
display: flex;
flex-basis: 0;
flex-grow: 5;
flex-shrink: 1;
}
.field-body .field {
margin-bottom: 0;
}
.field-body > .field {
flex-shrink: 1;
}
.field-body > .field:not(:last-child) {
margin-right: 0.75rem;
}
}
.control {
box-sizing: border-box;
clear: both;
font-size: 1rem;
position: relative;
text-align: inherit;
}
.has-text-link {
color: #3273dc !important;
}
.my-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.my-1 {
margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important;
}
.my-2 {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
.my-3 {
margin-top: 0.75rem !important;
margin-bottom: 0.75rem !important;
}
.my-4 {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
.my-5 {
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important;
}
.my-6 {
margin-top: 3rem !important;
margin-bottom: 3rem !important;
}
.px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.px-1 {
padding-left: 0.25rem !important;
padding-right: 0.25rem !important;
}
.px-2 {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
.px-3 {
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}
.px-4 {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.px-5 {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
.px-6 {
padding-left: 3rem !important;
padding-right: 3rem !important;
}
.has-text-weight-normal {
font-weight: 400 !important;
}
.has-text-weight-medium {
font-weight: 500 !important;
}
.is-hidden {
display: none !important;
}
@media screen and (max-width: 1023px) {
.is-hidden-touch {
display: none !important;
}
}
.js-validate-error-label {
color: crimson;
font-size: 0.9em;
}
.js-validate-error-field {
border: 1px solid #dc3545 !important;
}
.js-validate-error-field:focus {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
.fcf-attribution {
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 14px;
color: #363636;
padding-top: 15px;
padding-bottom: 10px;
text-align: right;
}
.fcf-attribution-link {
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 14px;
color: #363636;
text-decoration: none;
}
</style>
<body>
<!-- the lines below are needed -->
<div class="fcf-form-wrap">
<div id="fcf-form">
<form class="fcf-form-class" method="post" action="http://go.gp-start.it/l/863622/2020-12-02/26slmd" method="post">
<div class="field">
<label for="Nome" class="label has-text-weight-normal">Nome *</label>
<div class="control">
<input type="text" name="first_name" id="first_name" class="input is-full-width" maxlength="100"
data-validate-field="first_name" required="TRUE" >
</div>
</div>
<div class="field">
<label for="Cognome" class="label has-text-weight-normal">Cognome *</label>
<div class="control">
<input type="text" name="last_name" id="last_name" class="input is-full-width" maxlength="100"
data-validate-field="last_name" required="TRUE">
</div>
</div>
<div class="field">
<label for="Email" class="label has-text-weight-normal">Email *</label>
<div class="control">
<input type="email" name="email" id="email" class="input is-full-width" maxlength="100"
data-validate-field="email" required="TRUE">
</div>
</div>
<div class="field">
<label for="Azienda" class="label has-text-weight-normal">Azienda *</label>
<div class="control">
<input type="text" name="company" id="company" class="input is-full-width" maxlength="100"
data-validate-field="company" required="TRUE">
</div>
</div>
<div class="field">
<label for="Funziona_Aziendale" class="label has-text-weight-normal">Funzione aziendale *</label>
<div class="control">
<input type="text" name="funzione_aziendale" id="funzione_aziendale" class="input is-full-width" maxlength="100"
data-validate-field="funzione_aziendale" required="TRUE">
</div>
</div>
<div class="field">
<label for="Phone" class="label has-text-weight-normal">Telefono</label>
<div class="control">
<input type="tel" name="mobile_phone" id="mobile_phone" class="input is-full-width" maxlength="30"
data-validate-field="mobile_phone" required="TRUE">
</div>
</div>
<div class="field">
<div class="control">
<input name="privacygdpr1obbligatorio" id="privacygdpr1obbligatorio" type="checkbox" value="other" required="TRUE"/>
<label for="CONSENSO1" class="label has-text-weight-normal">
Confermo di aver letto l’informativa sulla privacy secondo il Regolamento 2016/679/EU (Regolamento Generale sulla Protezione dei Dati)
</label>
</div>
</div>
<div class="field">
<div class="control">
<input type="checkbox" name="privacygdpr2nonobbligatoria" id="privacygdpr2nonobbligatoria"value="other" required="TRUE"/>
<label for="CONSENSO2" class="label has-text-weight-normal">
Accetto il trattamente dei dati per finalità di invio di comunicazione promozionali, con strumenti automatizzati (ad esempio email, sms,…) e con strumenti non automatizzati (telefono con operatore o posta cartacea).
</label>
</div>
</div>
<div id="fcf-status" class="fcf-status"></div>
<div class="field">
<div class="buttons">
<button id="fcf-button" type="submit" class="button is-link is-medium is-fullwidth"> ISCRIVITI</button>
</div>
</div>
<!-- You MUST retain the attribution below -->
</form>
</div>
</div>
<script src="fcf-assets/js/fcf.just-validate.min.js"></script>
<script src="fcf-assets/js/fcf.form.js"></script>
<!-- the lines above are needed -->
</body>
</html>
