├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── packages ├── ajax-with-axios-and-botpoison │ └── index.html ├── ajax-with-axios-and-recaptcha-v2 │ └── index.html ├── ajax-with-axios │ └── index.html ├── ajax-with-fetch-and-recaptcha-v2 │ └── index.html ├── ajax-with-fetch │ └── index.html ├── ajax-with-javascript-xhr │ └── index.html ├── ajax-with-jquery │ └── index.html ├── alpinejs-with-fetch │ └── index.html ├── gatsby │ ├── package-lock.json │ ├── package.json │ └── src │ │ └── pages │ │ └── index.jsx ├── gridsome │ ├── package-lock.json │ ├── package.json │ └── src │ │ └── pages │ │ └── Index.vue ├── html-with-botpoison │ └── index.html ├── hugo │ ├── config.toml │ ├── content │ │ └── _index.md │ ├── docker-compose.yml │ └── layouts │ │ └── index.html ├── java-with-retrofit │ └── FormsparkService.java ├── jekyll │ ├── _config.yml │ ├── _layouts │ │ └── default.html │ ├── docker-compose.yml │ └── index.html ├── kotlin-with-retrofit │ └── FormsparkService.kt ├── nextjs-with-fetch │ ├── package-lock.json │ ├── package.json │ └── pages │ │ └── index.jsx ├── nextjs-with-use-formspark │ ├── package-lock.json │ ├── package.json │ └── pages │ │ └── index.jsx ├── nuxtjs-with-fetch │ ├── package-lock.json │ ├── package.json │ └── pages │ │ └── index.vue ├── objective-c │ └── Submit.m ├── react-native-with-fetch │ └── ContactScreen.jsx ├── react-native-with-use-formspark │ └── ContactScreen.jsx ├── react-with-fetch │ ├── index.html │ ├── index.jsx │ ├── package-lock.json │ └── package.json ├── react-with-use-formspark │ ├── index.html │ ├── index.jsx │ ├── package-lock.json │ └── package.json ├── svelte-with-fetch │ ├── package-lock.json │ ├── package.json │ ├── rollup.config.js │ └── src │ │ ├── App.svelte │ │ └── main.js ├── vue-with-fetch │ └── ContactScreen.vue ├── vue-with-petite-vue-and-fetch │ └── index.html ├── vue-with-vue-use-formspark │ └── ContactScreen.vue └── webflow │ └── custom-footer-code.html └── scripts ├── execute.sh └── format.sh /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .cache 3 | .idea 4 | .jekyll-cache 5 | .next 6 | .nuxt 7 | .temp 8 | dist 9 | node_modules 10 | packages/jekyll/_site 11 | public -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Formspark examples 2 | 3 | - [AJAX with Axios](/packages/ajax-with-axios) 4 | - [AJAX with Axios and Botpoison](/packages/ajax-with-axios-and-botpoison) 5 | - [AJAX with Axios and reCAPTCHA v2](/packages/ajax-with-axios-and-recaptcha-v2) 6 | - [AJAX with Fetch](/packages/ajax-with-fetch) 7 | - [AJAX with Fetch and reCAPTCHA v2](/packages/ajax-with-fetch-and-recaptcha-v2) 8 | - [AJAX with Javascript XHR](/packages/ajax-with-javascript-xhr) 9 | - [AJAX with jQuery](/packages/ajax-with-jquery) 10 | - [Alpine.js with Fetch](/packages/alpinejs-with-fetch) 11 | - [Gatsby](/packages/gatsby) 12 | - [Gridsome](/packages/gridsome) 13 | - [HTML with Botpoison](/packages/html-with-botpoison) 14 | - [Hugo](/packages/hugo) 15 | - [Java with Retrofit](/packages/java-with-retrofit) 16 | - [Jekyll](/packages/jekyll) 17 | - [Kotlin with Retrofit](/packages/kotlin-with-retrofit) 18 | - [Next.js with Fetch](/packages/nextjs-with-fetch) 19 | - [Next.js with use-formspark](/packages/nextjs-with-use-formspark) 20 | - [Nuxt.js with Fetch](/packages/nuxtjs-with-fetch) 21 | - [Objective-C](/packages/objective-c) 22 | - [React with Fetch](/packages/react-with-fetch) 23 | - [React with use-formspark](/packages/react-with-use-formspark) 24 | - [React Native with Fetch](/packages/react-native-with-fetch) 25 | - [React Native with use-formspark](/packages/react-native-with-use-formspark) 26 | - [Svelte with Fetch](/packages/svelte-with-fetch) 27 | - [Vue with Fetch](/packages/vue-with-fetch) 28 | - [Vue with petite-vue and Fetch](/packages/vue-with-petite-vue-and-fetch) 29 | - [Vue with vue-use-formspark](/packages/vue-with-vue-use-formspark) 30 | - [Webflow](/packages/webflow) 31 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@formspark/examples", 3 | "version": "0.0.1", 4 | "lockfileVersion": 2, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "@formspark/examples", 9 | "version": "0.0.1", 10 | "devDependencies": { 11 | "prettier": "^2.5.1" 12 | } 13 | }, 14 | "node_modules/prettier": { 15 | "version": "2.5.1", 16 | "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz", 17 | "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==", 18 | "dev": true, 19 | "bin": { 20 | "prettier": "bin-prettier.js" 21 | }, 22 | "engines": { 23 | "node": ">=10.13.0" 24 | } 25 | } 26 | }, 27 | "dependencies": { 28 | "prettier": { 29 | "version": "2.5.1", 30 | "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz", 31 | "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==", 32 | "dev": true 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@formspark/examples", 3 | "private": true, 4 | "version": "0.0.1", 5 | "scripts": { 6 | "execute": "sh scripts/execute.sh", 7 | "format": "sh scripts/format.sh" 8 | }, 9 | "devDependencies": { 10 | "prettier": "^2.5.1" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/ajax-with-axios-and-botpoison/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Formspark | AJAX with Axios and Botpoison 6 | 7 | 8 | 9 | 10 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /packages/ajax-with-axios-and-recaptcha-v2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Formspark | AJAX with Axios and reCAPTCHA v2 6 | 7 | 8 | 9 | 10 |
11 | 12 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /packages/ajax-with-axios/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Formspark | AJAX with Axios 6 | 7 | 8 | 9 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /packages/ajax-with-fetch-and-recaptcha-v2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Formspark | AJAX with Fetch and reCAPTCHA v2 6 | 7 | 8 | 9 |
10 | 11 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /packages/ajax-with-fetch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Formspark | AJAX with Fetch 6 | 7 | 8 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /packages/ajax-with-javascript-xhr/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Formspark | AJAX with Javascript XHR 6 | 7 | 8 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /packages/ajax-with-jquery/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Formspark | AJAX with jQuery 6 | 7 | 8 | 9 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /packages/alpinejs-with-fetch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Formspark | Alpine.js with Fetch 6 | 10 | 11 | 12 |
13 | 17 | 20 |
21 | 22 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /packages/gatsby/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "gatsby develop", 4 | "build": "gatsby build" 5 | }, 6 | "dependencies": { 7 | "gatsby": "^4.3.0", 8 | "react": "^17.0.2", 9 | "react-dom": "^17.0.2" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/gatsby/src/pages/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id"; 4 | 5 | export default function HomePage() { 6 | return ( 7 |
8 | 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /packages/hugo/config.toml: -------------------------------------------------------------------------------- 1 | title = "Formspark | Hugo" 2 | 3 | [params] 4 | formspark_form_id = "your-form-id" -------------------------------------------------------------------------------- /packages/hugo/content/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Contact 3 | --- 4 | -------------------------------------------------------------------------------- /packages/hugo/docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: "2" 2 | 3 | services: 4 | hugo: 5 | image: klakegg/hugo:latest 6 | command: server 7 | ports: 8 | - "1313:1313" 9 | volumes: 10 | - ".:/src" 11 | -------------------------------------------------------------------------------- /packages/hugo/layouts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{ .Title }} 4 | 5 | 6 |

