Swyft_Callback – Contact Form Jquery Plugin

File Size:30.22 KB
Views Total:276
Last Update:March 14, 2018
Publish Date:December 26, 2017
Official Website:Go to website
License:MIT

A plugin that we often use for the creation of the animated, customized and the different and creative kind of the feedback form with the insertion of the input mask in the web application with the help of the integration.

How to use :

1. Add the jQuery library and the jQuery Swyft_Callback plugin’s files :

<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 :

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

3. Call the function to create a basic toggle button on the web app :

$( "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_<a href="https://www.jqueryshare.net/tags.php?/popup/">popup</a>_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
  novali<a href="https://www.jqueryshare.net/time-clock/">date</a>: 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'

});

Done 🙂

 

Change Log

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