Websiteformulieren

Responseformulieren

Responseformulieren

Het is mogelijk om vanaf een willekeurige website responseformulieren te versturen die in je eigen Yes-co systeem/Livy Pro binnenkomen. Yes-co heeft hiervoor een mogelijkheid ontwikkeld die je in staat stelt zelf zorg te dragen voor de gewenste inhoud en vormgeving van het formulier en de implementatie hiervan op je website.

Op welke websites?
De response formulieren zijn te gebruiken op iedere website waarbij de gebruiker zelf HTML kan plaatsen of kan laten plaatsen. Hierbij valt bijvoorbeeld te denken aan:

  • WordPress website
  • Andere CMS gebaseerde website
  • Extern klantendossier
  • Google sites

Soort formulieren
Je kan denken aan de volgende soort formulieren:

  • Globaal contact formulier
  • Contact formulier vanaf een object, bijvoorbeeld:
    • Aanvraag extra informatie (brochure, vraag, etc)
    • Aanmelden als geïnteresseerde (bij nieuwbouw project / type)
    • Aanvragen bezichtiging
    • Aanvraag specifieke dienst (taxatie, gratis waardebepaling, etc)
  • Vraag stellen over eigen object (vanuit verkopersdossier)

Werking
Nadat een formulier vanaf de website verzonden is komt deze binnen in Yes-co Open/ Livy Pro als een geavanceerd soort e-mail bericht. Het formulier wordt getoond in de ‘onverwerkte formulieren/e-mails’ container op de home pagina. Het formulier kan nu geopend, verwerkt of verwijderd worden.

Verwerken
Als het e-mailadres van de relatie al bekend is wordt deze relatie gesuggereerd. Indien het e-mailadres onbekend is wordt bij verwerking van het formulier automatisch de relatie aangemaakt. Indien mogelijk wordt ook het project geselecteerd weergegeven of kan deze opgezocht worden.

Verder kan je ook bepalen welke tags er aan de relatie of het project komen te hangen. Wanneer de project_tags of relation_tags in het formulier voorkomen worden deze standaard al geselecteerd.

Bij het verwerken van een formulier worden dus de volgende zaken geregeld:

  • Formulier wordt (indien mogelijk) gekoppeld aan het bijbehorende project.
  • Relatie wordt automatisch aangemaakt (indien er nog geen relatie met het betreffende e-mail adres aanwezig is).
  • Formulier wordt gekoppeld aan de relatie.
  • Eventuele project_tags worden gekoppeld aan het gekoppelde project
  • Eventuele relation_tags worden gekoppeld aan de gekoppelde relatie
  • Wanneer de relation_project_role gezet is en het formulier wordt aan een project gekoppeld, dan wordt de relatie ook met die rol aan het project gekoppeld.

Na het verwerken is het formulier verdwenen uit de ‘ongekoppelde dossier items’ en staat deze in het dossier van de relatie of het project. Ook is het formulier terug te vinden in het verwerkte formulieren overzicht onder het tabblad Overzichten. Je kan hierbij op datum en op afkomst van het formulier selecteren.

Na ontvangst van het formulier in het Yes-co systeem kan het formulier, indien gewenst, uitgeprint worden.

Stappen
Om een response formulier op een website te gaan gebruiken dienen de volgende stappen doorlopen te worden:

  • Bij het activeren van de Response formulieren applicatie in de Extra Diensten heb je een Yes-co key ontvangen. Deze key zorgt ervoor dat het formulier bij het desbetreffende Yes-co systeem wordt afgeleverd. Je moet zelf de Yes-co key op de juiste plek in het voorbeeld formulier plaatsen (zie de voorbeeldformulieren hieronder).
  • Bepalen wat voor soort formulier het moet worden (aan de hand van de voorbeeld formulieren hieronder)
  • Maak indien gewenst het formulier op in je eigen huisstijl (dit kan bijvoorbeeld je designer voor je doen)
  • HTML van gemaakte formulier op website plaatsen (eventueel velden als bijvoorbeeld project_id dynamisch laten vullen).

Opbouw formulier
Een formulier bestaat uit plain HTML. Voordat een aantal voorbeeld formulieren getoond worden, zie je hieronder eerst een beschrijving van de velden waaruit een formulier kan bestaan:

