Auto-Form-Fill is a powerful tool designed to automatically fill forms on web pages. It simplifies and speeds up the process of form completion by automatically populating form fields with predefined data. The tool is highly configurable and can adapt to various forms and scenarios, ensuring seamless integration and operation.
- Automatic Form Filling: Detects form fields on the current web page and fills them with predefined data.
- Highly Configurable: Allows users to set and modify form field data according to their needs.
- Adaptive: Can handle different types of forms and input fields.
- User-Friendly: Simple interface for configuration and management.
To install Auto-Form-Fill, follow these steps:
-
Install:
npm i auto-form-fill
To use Auto-Form-Fill, you need to configure it according to your form's structure. Here is a step-by-step guide:
-
Wrap Your Page with
<AutoFillWrapper>
:- Ensure your HTML page is wrapped with
<AutoFillWrapper>
to enable the auto-fill functionality.
import { AutoFillWrapper } from "auto-form-filler" <AutoFillWrapper> <!-- Your existing HTML content --> </AutoFillWrapper>
- Ensure your HTML page is wrapped with
If you've made changes to auto-form-filler
during development and want to see those changes reflected in your Next.js project, you can update your scripts as follows:
-
Restart Development Server: Run the following script to restart the development server when changes are detected in
auto-form-filler
. This script will reinstall dependencies and restart the development server."restart-dev": "echo 'Changes detected in auto-form-filler' && pnpm install && pnpm run dev"
-
Watch for Changes: Use the
watch
script to automatically restart the development server whenever changes are detected inauto-form-filler
."watch": "npx nodemon --watch node_modules/auto-form-filler/dist --ext js,jsx,ts,tsx --exec \"pnpm run restart-dev\""
To reference the local auto-form-filler
package during development, update the auto-form-filler
entry in your package.json
file to point to the local file path. For example:
"auto-form-filler": "file:/Users/bibek.magar/Documents/Work/auto-form-npm"
Make sure to update your next.config.js
file with the following changes:
const path = require('path');
...
const nextConfig = {
...
webpack: (config, { dev, isServer }) => {
if (dev && !isServer) {
const autoFormFillerPath = path.resolve(__dirname, 'node_modules/auto-form-filler/dist');
config.watchOptions = {
ignored: /node_modules\/(?:[\\]+|\/)+(?!auto-form-filler)/,
};
config.module.rules.push({
test: /\.(?:js|jsx|ts|tsx)$/,
include: [autoFormFillerPath],
use: [
{
loader: 'babel-loader',
options: {
presets: ['next/babel'],
},
},
],
});
}
return config;
},
};
module.exports = withSentryConfig(nextConfig, ...);
To add new fields to the configuration:
- Identify the form field's name or ID on the web page.
- Add the field and its corresponding data to the
config.json
file.
Auto-Form-Fill supports dynamic data changes through an API. For more advanced configurations, refer to the API documentation provided in the repository.
This project is licensed under the MIT License. See the LICENSE file for details.
Thank you for using Auto-Form-Fill! We hope it makes your form-filling tasks easier and more efficient.