{{ .Title }}

7 |
8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/java-with-retrofit/FormsparkService.java: -------------------------------------------------------------------------------- 1 | private class ContactModel { 2 | private String name; 3 | private String message; 4 | 5 | public String getName() { 6 | return name; 7 | } 8 | 9 | public String getMessage() { 10 | return message; 11 | } 12 | 13 | public void setName(String name) { 14 | this.name = name; 15 | } 16 | 17 | public void setMessage(String message) { 18 | this.message = message; 19 | } 20 | } 21 | 22 | 23 | private interface FormsparkApi { 24 | 25 | @Headers({"Content-Type: application/json", "Accept: application/json"}) 26 | @POST("your-form-id") 27 | Call contact(@Body ContactModel contactModel); 28 | 29 | } 30 | 31 | public class FormsparkService { 32 | 33 | private void submit() { 34 | Gson gson = new GsonBuilder() 35 | .setLenient() 36 | .create(); 37 | 38 | OkHttpClient okHttpClient = new OkHttpClient().newBuilder() 39 | .connectTimeout(1000, TimeUnit.SECONDS) 40 | .readTimeout(1000, TimeUnit.SECONDS) 41 | .writeTimeout(1000, TimeUnit.SECONDS) 42 | .build(); 43 | 44 | 45 | Retrofit retrofit = new Retrofit.Builder() 46 | .baseUrl("https://submit-form.com/") 47 | .client(okHttpClient) 48 | .addConverterFactory(GsonConverterFactory.create(gson)) 49 | .build(); 50 | 51 | 52 | RetrofitApi retrofitApi = retrofit.create(FormsparkApi.class); 53 | 54 | ContactModel contactModel = new ContactModel(); 55 | contactModel.setName("your-name"); 56 | contactModel.setMessage("your-message"); 57 | 58 | call = retrofitApi.contactUs(contactModel); 59 | 60 | call.enqueue(new Callback() { 61 | @Override 62 | public void onResponse(Call call, Response response) { 63 | progressBar.setVisibility(View.GONE); 64 | runningService = false; 65 | if (response.isSuccessful()) { 66 | // Request succesful 67 | 68 | } else { 69 | // request not succesful 70 | } 71 | 72 | } 73 | 74 | @Override 75 | public void onFailure(Call call, Throwable t) { 76 | if (call.isCanceled()) { 77 | // Request canceled 78 | } else { 79 | // Request failed 80 | } 81 | } 82 | }); 83 | } 84 | 85 | } -------------------------------------------------------------------------------- /packages/jekyll/_config.yml: -------------------------------------------------------------------------------- 1 | title: Formspark | Jekyll 2 | formspark_form_id: your-form-id 3 | exclude: [docker-compose.yml] 4 | -------------------------------------------------------------------------------- /packages/jekyll/_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ site.title }}} 5 | 6 | 7 |
{{ content }}
8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/jekyll/docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: "2" 2 | 3 | services: 4 | jekyll: 5 | image: jekyll/jekyll:latest 6 | command: jekyll serve --watch --force_polling --verbose 7 | ports: 8 | - 4000:4000 9 | volumes: 10 | - .:/srv/jekyll 11 | -------------------------------------------------------------------------------- /packages/jekyll/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
6 | 7 | 8 |
9 | -------------------------------------------------------------------------------- /packages/kotlin-with-retrofit/FormsparkService.kt: -------------------------------------------------------------------------------- 1 | data class ContactResponse(val name: String, val message: String) 2 | 3 | interface ApiService { 4 | 5 | @POST("your-form-id") 6 | fun contact(@Body data: HashMap): Single 7 | 8 | } 9 | 10 | class FormsparkService { 11 | 12 | companion object { 13 | private var instance: ServiceBuilder? = null 14 | private var retrofit: ApiService? = null 15 | private var context: Context? = null 16 | 17 | private const val baseURL = "https://submit-form.com/" 18 | 19 | fun initialize(context: Context) { 20 | if (instance == null) { 21 | instance = ServiceBuilder() 22 | Companion.context = context 23 | instance!!.initializeRetro() 24 | } 25 | } 26 | 27 | fun get(): ApiService { 28 | return retrofit 29 | ?: throw IllegalStateException("FormsparkService must be initialized first.") 30 | } 31 | } 32 | 33 | private fun initializeRetro() { 34 | retrofit = Retrofit.Builder() 35 | .baseUrl(baseURL) 36 | .addCallAdapterFactory(RxJava2CallAdapterFactory.create()) 37 | .addConverterFactory(GsonConverterFactory.create(GsonBuilder().setLenient().create())) 38 | .client(getOkHttpClient()) 39 | .build() 40 | .create(ApiService::class.java) 41 | } 42 | 43 | private fun getOkHttpClient(): OkHttpClient { 44 | return OkHttpClient 45 | .Builder() 46 | .connectTimeout(1000, TimeUnit.SECONDS) 47 | .writeTimeout(1000, TimeUnit.SECONDS) 48 | .readTimeout(1000, TimeUnit.SECONDS) 49 | .addInterceptor { chain -> 50 | val requestBuilder: Request.Builder = chain.request().newBuilder() 51 | requestBuilder.header("Content-Type", "application/json") 52 | requestBuilder.header("Accept", "application/json") 53 | chain.proceed(requestBuilder.build()) 54 | }.build() 55 | } 56 | 57 | } 58 | 59 | // Then call: FormsparkService.get().contact(data) -------------------------------------------------------------------------------- /packages/nextjs-with-fetch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "build": "next build", 4 | "dev": "next dev", 5 | "start": "next start" 6 | }, 7 | "dependencies": { 8 | "next": "^12.0.7", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/nextjs-with-fetch/pages/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id"; 4 | 5 | function ContactPage() { 6 | const [message, setMessage] = useState(""); 7 | 8 | const onSubmit = async (e) => { 9 | e.preventDefault(); 10 | await fetch(FORMSPARK_ACTION_URL, { 11 | method: "POST", 12 | headers: { 13 | "Content-Type": "application/json", 14 | Accept: "application/json", 15 | }, 16 | body: JSON.stringify({ 17 | message, 18 | }), 19 | }); 20 | alert("Form submitted"); 21 | }; 22 | 23 | return ( 24 |
25 | 6 | 7 | 8 |
9 | 10 | 11 | 37 | -------------------------------------------------------------------------------- /packages/objective-c/Submit.m: -------------------------------------------------------------------------------- 1 | -(void)submit{ 2 | NSString *formsparkActionUrl = @"https://submit-form.com/your-form-id"; 3 | NSDictionary *jsonBodyDictionary = @{@"name":_txtName.text, @"message":_txtMessage.text}; 4 | NSData *jsonBodyData = [NSJSONSerialization dataWithJSONObject:jsonBodyDictionary options:kNilOptions error:nil]; 5 | 6 | NSMutableURLRequest *request = [NSMutableURLRequest new]; 7 | request.HTTPMethod = @"POST"; 8 | 9 | [request setURL:[NSURL URLWithString:formsparkActionUrl]]; 10 | [request setValue:@"application/json" forHTTPHeaderField:@"Content-Type"]; 11 | [request setValue:@"application/json" forHTTPHeaderField:@"Accept"]; 12 | [request setHTTPBody:jsonBodyData]; 13 | 14 | 15 | NSURLSessionConfiguration *config = [NSURLSessionConfiguration defaultSessionConfiguration]; 16 | NSURLSession *session = [NSURLSession sessionWithConfiguration:config 17 | delegate:nil 18 | delegateQueue:[NSOperationQueue mainQueue]]; 19 | NSURLSessionDataTask *task = [session dataTaskWithRequest:request 20 | completionHandler:^(NSData * _Nullable data, 21 | NSURLResponse * _Nullable response, 22 | NSError * _Nullable error) { 23 | 24 | NSHTTPURLResponse *asHTTPResponse = (NSHTTPURLResponse *) response; 25 | }]; 26 | } -------------------------------------------------------------------------------- /packages/react-native-with-fetch/ContactScreen.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { Alert, Button, Text, TextInput, View } from "react-native"; 3 | 4 | const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id"; 5 | 6 | function ContactScreen() { 7 | const [message, setMessage] = useState(""); 8 | 9 | const onPress = async () => { 10 | await fetch(FORMSPARK_ACTION_URL, { 11 | method: "POST", 12 | headers: { 13 | "Content-Type": "application/json", 14 | Accept: "application/json", 15 | }, 16 | body: JSON.stringify({ 17 | message, 18 | }), 19 | }); 20 | Alert.alert("Form submitted"); 21 | }; 22 | 23 | return ( 24 | 25 | 26 | Message 27 | setMessage(message)} 30 | multiline={true} 31 | /> 32 | 33 | 34 | 8 | 9 | 10 | 11 | 37 | -------------------------------------------------------------------------------- /packages/vue-with-petite-vue-and-fetch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Formspark | Vue with petite-vue and Fetch 6 | 7 | 8 | 9 |
10 | 14 | 15 |
16 | 17 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /packages/vue-with-vue-use-formspark/ContactScreen.vue: -------------------------------------------------------------------------------- 1 |