Create A Pretty Contact Form With jQuery - Swyft_Callback

Create A Pretty Contact Form With jQuery - Swyft_Callback
File Size: 41.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Swyft_Callback is a jQuery plugin used to create an animated, customizable, dynamic contact/feedback form with input mask integration in your web app.

How to use it:

1. Add the latest version of jQuery library and the jQuery Swyft_Callback plugin's files to the web page.

<script src=""
<script src="swyft_callback.js"></script>
<link rel="stylesheet" href="style.css">

2. Include the jQuery input mask plugin to create an input mask for your contact form.

<script src="jquery.inputmask.bundle.min.js"></script>

3. Call the function to create a basic toggle button on the web app that will toggle the contact form when clicked.

$( "body" ).swyftCallback();

4. Customize the contact form and toggle button.

$( "body" ).swyftCallback({

  // api url
  api_url: "test",

  // submit method
  form_method: "post",

  // custom classes and data
  custom_button_class: "",
  custom_button_data: "",
  custom_popup_class: "",
  custom_popup_data: "",

  // status
  status: {
    popup_hidden: true,
    button_disabled: false, //disable show/close functionality
    ajax_processing: false,

  // content - text
  text_vars: {
    popup_title: "Contact form",
    popup_body: "Leave us your phone number. We'll call you back.",
    send_button_text: "Send",

  // form info
  novalidate: true,
  input: {
    prefix: form_fields_prefix,
    fields: [
        obj: null,
        name: 'phone',
        field_name: form_fields_prefix + 'telephone',
        label: 'Phone number',
        type: 'tel',
        placeholder: '000-000-000',
        max_length: 20,
        required: true
  agreements: [
      short: 'Lorem',
      long: 'Ipsum',
      readmore: 'More'

  regex_table: {
    'phone': /(\(?(\+|00)?48\)?([ -]?))?(\d{3}[ -]?\d{3}[ -]?\d{3})|([ -]?\d{2}[ -]?\d{3}[ -]?\d{2}[ -]?\d{2})/
  //dictionary is used to exchange input names into values from the dictionary on API request
  data_dictionary: {} //'sc_fld_telephone': 'phone'


Change logs:


  • cleanup js


  • fix js + wrong input status css


  • bugfix


  • fix input mask conflict


  • CSS fix


  • fix value for checkboxes in agreements


  • Callback return api result


  • custom callback on success/error from api


  • fix multiple fields validation bug


  • update swyft + responsiveness


  • Callback from ajax
  • polishing + validation of fields and agreements


  • Added more customization options.


  • Bugfix

This awesome jQuery plugin is developed by Falkan3. For more Advanced Usages, please check the demo page or visit the official website.