https://github.com/peterk/sitevision-geoform
Några skriptrader för att skapa geopositionering i ett mobilformulär i Sitevision.
https://github.com/peterk/sitevision-geoform
Last synced: 5 months ago
JSON representation
Några skriptrader för att skapa geopositionering i ett mobilformulär i Sitevision.
- Host: GitHub
- URL: https://github.com/peterk/sitevision-geoform
- Owner: peterk
- License: mit
- Created: 2013-10-09T17:32:37.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2013-10-10T20:37:17.000Z (over 12 years ago)
- Last Synced: 2025-06-04T05:10:34.760Z (about 1 year ago)
- Size: 512 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Sitevision mobilformulär
========================
En miniguide för att skapa ett mobilformulär med geopositionering och bifoga
bild i Sitevision. Testat i Sitevision version 3.5.3 men bör fungera från 3.0.
Målet är att skapa ett formulär som fingerar i de flesta moderna mobiltelefoner
med stöd för positionering.
Innehåll:
1. Skapa en responsiv mall med ett fast flexibelt grid (om du inte redan har en)
2. Skapa en ny sida
3. Skapa ett e-postformulär med fält för positionering
4. Några småfixar
### 1. Skapa en responsiv mall med ett grid
Om du inte redan har en responsiv mall skapar du en ny tom mall baserad på "Blank mall". Se till att du först har aktiverat grids på webbplatsen ([se manualen om grids](http://help.sitevision.se/SiteVision_3_0/gridConfigRepository.html) för mer info) och slagit på responsive design.
I denna mall har jag skapat en gridrad och två gridspalter om 6 kolumner vardera. Då kan man ha instruktioner eller liknande till höger om formuläret.
Skapa en ny sida baserad på föregående mall. Ställ in "Tillägg i head" på sidan och peka ut denna stilmallsfil: https://netdna.bootstrapcdn.com/bootswatch/2.3.2/cerulean/bootstrap.min.css - den gör knappar lite tydligare. Lägg till en logotyp och en inledande text på sidan.
### 3. Skapa ett e-postformulär med fält för positionering
Först ska vi skapa ett skriptfält med namnet "Plats" och två delfält som ska lagra latitud och longitud. Dessa sätts automatiskt via GPS:en i användarens telefon. Lägg till skriptfältet så här:
Lägg till delfälten med namnet "lat" och "lon":
Under fliken "Skript" för skriptfältet klickar du på "Velocity" och klistrar in [koden för fälten från denna fil](https://github.com/peterk/sitevision-geoform/blob/master/skriptfaltkod.vm). Koden anropar Google Maps API och ritar upp en liten karta med aktuell position.
Skapa de fält du vill ha utöver platsangivelsen. Förslagsvis skapar du ett beskrivningsfält, ett bifoga fil-fält samt namn och kontaktuppgifter till den som rapporterar med formuläret. Fält för att bifoga fil brukar öppna kameran eller galleriet på de flesta mobiler.
Ställ in övriga saker för formuläret (e-postmottagare etc).
För några sista fixar lägger vi en HTML-modul sist på sidan i vilken vi klistrar in följande kod:
```html
//Sätt lite stilar på Sitevisions standardknapp
document.querySelector("input[type='submit']").setAttribute("class", "btn btn-large btn-primary");
```
Ange även lite CSS-tweaks för att snygga upp Sitevisions standardgenerering av formulärfält genom att i egenskaper på sidan ange följande CSS:
```css
textarea, input {
width:97%;
}
form div br {
display:none;
}
label {
font-weight:bold;
clear:both;
}
```
Klart! Du har nu byggt ett mobilanpasat formulär med positionering som kan användas för t.ex. felrapportering.