Przykłady formularzy - formularz kontaktowy na stronę

Utworzono: 2022-06-14
Ostatnia aktualizacja: 2023-05-09

Liczba odwiedzin posta: 1494

Formularzy w Sugesterze można używać na wiele sposobów. Jednym z nich jest wykorzystywanie formularzy do komunikacji z klientem.

Poniżej przedstawiamy 3 przykłady formularza kontaktowego. Aby osadzić tak wyglądający formularz na stronie www, wystarczy w szablonach formularzy wybrać konkretny szablon i użyć kodu CSS podanego przy przykładzie.

W podanych kodach CSS wyszczególniono na samej górze elementy takie jak kolor przycisku, kolor tła, kolor krawędzi, aby można było je łatwo samemu zmienić. Wystarczy zamienić kolor na wybrany z palety.
Kolory można pobierać tutaj: https://www.w3schools.com/colors/colors_picker.asp

Po stworzeniu formularzy zachęcamy do ustawienia mapowania, tak by odpowiednie dane z formularza zapisywały się automatycznie w Sugesterze.

1. Prosty formularz kontaktowy z linkiem do strony z regulaminem

Aby umieścić taki formularz na stronie, należy:

wejść w zakładkę Formularze z głównego menu i kliknąć przycisk "+Dodaj" w prawym górnym rogu
wybrać prosty formularz kontaktowy
w sekcji "Wybierz typy pól" można dodać dodatkowe pola do formularza
rozwinąć "Więcej opcji" i w polu "Zmiana wyglądu/działania (własny CSS lub Javascript przed formatką)" wkleić poniższy kod (po kliknięciu w pole kodu, pojawi się suwak do scrollowania)

<style>

body {

  /* text */

  --dark-text: #000;

  --medium-dark-text: #333;

  --medium-text: #999;

  --light-text: #aaa;



  /* backgrounds/tła */

  --light-background: #fff;

  --errors-background: #fff6f6;



  /* borders/krawędzie */

  --light-border: #e5e6e7;

  --dark-border: #ddd;

  --errors-border: #ff9292;

  --form-border: #E0DFE0;

  --form-top-border: #289b38;



  /* buttons/przyciski */

  --button-text: #fff;

  --button-background: #289b38;

  --button-background-hover: #005c38;

}



.gray-bg #form_result_attachments, .gray-bg .btn.btn-link.fileinput-button {

  clear: both;

  display: inline-block;

  float: none;

  margin-bottom: 10px;

  margin-top: 9px;

  width: auto;

}

.gray-bg .appendix_li {

  display: block;

}

.gray-bg .delete_field, .gray-bg .appendix_li>div>span.pull-right {

  color: red;

  float: right;

  font-weight: bold;

}

.gray-bg .lavina_form {

  text-align: left;

  line-height: 21px;

}

body.gray-bg {

  margin: auto;

  padding: 20px;

  width: 687px;

  overflow: auto;

}

body.gray-bg .lavina_form div.label>div {

  line-height: 20px;

}

body.gray-bg .lavina_form .short-field {

  margin-right: 19px;

}

.label {

  white-space: normal !important;

}

.gray-bg .lavina_form div.label {

  background-color: transparent;

  color: inherit;

  font-family: inherit;

  font-size: inherit;

  font-weight: inherit;

  padding: 0;

  text-shadow: none

}

.gray-bg .lavina_form .s3_uploader+div.text, .gray-bg .lavina_form div.label.small-title label {

  border: 0 none;

  font-size: 14px;

  margin: 0;

}

.gray-bg .lavina_form .short-field {

  float: left;

  width: 34%

}

.gray-bg .lavina_form .short-field input {

  margin-right: 10px;

  min-width: 15px;

  width: 92%!important

}

.gray-bg .lavina_form .short-field:after {

  content: " ";

  display: block;

  clear: both;

  width: 100%;

  float: none

}

.gray-bg .lavina_form .clear-before:before {

  content: " ";

  display: block;

  clear: both;

  width: 100%;

  float: none

}

