Jak si přidat poptávkový formulář na svůj web

Nejprve je potřeba si vygenerovat API klíč. Ten slouží k zabezpečení přenosu poptávky z vašeho webu do Qvampu.

API klíč si vygenerujete tak, že v Nastavení místa („Vaše místo“ kliknete na panel „Základní údaje“ a poté na záložku „API klíče„. Kliknutím na tlačítko „+“ si pojmenujete tento API klíč (třeba „Formulář – web“). Kliknete na tlačítko vytvořit a API klíč se automaticky vygeneruje.

Jakmile máte API klíč, kliknete na tlačítko „Zobrazit formulář na váš web„. Zobrazí se kód, který vložíte do vašeho webu nebo jej pošlete vašemu vývojáři. Ten už si s ním poradí. Upozorňujeme, že formulář není v základu nijak stylově upravený a to proto, abyste si jej mohli upravit podle svého. Máme pro vás však připraven základní styl, který můžete použít.

Pokud si nevíte rady, můžete nám napsat.

Další tipy:

• V okně s kódem si vpravo dole můžete vybrat, jaký bude zdroj poptávky, když přijde tímto formulářem.
• Formulář si můžete dát na více míst.

Šablona stylu (CSS):

form {
  clear: both;
  overflow: hidden;
  padding: 1px;
  margin: 0 0 10px 0;
}
form > fieldset  {
  margin: 0 0 5px 0;
}
form > label,
legend {
	width: 25%;
  float: left;
  padding-right: 10px;
}
form >,
form > fieldset{
  width: 75%;
  float: right;
}
form > fieldset label {
	font-size: 90%;
}
fieldset {
	border: 0;
  padding: 0;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
	width: 50%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
  width: 50%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
  outline: 0;
  border-color: #4697e4;
}

select {
  padding: 5px 10px;
  margin: 8px 0;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
border-radius: 5px;
}

/*Submit*/
input[type=submit]{
  width: 100%;
  background-color: #750d1b!important;
  color: white!important;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

@media (max-width: 600px) {
  form {
    margin: 0 0 15px 0; 
  }
  form > label,
  legend {
	  width: 100%;
    float: none;
    margin: 0 0 5px 0;
  }
  form,
  form > fieldset {
    width: 100%;
    float: none;
  }
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=password],
  textarea,
  select {
    width: 100%; 
  }
}
@media (min-width: 1200px) {
  form > label,
	legend {
  	text-align: right;
  }
}