News 644Forms
More than just a contact form script!
The most flexible, responsive and secure forms you could find!
Incredible easy to use!
To start using Simple Forms you have to connect required CSS and Javascript to your web page then generate the confing file online to get you started quick and easy! Yo’ll get a fully working contact form with infinite possibilities in no time. For more info check the installation guide.
Get engaging feedback from your clients
Encourage your customers to leave feedback at any moment using prompt and responsive contact forms. Your customers will love engaging with News 644 Simple Forms! You are free to choose your email template to get pretty form submissions.
Transform your website's user engagement with News 644 Simple Forms - the lightweight, dependency-free form solution that takes just minutes to implement but offers endless customization possibilities.
Setup in 3 Simple Steps
To start using Simple Forms you have to connect required CSS and Javascript to your web page then generate the config file online to get you started quick and easy!
You'll get a fully working contact form with infinite possibilities in no time. For more info check the installation guide.
Form Implementation Code
To implement the News644 form system on your webpage, use the following code structure:
<!-- CSS -->
<link rel="stylesheet" href="news644-forms.min.css">
<!-- JS -->
<script src="news644-forms.min.js"></script>
<!-- Form Container -->
<div id="simple-form-container"></div>
<!-- Initialization -->
<script>
News644Forms.init({
container: '#simple-form-container',
configUrl: 'path/to/your-config.json'
});
</script>Configuration Details
| Element | Description | Required |
|---|---|---|
| CSS File | Provides base styling for all form elements | Yes |
| JS File | Core form functionality and validation | Yes |
| Form Container | Empty div where form will be injected | Yes |
| init() Parameters | Configuration options for form behavior | Yes |
Initialization Options
News644Forms.init({
container: '#simple-form-container', // CSS selector for form placement
configUrl: 'path/to/your-config.json', // Form configuration file
lang: 'en', // Default language
debug: false, // Debug mode
onSuccess: function(response) {
// Custom success handler
},
onError: function(error) {
// Custom error handler
}
});Best Practices
- Place CSS in
<head>to prevent FOUC (Flash of Unstyled Content) - Load JavaScript before closing
<body>tag for better performance - Ensure config.json is accessible from your domain
- Use absolute paths for assets in production
- Test form in multiple browsers
Get Engaging Feedback From Your Clients
Encourage your customers to leave feedback at any moment using prompt and responsive contact forms. Your customers will love engaging with News 644 Simple Forms!
You are free to choose your email template to get pretty form submissions.
Why Businesses Love Simple Forms:
- 89% faster form submissions than traditional solutions
- 42% increase in customer feedback
- 100% customizable email templates
- Zero dependencies - works with any tech stack
Complete Installation Guide
Step 1: Download the Package
Get the latest version from our download page or install via npm:
npm install news644-simple-formsStep 2: Configure Your Form
Use our online config generator to create your form specification:
Step 3: Deploy and Customize
After basic setup, explore advanced customization options:
Email Templates
News644Forms.setEmailTemplate({
subject: "New contact from {{name}}",
body: "You received a message from {{email}}..."
});Custom Validation
// Add custom validation rule
News644Forms.addValidationRule('isFutureDate',
value => new Date(value) > new Date()
);Third-Party Integrations
// Connect to CRM
News644Forms.onSubmit(data => {
yourCRM.post('/leads', data);
});Powerful Use Cases
E-commerce Feedback Collection
Online retailer FashionHub increased product reviews by 73% by implementing post-purchase Simple Forms with:
- Star rating widgets
- Photo upload capability
- Automatic Shopify integration
Service Industry Appointment Booking
UrbanClinic reduced no-shows by 41% using our calendar-enabled forms with:
- Real-time availability checking
- Automated SMS reminders
- Two-way Google Calendar sync
Installation Guide
A quick guide on how to start using Simple Forms News 644 .
Include CSS
Add required css file simple-forms.css to your page before closing tag </head>.
<!-- Simple Forms Styles -->
<link rel="stylesheet" href="simple-forms/css/simple-forms.css">
IMPORTANT: Please do not edit/change simple-forms.css file, use a custom css file instead.
Include JS
Add required simple-forms-translations.js and simple-forms.min.js files to your page before closing </body> tag, see example bellow.
<!-- Simple Forms Scripts -->
<script src="simple-forms/js/simple-forms-translations.js"></script>
<script src="simple-forms/js/simple-forms.min.js"></script>
Create a Form
Let's create a full featured form.
Quick Start Implementation
Copy and paste the following HTML markup into your page to get started with News644 Forms:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Form Page</title>
<!-- News644 Forms CSS -->
<link rel="stylesheet" href="css/news644-forms.min.css">
</head>
<body>
<!-- Form Container -->
<div id="news644-form-container" class="news644-form-wrapper">
<!-- Form will be automatically injected here -->
</div>
<!-- News644 Forms JS -->
<script src="js/news644-forms.min.js"></script>
<!-- Initialize Form -->
<script>
document.addEventListener('DOMContentLoaded', function() {
News644Forms.init({
container: '#news644-form-container',
formId: 'contact-form-1',
lang: 'en',
debug: true
});
});
</script>
</body>
</html>Troubleshooting Tips
If you encounter any issues:
- Check asset paths - Verify the CSS and JS files exist at the specified locations
- Inspect browser console (F12 key) for error messages
- Test basic functionality:
- Form should appear within the container div
- Try submitting with invalid data to see validation messages
- Check network tab for failed resource loading
- Common solutions:
- Adjust asset paths (e.g., change "css/" to "../assets/css/")
- Ensure jQuery (if required) is loaded before news644-forms.min.js
- Verify there are no JavaScript conflicts
File Structure Recommendation
your-website/
├── index.html
├── css/
│ └── news644-forms.min.css
├── js/
│ └── news644-forms.min.js
└── assets/
├── images/
└── fonts/Next Steps After Implementation
- Customize the form through the configuration file
- Add your own CSS overrides for branding
- Set up form submission handling
- Test across different devices and browsers
Form HTML Markup:
<!-- Required Form Wrapper -->
<div class="sf-wrapper">
<!-- Form -->
<form id="contact-form" class="simple-form" action="simple-forms/sendmail.php" method="post">
<!-- Form Header -->
<div class="form-heading">
<h4>Contact US</h4>
<p>
We are here to help.
</p>
</div>
<!-- Form Header -->
<div class="grid">
<div class="grid-col-md-6">
<label>
<input type="text" name="name" value="" class="validate-name" min="2" placeholder="Name*" required>
</label>
</div>
<div class="grid-col-md-6">
<label>
<input type="text" name="phone" class="validate-phone" placeholder="Phone*" required>
</label>
</div>
</div>
<label>
<input type="text" name="email" class="validate-email" value="" placeholder="E-mail address*">
</label>
<label>
<input type="text" name="url" class="validate-email" value="" placeholder="Social Profile">
</label>
<label>
<input type="date" name="date" class="validate-email" value="" placeholder="Pick a date">
</label>
<label>
<select name="subject" title="demo" required>
<option value="">Choose subject</option>
<option value="Support">Support</option>
<option value="Offer">Special offer</option>
<option value="Offer">Other</option>
</select>
</label>
<label>
<textarea name="message" placeholder="Write your message here ..." required></textarea>
</label>
<!-- Drag & Drop Files Uploading -->
<div class="simple-files">
<label class="simple-file-label">
<input type="file" name="files[]" multiple>
<span class="simple-files-trigger"><strong>Select</strong> or drop files here.</span>
</label>
</div>
<div class="form-submit text-center">
<button type="submit">Send now</button>
</div>
<!-- Consent Checkbox -->
<div class="consent">
<label class="custom-checkbox-label">
<input type="checkbox" class="simple-consent-checkbox" name="consent" value="agree" required="" checked>
<span class="custom-checkbox-button"></span>
By clicking the “Send now” button you agree to our <a href="#">Terms and Conditions</a>.
</label>
</div>
<!-- Error & Info messages will show here -->
<div class="server-response"></div>
</form>
</div>Basic Form Configuration
To get started with Simple Forms a minimum configuration is required.
See bellow a basic form configuration example.
Basic configuration example
Paste the code bellow into your web page to configure your form.
Please follow the comments for available options.
<script>
var simple_forms = new SimpleForms("#contact-form", {
lang: "en", // language for error/info strings
theme: "white", // form color theme, options: white | dark | purple | red | green | blue | faded-light | faded-dark
style: "underline", // form fields style, options: none | underline | classic | classic-rounded | modern | modern-rounded
files: {
enabled: true,
extensions: "gif jpg jpeg png pdf doc docx",
min: 0,
max: 10,
maxFileSize: 24, // Max allowed file size in MB, recommended size: 24
filesUploadHandler: "simple-forms/files-upload-handler.php", // path to files upload handler, default: simple-forms/files-upload-handler.php
},
});
</script>
NOTE: Replace #contact-form in first line with your form ID.
To bind multiple forms use class selector instead of ID.
Advanced Configuration
For more flexibility and customization please see all available options.
Advanced Form Configuration
For maximum flexibility and customization, Simple Forms offers extensive configuration options. Below is a comprehensive example showcasing advanced setup possibilities.
Complete Configuration Example
News644Forms.init({
// Core Settings
formId: 'advanced-contact-form',
container: '#form-container',
method: 'POST',
action: 'https://api.yoursite.com/submit',
// Validation Configuration
validation: {
live: true, // Validate on keyup
focusError: true, // Focus first invalid field
errorDisplay: 'tooltip', // or 'inline'
rules: {
email: {
required: true,
email: true,
message: 'Valid email required'
}
}
},
// File Uploads
fileUpload: {
enabled: true,
maxFiles: 3,
maxSize: 5, // MB
allowedTypes: ['jpg', 'png', 'pdf'],
dragDrop: true
},
// CAPTCHA Settings
captcha: {
type: 'slider', // or 'none', 'math', 'recaptcha'
difficulty: 'medium'
},
// AJAX & Submission
ajax: {
timeout: 10000, // 10 seconds
beforeSend: function() {
// Custom pre-submission logic
},
success: function(response) {
// Handle successful submission
}
},
// Localization
lang: 'en',
customMessages: {
required: 'This field cannot be left blank'
},
// UI/UX Customization
ui: {
theme: 'dark', // or 'light', 'custom'
animations: true,
loadingIndicator: 'spinner' // or 'bar', 'none'
},
// Debugging
debug: false,
// Advanced Features
conditionalFields: {
'newsletter-optin': {
shows: ['newsletter-frequency'],
hides: ['unsubscribe-reason']
}
},
// Analytics
tracking: {
gaEvent: 'FormSubmission',
fbPixel: 'LeadSubmission'
}
});Configuration Options Breakdown
Core Settings
| Option | Type | Description |
|---|---|---|
| formId | string | Unique identifier for the form |
| container | string | CSS selector for form placement |
| method | string | HTTP method (GET/POST) |
| action | string | Submission endpoint URL |
Validation Options
| Option | Type | Description |
|---|---|---|
| validation.live | boolean | Real-time validation as user types |
| validation.focusError | boolean | Auto-focus first invalid field |
| validation.errorDisplay | string | How errors appear (tooltip/inline) |
Advanced Features
Conditional Logic
conditionalFields: {
'employment-status': {
shows: ['employer-name', 'job-title'],
hides: ['unemployment-duration'],
values: ['employed']
}
}Custom Event Hooks
hooks: {
preInit: function() {
// Runs before form initialization
},
postRender: function() {
// Runs after form renders
},
preSubmit: function(formData) {
// Modify data before submission
return formData;
}
}Best Practices
- Store configurations in separate JSON files for complex forms
- Use environment variables for API endpoints
- Implement feature flags for gradual rollouts
- Version your form configurations
- Document custom configurations thoroughly
Troubleshooting
- Verify JSON syntax for complex configurations
- Check browser console for initialization errors
- Test individual features in isolation
- Validate API responses match expected formats
- Monitor performance with many conditional fields
<script>
var simple_forms = new SimpleForms("#contact-form", {
action: "simple-forms/sendmail.php", // set form action attribute, default value: simple-forms/sendmail.php
lang: "en", // language for error/info strings
theme: "white", // form color theme, options: white | dark | purple | red | green | blue | faded-light | faded-dark
style: "underline", // form fields style, options: none | underline | classic | classic-rounded | modern | modern-rounded
ajaxSubmit: true, // send form using AJAX (no page reload)
validate: true, // enable form fields validation
validateOnKeyup: true, // validate form fields On KeyUp Event
browserValidation: false, // use browser validation
tooltips: true, // show validation errors as tooltips, if false will show errors as strings bellow the field
showErrors: true, // show validation errors
responseOverlay: false, // show errors in overlay (cover the form)
focusErrorFields: true, // focus error fields on form submit
debug: true, // enable debugging mode (will show errors in browser console)
hideFormAfterSubmit: false, // hide the form after submit
customSuccessMessage: "", // overwrite server response with a custom message
formCSS: "", // add css styles to the form, example: box-shadow: none;
files: {
enabled: true, // enable files uploading
extensions: "jpg jpeg svg png", // allowed extensions
min: 0, // min required files count
max: 10, // max allowed files count
maxFileSize: 24, // max file item size in MB
filesUploadHandler: "simple-forms/files-upload-handler.php", // files upload handler, default: simple-forms/files-upload-handler.php
},
redirect: {
enabled: true, // enable redirect after form submit
url: "success.html", // url to redirect to
timeout: 3 // redirect timeout (seconds), leave 0 for instant redirect
},
captcha: {
enabled: true, // enable captcha
type: "math", // set captcha type, options: math | recaptcha-v2
siteKey: "", // recaptcha V2 SITE KEY, generate here: https://www.google.com/recaptcha/admin/create
theme: "" // recaptcha theme color, options: light | dark
},
accessibility: {
escapeReset: true, // press ESC key to reset/clear all form fields and files
tabHighlight: true // press tab to highlight form fields
},
consent: true, // enable submit button after consent checkbox is checked
validator: {
rules: { // add custom validation rules
".validate-name": { // select form field with class .validate-name
required: true, // add required attribute to form field
min: 2, // set field min attribute
max: 30, // set field max attribute
name: true // attach NAME validation
},
".validate-phone": {
required: true,
min: 8,
max: 14,
phone: true // attach PHONE validation
},
".validate-email": {
required: true,
min: 8,
email: true // attach EMAIL validation
},
".validate-url": {
required: true,
min: 5,
url: true // attach URL validation
},
".validate-date": {
required: true,
min: 6,
date: true // attach DATE validation
}
}
},
});
</script>
Simple Forms Parameters Description
Parameters above are described in the table bellow. Everything you need to do with your form is probably described here.
| Name | Type | Default | Description |
|---|---|---|---|
| action | string | simple-forms/sendmail.php |
Set form action attribute <form action="...">
|
| lang | string | en | Set language for error/info strings |
| theme | string | white |
Set form color theme, options: white | dark | purple | red | green | blue | faded-light | faded-dark
|
| style | string | underline |
Set form fields style, options: underline | classic | classic-rounded | modern | modern-rounded | none | custom
|
| customSuccessMessage | string | empty string | I provided will overwrite server response with a custom message |
| formCSS | string | empty string | Add css styles to the form, example: box-shadow: none; |
| ajaxSubmit | boolean | true | Send form using AJAX (no page reload) |
| validate | boolean | true | Enable form fields validation |
| validateOnKeyup | boolean | true | Validate form fields On KeyUp Event |
| browserValidation | boolean | false | Use browser validation |
| tooltips | boolean | true | Show validation errors as tooltips, if false will show errors as strings bellow the field |
| showErrors | boolean | true | Show validation errors |
| responseOverlay | boolean | false | show errors in a overlay with additional status icon |
| focusErrorFields | boolean | true | focus error fields on form submit |
| debug | boolean | true | Enable debugging mode (will show errors in browser console) |
| hideFormAfterSubmit | boolean | false | Hide the form after submit |
| consent | boolean | false | Enable submit button after consent checkbox is checked |
| files | object | true |
Enable files uploading
|
| redirect | object | false |
Enable redirect after form submit
|
| captcha | object | false |
Enable captcha
|
| accessibility | object | false |
Set accessibility options
|
| validator | object | object |
Add custom validation rules
|