.s3_uploader+div.text {

  border-top: 1px dashed var(--medium-text);

  color: var(--dark-text);

  display: block;

  font-size: 18px;

  margin: 50px 0 10px;

  padding-bottom: 10px;

  padding-top: 17px;

  text-align: left

}

.lavina_form div.label>div {

  color: var(--light-text);

  font-size: 13px

}

.lavina_form div.label {

  margin: 0

}

.lavina_form div.label>div {

  color: var(--medium-text);

  text-align: left;

}

.lavina_form1 [id^="fieldWithErrors"] select, .lavina_form1 [id^="fieldWithErrors"] textarea, .lavina_form1 [id^="fieldWithErrors"] input {

  background-color: var(--errors-background) !important;

  border: 1px solid var(--errors-border) !important;

}

.lavina_form label {

  font-weight: 400;

  margin: 0 auto 5px;

}

.lavina_form .form_description {

  display: none;

}

.gray-bg .lavina_form .form_description {

  color: var(--dark-text);

  display: block;

  font-size: 26px;

  font-weight: lighter;

  line-height: 34px;

  margin-bottom: 29px;

  margin-top: 5px;

  display: block;

}

.lavina_form .radio, .lavina_form .checkbox {

  display: inline-block;

  margin-right: 10px!important

}

.lavina_form select, .lavina_form textarea, .lavina_form input[type="text"] {

  background-color: var(--light-background);

  background-image: none;

  border: 1px solid var(--light-border);

  border-radius: 1px;

  color: inherit;

  display: block;

  font-size: 14px;

  margin-bottom: 10px;

  max-width: 100%;

  min-width: 100%;

  padding: 6px 12px;

  transition: border-color .15s ease-in-out 0s, box-shadow .15s ease-in-out 0;

  width: auto!important

}

#form_result_attachments_container {

  border-bottom: 1px dashed var(--dark-border);

  content: " ";

  display: block;

  margin-bottom: 0 !important;

  padding-bottom: 20px;

  width: 100%;

}

.lavina_form input[type="submit"], .lavina_form input[type="button"] {

  border-image: none;

  border-radius: 4px;

  border-style: solid;

  border-width: 1px;

  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);

  color: var(--button-text) !important;

  cursor: pointer;

  display: inline-block;

  font-size: 15px;

  font-weight: bold;

  height: auto;

  letter-spacing: 1px;

  line-height: 18px;

  margin-bottom: 20px;

  margin-top: 20px;

  padding: 8px 48px;

  text-align: center;

  text-shadow: none;

  text-transform: uppercase;

  vertical-align: middle;

  width: 100%;

  background: var(--button-background) !important;

}

.lavina_form input[type="submit"]:hover, .lavina_form input[type="button"]:hover {

  background: var(--button-background-hover) !important;

  transition: .2s ease;

}

.disclaimer-content {

  width: 100%;

  max-height: 350px;

  padding: 10px;

  margin: 20px 0;

  background-color: #e6ffe6;

  border: 1px solid rgba(60,60,60,.26);

  border-radius: 4px;

  overflow-y: auto;

  font-size: 14px;

  line-height: 21px;

  cursor: default;

}

.gray-bg .lavina_form {

  background: var(--light-background) none repeat scroll 0 0;

  line-height: 21px;

  margin-bottom: 100px;

  padding: 50px;

  text-align: left;

  border: 2px var(--form-border) solid;

  border-top: 4px var(--form-top-border) solid;

}

.lavina_form>form+div {

  text-align: right;

}

.lavina_form>form+div>a {

  color: var(--medium-text);

  display: block;

  padding-top: 11px;

  text-align: right;

}

.lavina_form .radio label, .lavina_form .checkbox label {

  cursor: pointer;

  font-weight: normal;

  margin-bottom: 10px;

  min-height: auto;

  padding: 0px;

}

#form_result_attachments, .btn.btn-link.fileinput-button {

  clear: both;

  display: inline-block;

  float: none;

  margin-bottom: 10px;

  margin-top: 9px;

  width: auto;

}

