Create A Pretty Contact Form With jQuery - Swyft_Callback

Create A Pretty Contact Form With jQuery - Swyft_Callback
File Size: 39.1 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="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>
<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:

2018-01-18

  • fix input mask conflict

2018-01-13

  • CSS fix

2017-12-15

  • fix value for checkboxes in agreements

2017-12-13

  • Callback return api result

2017-12-12

  • custom callback on success/error from api

2017-12-07

  • fix multiple fields validation bug

2017-12-06

  • update swyft + responsiveness

2017-12-05

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

2017-12-04

  • Added more customization options.

2017-12-01

  • Bugfix

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