Spam validatie
Om spam te voorkomen kunnen de formulieren enkel verstuurd worden als de cliënt javascript ondersteuning heeft. Desgewenst kan de HTML van het formulier aangepast worden zodat er geen javascript ondersteuning nodig is om het formulier te versturen, dit is echter geheel op eigen risico.

Voorbeelden formulieren
Hieronder worden een aantal voorbeeld formulieren getoond met bijbehorende HTML. Je kan deze HTML kopiëren en gebruiken of zelf de HTML aanpassen.


Een eenvoudig voorbeeld

<form method=”post” action=”#” onsubmit=”this.action = ‘http://api.yes-co.com/1.0/response’;”>
<!– Yes-co systeem key, te genereren in Extra Diensten, verplicht! –>
<input type=”hidden” name=”yesco_key” value=”vul waarde Yes-co key in ” />
<!– Gebruik developer_mode om de werking van het formulier te checken –>
<input type=”hidden” name=”developer_mode” value=”false” />
<!– De pagina die getoond moet worden na het versturen van het formulier –>
<input type=”hidden” name=”thank_you_page” value=”vul url in” />
<!– De titel van het formulier –>
<input type=”hidden” name=”title” value=”vul titel in” />
<!– Het project ID waar het formulier aan gekoppeld dient te worden –>
<input type=”hidden” name=”project_id”  value=”vul waarde in” />
<!– De tags die aan het gekoppelde project gehangen moeten worden –>
<input type=”hidden” name=”project_tags” value=”vul waarde in” />
<!– De tags die standaard aan de gekoppelde relatie gehangen moeten worden –>
<input type=”hidden” name=”person_tags[]” value=”via website” />
<!– De rol die de relatie bij het gekoppelde project moet krijgen –>
<input type=”hidden” name=”project_role” value=”geinteresseerde” />
<!– De afkomst van het formulier –>
<input type=”hidden” name=”source” value=”Website” /><!– Begin achternaam van relatie –>
<div>
<label>Achternaam:</label>
<input type=”text” name=”person[lastname]” value=”” />
</div>
<!– Einde achternaam van relatie –>
<!– Begin e-mail adres van relatie –>
<div>
<label>E-mail:</label>
<input type=”text” name=”person[email]” value=”” />
</div>
<!– Einde e-mail adres van relatie –>
<!– Begin telefoon nummer van relatie –>
<div>
<label>Telefoon:</label>
<input type=”text” name=”person[phone]” value=”” class=”required” />
</div>
<!– Einde telefoon nummer van relatie –>
<!– Begin opmerkingen –>
<div>
<label>Opmerkingen:</label>
<textarea name=”comments”></textarea>
</div>
<!– Einde opmerkingen –><!– Begin knop om formulier te versturen –>
<div>
<input type=”submit” value=” Versturen ” />
</div>
<!– Einde knop om formulier te versturen –>
</form>
<!– Start javascript to validate the form –>
<script type=”text/javascript” src=”http://api.yes-co.com/1.0/embed/js/response-forms.js”></script>
<!– Einde javascript –>


Een ander voorbeeld

 

