Create A Pretty Contact Form With jQuery - Swyft_Callback

Create A Pretty Contact Form With jQuery - Swyft_Callback

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

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
  popup_hidden: true,
  button_disabled: 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'
    }
  ]
  
});

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

  • Publication date: 30.11.2017
  • Source