.placeholder_field {

  margin-top: 2rem;

}

</style>



<script>

document.addEventListener('DOMContentLoaded', function(){

  const disclaimer = "<p class='disclaimer-content'>Przed wypełnieniem formularza zapoznaj się z <a href='TU WKLEJ LINK DO STRONY'>Regulaminem</a></p>"

  const footer = document.querySelector('.sugester-form-footer')



  footer.insertAdjacentHTML('beforeBegin', disclaimer)

0

  const fields = document.querySelectorAll('input, textarea')



  for (let field of fields) {

    let superParent = field.parentElement.parentElement

    let isTextField = superParent.classList.contains('text') || superParent.classList.contains('textarea')

    let label = superParent.querySelector('label')

    if(isTextField) {

        field.placeholder = label.innerText

        label.remove()

        superParent.classList.add('placeholder_field')

    }

  }

})

</script>

2. Zaawansowany formularz kontaktowy z polem wyboru

Aby umieścić taki formularz na stronie, należy:

wybrać zaawansowany formularz kontaktowy
można dodać dodatkowe pola do formularza
rozwinąć "Więcej opcji" i w polu "Zmiana wyglądu/działania (własny CSS lub Javascript przed formatką)" wkleić poniższy kod

<style>  

body {

    /* text */

    --dark-text: #000;

    --medium-dark-text: #333;

    --medium-text: #999;

    --light-text: #aaa;

    --label-color: #787878;



    /* backgrounds/tła */

    --light-background: #fff;

    --errors-background: #fff6f6;



    /* borders/krawędzie */

    --light-border: #2b2b2b;

    --dark-border: #ddd;

    --errors-border: #ff9292;

    --active-input-border: #cfb88e;



    /* button/przycisk */

    --button-text: #fff;

    --button-background: #cfb88e;

    --button-background-hover: #e5d1b3;

    letter-spacing: .5px;

    font-family: Montserrat,sans-serif !important;

  }



  .gray-bg #form_result_attachments, .gray-bg .btn.btn-link.fileinput-button {

    clear: both;

    display: inline-block;

    float: none;

    margin-bottom: 10px;

    margin-top: 9px;

    width: auto;

  }

  .gray-bg .appendix_li {

    display: block;

  }

  .gray-bg .delete_field, .gray-bg .appendix_li>div>span.pull-right {

    color: red;

    float: right;

    font-weight: bold;

  }

  .gray-bg .lavina_form {

    text-align: left;

    line-height: 21px;

  }

  body.gray-bg {

    margin: auto;

    padding: 20px;

    width: 687px;

    overflow: auto;

  }

  body.gray-bg .lavina_form div.label>div {

    line-height: 20px;

  }

  body.gray-bg .lavina_form .short-field {

    margin-right: 19px;

  }

  .label {

    white-space: normal !important;

  }

  .gray-bg .lavina_form div.label {

    background-color: transparent;

    color: inherit;

    font-family: inherit;

    font-size: inherit;

    font-weight: inherit;

    padding: 0;

    text-shadow: none

  }

  .gray-bg .lavina_form .s3_uploader+div.text, .gray-bg .lavina_form div.label.small-title label {

    border: 0 none;

    font-size: 14px;

    margin: 0;

  }

  .gray-bg .lavina_form .short-field {

    float: left;

    width: 34%

  }

  .gray-bg .lavina_form .short-field input {

    margin-right: 10px;

    min-width: 15px;

    width: 92%!important

  }

  .gray-bg .lavina_form .short-field:after {

    content: " ";

    display: block;

    clear: both;

    width: 100%;

    float: none

  }

  .gray-bg .lavina_form .clear-before:before {

    content: " ";

    display: block;

    clear: both;

    width: 100%;

    float: none

  }

  .s3_uploader+div.text {

    border-top: 1px dashed var(--medium-text);

    color: var(--dark-text);

    display: block;

    font-size: 18px;

    margin: 50px 0 10px;

    padding-bottom: 10px;

    padding-top: 17px;

    text-align: left

  }

  .lavina_form div.label>div {

    color: var(--light-text);

    font-size: 13px

  }

  .lavina_form div.label {

    margin: 0

  }

  .lavina_form div.label>div {

    color: var(--medium-text);

    text-align: left;

  }

  .lavina_form1 [id^="fieldWithErrors"] select, .lavina_form1 [id^="fieldWithErrors"] textarea, .lavina_form1 [id^="fieldWithErrors"] input {

    background-color: var(--errors-background) !important;

    border: 1px solid var(--errors-border) !important;

  }

  .lavina_form label {

    margin: 0 auto 5px;

    white-space: normal !important;

    color: var(--label-color);

    font-family: Montserrat,sans-serif !important;

    font-size: 10px;

    font-weight: 400;

  }

  .lavina_form .form_description {

    display: none;

  }

  .gray-bg .lavina_form .form_description {

    color: var(--dark-text);

    display: block;

    font-size: 26px;

    font-weight: lighter;

    line-height: 34px;

    margin-bottom: 29px;

    margin-top: 5px;

    display: block;

  }

  .lavina_form .radio, .lavina_form .checkbox {

    display: inline-block;

    margin-right: 10px!important

  }

  .lavina_form select, .lavina_form textarea, .lavina_form input[type="text"] {

    background-color: var(--light-background);

    background-image: none;

    border: 1px solid var(--light-border);

    border-radius: 1px;

    color: inherit;

    display: block;

    font-size: 14px;

    margin-bottom: 10px;

    max-width: 100%;

    min-width: 100%;

    padding: 6px 12px;

    transition: border-color .15s ease-in-out 0s, box-shadow .15s ease-in-out 0;

    width: auto!important

  }

  #form_result_attachments_container {

    border-bottom: 1px dashed var(--dark-border);

    content: " ";

    display: block;

    margin-bottom: 0 !important;

    padding-bottom: 20px;

    width: 100%;

  }

  .lavina_form input[type="submit"], .lavina_form input[type="button"] {

    display: inline-block;

    margin-bottom: 0;

    font-family: Montserrat,sans-serif;

    font-weight: 300;

    text-align: center;

    font-size: 14px;

    vertical-align: middle;

    touch-action: manipulation;

    cursor: pointer;

    background: var(--button-background);

    color: var(--button-text) !important;

    border: 1px solid transparent;

    white-space: normal;

    text-transform: uppercase;

    opacity: 1;

    padding: 11px 40px;

    font-size: 11px;

    line-height: 1.42857;

    border-radius: 2px;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    margin-left: 310px;

  }

  .lavina_form input[type="submit"]:hover, .lavina_form input[type="button"]:hover {

    background: var(--button-background-hover) !important;

  }

  .gray-bg .lavina_form {

    background: var(--light-background) none repeat scroll 0 0;

    line-height: 21px;

    margin-bottom: 100px;

    padding: 50px;

    text-align: left;

  }

  .lavina_form>form+div {

    text-align: right;

  }

  .lavina_form>form+div>a {

    color: var(--medium-text);

    display: block;

    padding-top: 11px;

    text-align: right;

  }

  .lavina_form .radio label, .lavina_form .checkbox label {

    cursor: pointer;

    font-weight: normal;

    margin-bottom: 10px;

    min-height: auto;

    padding: 0px;

  }

  #form_result_attachments, .btn.btn-link.fileinput-button {

    clear: both;

    display: inline-block;

    float: none;

    margin-bottom: 10px;

    margin-top: 9px;

    width: auto;

  }

  .lavina_form select:focus, .lavina_form textarea:focus, .lavina_form input[type="text"]:focus {

    border-color: var(--active-input-border);

    outline: 0;

  }

  .lavina_form select {

    letter-spacing: 1px;

    font-weight: bold !important;

  }

  .lavina_form select option:checked {

    font-weight: bold !important;

  }

  label.required:after, .required label::after  {

    color: var(--label-color) !important;

    content: " *";

    font-weight: bold;

  }

  .lavina_form select option:hover, .lavina_form select option:checked {

    text-decoration: none;

    color: #404040;

    box-shadow: 0 0 10px 100px #f5f5f5 inset;

    background: #f5f5f5 !important;

  }

  </style>