<form method=”post” action=”#” onsubmit=”this.action = ‘http://api.yes-co.com/1.0/response’;”>
<!– Yes-co systeem key, te genereren in App Extra Diensten, verplicht! –>
<input type=”hidden” name=”yesco_key” value=”vul waarde Yes-co key in” />
<!– Gebruik developer_mode om de werking van het formulier te checken –>
<input type=”hidden” name=”developer_mode” value=”false” />
<!– De pagina die getoond moet worden na het versturen van het formulier –>
<input type=”hidden” name=”thank_you_page” value=”http://www.livy.nl” />
<!– De titel van het formulier –>
<input type=”hidden” name=”title” value=”Aanvraag” />
<!– Het project ID waar het formulier aan gekoppeld dient te worden –>
<input type=”hidden” name=”project_id”  value=”vul waarde in” />
<!– De tags die aan het gekoppelde project gehangen moeten worden –>
<input type=”hidden” name=”project_tags” value=”vul waarde in” />
<!– De tags die standaard aan de gekoppelde relatie gehangen moeten worden –>
<input type=”hidden” name=”person_tags[]” value=”vul tag in” />
<!– De rol die de relatie bij het gekoppelde project moet krijgen –>
<input type=”hidden” name=”project_role” value=”vul rol in” />
<!– De afkomst van het formulier –>
<input type=”hidden” name=”source” value=”Website” /><!– Begin voornaam van relatie –>
<div>
<label>Voornaam:</label>
<input type=”text” name=”person[firstname]” value=”” />
</div>
<!– Einde voornaam van relatie –>
<!– Begin achternaam van relatie –>
<div>
<label>Achternaam:</label>
<input type=”text” name=”person[lastname]” value=”” />
</div>
<!– Einde achternaam van relatie –>
<!– Begin e-mail adres van relatie –>
<div>
<label>E-mail:</label>
<input type=”text” name=”person[email]” value=”” class=”required”/>
</div>
<!– Einde e-mail adres van relatie –>
<!– Begin telefoon nummer van relatie –>
<div>
<label>Telefoon:</label>
<input type=”text” name=”person[phone]” value=”” />
</div>
<!– Einde telefoon nummer van relatie –>
<!– Begin woonplaats van relatie –>
<div>
<label>Plaats:</label>
<input type=”text” name=”person[city]” value=”” />
</div>
<!– Einde woonplaats van relatie –>
<!– Begin straatnaam van relatie –>
<div>
<label>Straat:</label>
<input type=”text” name=”person[street]” value=”” />
</div>
<!– Einde straatnaam van relatie –>
<!– Begin postcode van relatie –>
<div>
<label>Postcode:</label>
<input type=”text” name=”person[zipcode]” value=”” />
</div>
<!– Einde postcode van relatie –>
<!– Begin huisnummmer van relatie –>
<div>
<label>Huisnummer:</label>
<input type=”text” name=”person[housenumber]” value=”” />
</div>
<!– Einde huisnummer van relatie –>
<!– Begin akties –>
<div>
<label>Akties:</label>
<select name=”actions[]” multiple=”multiple”>
<!– Optie Aanvragen bezichtiging –>
<option value=”Bezichtiging aanvragen”>Aanvragen bezichtiging</option>
<!– Optie Aanvragen brochure –>
<option value=”Brochure aanvragen”>Aanvragen brochure</option>
</select>
</div>
<!– Einde akties –><!– Begin opmerkingen –>
<div>
<label>Opmerkingen:</label>
<textarea name=”comments”></textarea>
</div>
<!– Einde opmerkingen –><!– Begin knop om formulier te versturen –>
<div>
<input type=”submit” value=” Versturen ” />
</div>
<!– Einde knop om formulier te versturen –>
</form>
<!– Start javascript to validate the form –>
<script type=”text/javascript” src=”http://api.yes-co.com/1.0/embed/js/response-forms.js”></script>
<!– Einde javascript –>


Voorbeeld met alle opties

<form method=”post” action=”#” onsubmit=”this.action = ‘http://api.yes-co.com/1.0/response’;”>
<!– Yes-co systeem key, te genereren in Extra Diensten, verplicht! –>
<input type=”hidden” name=”yesco_key” value=”vul waarde Yes-co key in” />
<!– Gebruik developer_mode om de werking van het formulier te checken –>
<input type=”hidden” name=”developer_mode” value=”false” />
<!– De pagina die getoond moet worden na het versturen van het formulier –>
<input type=”hidden” name=”thank_you_page” value=”vul url in” />
<!– De titel van het formulier –>
<input type=”hidden” name=”title” value=”vul titel in” />
<!– Het project ID waar het formulier aan gekoppeld dient te worden –>
<input type=”hidden” name=”project_id”  value=”vul waarde in” />
<!– De tags die aan het gekoppelde project gehangen moeten worden –>
<input type=”hidden” name=”project_tags” value=”vul tags in” />
<!– De tags die standaard aan de gekoppelde relatie gehangen moeten worden –>
<input type=”hidden” name=”person_tags[]” value=”vul tags in” />
<!– De rol die de relatie bij het gekoppelde project moet krijgen –>
<input type=”hidden” name=”project_role” value=”vul rol in” />
<!– De afkomst van het formulier –>
<input type=”hidden” name=”source” value=”vul afkomst in” /><!– Begin voornaam van relatie –>
<div>
<label>Voornaam:</label>
<input type=”text” name=”person[firstname]” value=”” />
</div>
<!– Einde voornaam van relatie –><!– Begin achternaam van relatie –>
<div>
<label>Achternaam:</label>
<input type=”text” name=”person[lastname]” value=”” />
</div>
<!– Einde achternaam van relatie –><!– Begin e-mail adres van relatie –>
<div>
<label>E-mail:</label>
<input type=”text” name=”person[email]” value=”” />
</div>
<!– Einde e-mail adres van relatie –><!– Begin telefoon nummer van relatie –>
<div>
<label>Telefoon:</label>
<input type=”text” name=”person[phone]” value=”” />
</div>
<!– Einde telefoon nummer van relatie –><!– Begin woonplaats van relatie –>
<div>
<label>Plaats:</label>
<input type=”text” name=”person[city]” value=”” />
</div>
<!– Einde woonplaats van relatie –><!– Begin straatnaam van relatie –>
<div>
<label>Straat:</label>
<input type=”text” name=”person[street]” value=”” />
</div>
<!– Einde straatnaam van relatie –><!– Begin postcode van relatie –>
<div>
<label>Postcode:</label>
<input type=”text” name=”person[zipcode]” value=”” />
</div>
<!– Einde postcode van relatie –><!– Begin huisnummmer van relatie –>
<div>
<label>Huisnummer:</label>
<input type=”text” name=”person[housenumber]” value=”” />
</div>
<!– Einde huisnummer van relatie –><!– Begin akties –>
<div>
<label>Akties:</label>
<select name=”actions[]” multiple=”multiple”>
<!– Optie Aanvragen bezichtiging –>
<option value=”Bezichtiging aanvragen”>Aanvragen bezichtiging</option>
<!– Optie Aanvragen brochure –>
<option value=”Brochure aanvragen”>Aanvragen brochure</option>
<!– Optie Downloaden brochure –>
<option value=”Brochure downloaden”>Downloaden brochure</option>
<!– Optie Neem contact met mij op over dit object –>
<option value=”Neem contact op”>Neem contact met mij op over dit object</option>
<!– Optie Plan een bezichtiging voor dit object –>
<option value=”bezichtiging”>Plan een bezichtiging voor dit object</option>
<!– Optie Stuur mij meer informatie over hypotheken –>
<option value=”Hypotheken”>Stuur mij meer informatie over hypotheken</option>
<!– Optie Stuur mij meer informatie over gratis waardebepaling –>
<option value=”Waarde bepaling”>Stuur mij meer informatie over gratis waardebepaling</option>
<!– Optie Stuur mij meer informatie over taxatie huidige woning –>
<option value=”Taxatie”>Stuur mij meer informatie over taxatie huidige woning</option>
<!– Optie Stuur mij meer informatie over aankoop begeleiding –>
<option value=”Aankoop begeleiding”>Stuur mij meer informatie over aankoop begeleiding</option>
<!– Optie Stuur mij meer informatie over verkoop huidige woning –>
<option value=”Verkoop woning”>Stuur mij meer informatie over verkoop huidige woning</option>
<!– Optie Stuur mij meer informatie over verzekeringen –>
<option value=”Verzekeringen”>Stuur mij meer informatie over verzekeringen</option>
</select>
</div>
<!– Einde akties –>

<!– Begin opmerkingen –>
<div>
<label>Opmerkingen:</label>
<textarea name=”comments”></textarea>
</div>
<!– Einde opmerkingen –>

<!– Begin nieuwsbrief tag om aan de relatie te koppelen (afhankelijk van wat de bezoeker selecteerd) –>
<div>
<input type=”checkbox” name=”person_tags[]” value=”nieuwsbrief” /> <label>Hou mij op de hoogte via uw nieuwbrief</label><br />
</div>
<!– Einde nieuwsbrief tag –>

<!– Begin knop om formulier te versturen –>
<div>
<input type=”submit” value=” Versturen ” />
</div>
<!– Einde knop om formulier te versturen –>
</form>
<!– Start javascript to validate the form –>
<script type=”text/javascript” src=”http://api.yes-co.com/1.0/embed/js/response-forms.js”></script>
<!– Einde javascript –>