3. Formularz kontaktowy z checkboxem do wyrażania zgody na przetwarzanie danych

Aby umieścić taki formularz na stronie, należy:

wybrać zaawansowany formularz kontaktowy
dodać "pole wielokrotnego wyboru" i zostawić tylko jedną opcję, wtedy uzyskamy checkbox do pozostawienia zgody
można dodać dodatkowe pola do formularza
rozwinąć "Więcej opcji" i w polu "Zmiana wyglądu/działania (własny CSS lub Javascript przed formatką)" wkleić poniższy kod
w miejscu w CSS, gdzie jest "Administratorem..." można wpisać dowolny tekst

<style>

body {

    /* text */

    --dark-text: #000;

    --medium-dark-text: #333;

    --medium-text: #999;

    --light-text: #aaa;



    /* backgrounds/tła */

    --light-background: #fff;

    --errors-background: #fff6f6;

    --form-background: #ffcce0;



    /* borders/krawędzie */

    --light-border: #e5e6e7;

    --dark-border: #ddd;

    --errors-border: #ff9292;



    /* button/przycisk */

    --button-text: #333;

    --button-background: #fff;

    --button-background-hover: #fff;

  }



  .gray-bg #form_result_attachments, .gray-bg .btn.btn-link.fileinput-button {

    clear: both;

    display: inline-block;

    float: none;

    margin-bottom: 10px;

    margin-top: 9px;

    width: auto;

  }

  .gray-bg .appendix_li {

    display: block;

  }

  .gray-bg .delete_field, .gray-bg .appendix_li>div>span.pull-right {

    color: red;

    float: right;

    font-weight: bold;

  }

  .gray-bg .lavina_form {

    background: var(--form-background) !important;

    text-align: left;

    line-height: 21px;

  }

  body.gray-bg {

    margin: auto;

    padding: 20px;

    width: 687px;

    overflow: auto;

  }

  body.gray-bg .lavina_form div.label>div {

    line-height: 20px;

  }

  body.gray-bg .lavina_form .short-field {

    margin-right: 19px;

  }

  .label {

    white-space: normal !important;

  }

  .gray-bg .lavina_form div.label {

    background-color: transparent;

    color: inherit;

    font-family: inherit;

    font-size: inherit;

    font-weight: inherit;

    padding: 0;

    text-shadow: none

  }

  .gray-bg .lavina_form .s3_uploader+div.text, .gray-bg .lavina_form div.label.small-title label {

    border: 0 none;

    font-size: 14px;

    margin: 0;

  }

  .gray-bg .lavina_form .short-field {

    float: left;

    width: 34%

  }

  .gray-bg .lavina_form .short-field input {

    margin-right: 10px;

    min-width: 15px;

    width: 92%!important

  }

  .gray-bg .lavina_form .short-field:after {

    content: " ";

    display: block;

    clear: both;

    width: 100%;

    float: none

  }

  .gray-bg .lavina_form .clear-before:before {

    content: " ";

    display: block;

    clear: both;

    width: 100%;

    float: none

  }

  .s3_uploader+div.text {

    border-top: 1px dashed var(--medium-text);

    color: var(--dark-text);

    display: block;

    font-size: 18px;

    margin: 50px 0 10px;

    padding-bottom: 10px;

    padding-top: 17px;

    text-align: left

  }

  .lavina_form div.label>div {

    color: var(--light-text);

    font-size: 13px

  }

  .lavina_form div.label {

    margin: 0

  }

  .lavina_form div.label>div {

    color: var(--medium-text);

    text-align: left;

  }

  .lavina_form1 [id^="fieldWithErrors"] select, .lavina_form1 [id^="fieldWithErrors"] textarea, .lavina_form1 [id^="fieldWithErrors"] input {

    background-color: var(--errors-background) !important;

    border: 1px solid var(--errors-border) !important;

  }

  .lavina_form label {

    font-weight: 400;

    margin: 0 auto 5px;

  }

  .lavina_form .form_description {

    display: none;

  }

  .gray-bg .lavina_form .form_description {

    color: var(--dark-text);

    display: block;

    font-size: 26px;

    font-weight: lighter;

    line-height: 34px;

    margin-bottom: 29px;

    margin-top: 5px;

    display: block;

  }

  .lavina_form .radio, .lavina_form .checkbox {

    display: inline-block;

    margin-right: 10px!important

  }

  .lavina_form select, .lavina_form textarea, .lavina_form input[type="text"] {

    background-color: var(--light-background);

    background-image: none;

    border: 1px solid var(--light-border);

    border-radius: 1px;

    color: inherit;

    display: block;

    font-size: 14px;

    margin-bottom: 10px;

    max-width: 100%;

    min-width: 100%;

    padding: 6px 12px;

    transition: border-color .15s ease-in-out 0s, box-shadow .15s ease-in-out 0;

    width: auto!important

  }

  #form_result_attachments_container {

    border-bottom: 1px dashed var(--dark-border);

    content: " ";

    display: block;

    margin-bottom: 0 !important;

    padding-bottom: 20px;

    width: 100%;

  }

  .lavina_form input[type="submit"], .lavina_form input[type="button"] {

    border-image: none;

    border-radius: 4px;

    border-style: solid;

    border-width: 1px;

    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);

    color: var(--button-text) !important;

    cursor: pointer;

    display: inline-block;

    font-size: 15px;

    font-weight: bold;

    height: auto;

    letter-spacing: 1px;

    line-height: 18px;

    margin-bottom: 20px;

    margin-top: 20px;

    padding: 8px 48px;

    text-align: center;

    text-shadow: none;

    text-transform: uppercase;

    vertical-align: middle;

    width: auto;

    background: var(--button-background) !important;

  }

  .lavina_form input[type="submit"]:hover, .lavina_form input[type="button"]:hover {

    background: var(--button-background-hover) !important;

  }

  .gray-bg .lavina_form {

    background: var(--light-background) none repeat scroll 0 0;

    line-height: 21px;

    margin-bottom: 100px;

    padding: 50px;

    text-align: left;

  }

  .lavina_form>form+div {

    text-align: right;

  }

  .lavina_form>form+div>a {

    color: var(--medium-text);

    display: block;

    padding-top: 11px;

    text-align: right;

  }

  .lavina_form .radio label, .lavina_form .checkbox label {

    cursor: pointer;

    font-weight: normal;

    margin-bottom: 10px;

    min-height: auto;

    padding: 0px;

  }

  #form_result_attachments, .btn.btn-link.fileinput-button {

    clear: both;

    display: inline-block;

    float: none;

    margin-bottom: 10px;

    margin-top: 9px;

    width: auto;

  }

  </style>





<script>

  document.addEventListener('DOMContentLoaded', function(){

    const disclaimer = "<p>Admininstratorem twoich danych jest administrator twoich danych Admininstratorem twoich danych jest administrator twoich danych Admininstratorem twoich danych jest administrator twoich danych Admininstratorem twoich danych jest administrator twoich danych</p>"

    const footer = document.querySelector('.sugester-form-footer')



    footer.insertAdjacentHTML('beforeBegin', disclaimer)

  })

  </script>

Zarządzaj całą swoją firmą w jednej aplikacji. Wypróbuj Sugester przez 30 dni za darmo!

Rozpocznij darmowy okres testowy

Powrót

Przykłady formularzy - formularz kontaktowy na stronę

1. Prosty formularz kontaktowy z linkiem do strony z regulaminem

2. Zaawansowany formularz kontaktowy z polem wyboru

3. Formularz kontaktowy z checkboxem do wyrażania zgody na przetwarzanie danych

Dodaj komentarz

Najnowsze z tej kategorii