# RATEC Contact Form - Configuration & Customization Guide
## 🎨 Customization Options
### Change Email Recipients
**Option 1: Using WordPress Settings (Recommended)**
1. Go to WordPress Dashboard → Settings → General
2. Change "Administrator Email Address"
3. All form submissions will go to this email
**Option 2: Using WordPress filter**
Add this to your theme's `functions.php`:
```php
add_filter('pre_option_admin_email', function($email) {
return 'your-custom-email@example.com';
});
```
**Option 3: Edit the plugin directly**
Edit `includes/form-handler.php`, line 36:
```php
$admin_email = 'your-email@example.com'; // Change this
```
---
## 🎯 Common Customizations
### Add Additional Form Fields
**Example: Add a company name field**
1. Open `ratec-contact-form.php`
2. Find the phone number section (around line 90)
3. Add this code after it:
```php
```
4. Open `includes/form-handler.php`
5. Add after line 22:
```php
$company = isset( $_POST['company'] ) ? sanitize_text_field( $_POST['company'] ) : '';
```
6. Add to email body around line 67:
```php
$email_body .= "Company: " . $company . "\n";
```
### Change Form Colors
Open `assets/css/style.css` and find these color values:
```css
/* Primary color - button and focus states */
background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
/* Background gradient */
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
/* Text colors */
color: #1a2332; /* Dark text */
color: #6c757d; /* Gray text */
color: #4a90e2; /* Blue accent */
```
### Change Form Width
Open `assets/css/style.css`, find:
```css
.ratec-cf-wrapper {
max-width: 600px; /* Change this value */
}
```
### Change Font
Open `assets/css/style.css`, find:
```css
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', Arial, sans-serif;
```
Replace with your desired font, for example:
```css
font-family: 'Poppins', sans-serif;
```
---
## ✉️ Email Customization
### Change Admin Notification Email
Edit `includes/form-handler.php`, around line 59:
```php
// Customize the email subject
$email_subject = 'New Contact: ' . $subject; // Change format
// Customize the email body
$email_body = "New message from your website:\n\n";
// Add your custom text here
```
### Change User Confirmation Email
Edit `includes/form-handler.php`, around line 80:
```php
$user_email_subject = 'Thank you for reaching out';
$user_email_body = "Hi " . $name . ",\n\n";
$user_email_body .= "Your custom message here...\n\n";
```
### Add Logo to Email
Add this to the email body:
```php
$email_body = "\n";
```
---
## 🔧 Validation Customization
### Required Fields
Currently required fields are:
- Name
- Email
- Subject
- Message
To make phone required, edit `assets/js/script.js`:
```javascript
if (!phone) {
showError('phone', 'Please enter your phone number.');
isValid = false;
}
```
### Email Validation
The plugin uses basic regex for emails:
```javascript
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
```
To use stricter validation, replace with:
```javascript
const emailRegex = /^[^\s@]+@[^\s@]+\.[a-z]{2,}$/i;
```
### Add Phone Validation
Edit `assets/js/script.js`:
```javascript
if (phone && !isValidPhone(phone)) {
showError('phone', 'Please enter a valid phone number.');
isValid = false;
}
function isValidPhone(phone) {
const phoneRegex = /^\d{10}$/; // 10 digits
return phoneRegex.test(phone.replace(/\D/g, ''));
}
```
---
## 🎨 Design Customization
### Button Styling Changes
Edit `assets/css/style.css`:
```css
.ratec-cf-submit {
/* Change colors */
background: #your-color;
/* Change rounded corners */
border-radius: 25px; /* More rounded */
/* Change width */
width: 100%; /* Full width */
/* Change text */
text-transform: capitalize; /* Instead of uppercase */
}
```
### Input Field Styling
```css
.ratec-cf-input,
.ratec-cf-textarea {
/* Change border thickness */
border: 3px solid #e0e6ed;
/* Change border color */
border-color: #your-color;
/* Change background */
background-color: #f0f0f0;
/* Change border radius */
border-radius: 15px;
/* Change padding */
padding: 20px;
}
```
### Message Box Styling
```css
.ratec-cf-message-box.success {
background: #d4edda; /* Success color */
color: #155724; /* Text color */
border: 1px solid #c3e6cb;
}
.ratec-cf-message-box.error {
background: #f8d7da; /* Error color */
color: #721c24; /* Text color */
border: 1px solid #f5c6cb;
}
```
---
## 🎯 Advanced Configuration
### Filter Form Data Before Sending
Edit `includes/form-handler.php`:
```php
// After validation, before sending email
$name = apply_filters('ratec_cf_form_name', $name);
$email = apply_filters('ratec_cf_form_email', $email);
$message = apply_filters('ratec_cf_form_message', $message);
```
Then in your theme's `functions.php`:
```php
add_filter('ratec_cf_form_message', function($message) {
// Transform message before sending
return strtoupper($message);
});
```
### Add Custom Attachments to Email
Edit `includes/form-handler.php`:
```php
$attachments = array();
if (isset($_FILES['attachment'])) {
// Handle file upload
$attachments[] = $_FILES['attachment']['tmp_name'];
}
wp_mail($admin_email, $email_subject, $email_body, $headers, $attachments);
```
### Disable Confirmation Email to User
Comment out or remove this section in `includes/form-handler.php`:
```php
// wp_mail( $email, $user_email_subject, $user_email_body, $user_headers );
```
---
## 🚀 Performance Tips
1. **Minimize CSS/JS** - Remove unused styles and code
2. **Cache** - Use WordPress caching plugins
3. **Lazy Load** - Don't load form assets on all pages
4. **Optimize Images** - If adding logo to emails
---
## 🔐 Security Enhancements
### Rate Limiting
Add to `includes/form-handler.php`:
```php
$transient_key = 'ratec_cf_submit_' . $_SERVER['REMOTE_ADDR'];
if (get_transient($transient_key)) {
wp_send_json_error(array('message' => 'Please wait before submitting again.'));
}
set_transient($transient_key, true, 60); // 1 minute cooldown
```
### Email Verification
Add to `includes/form-handler.php`:
```php
// Send verification email before confirming submission
$verification_code = md5($email . time());
// Send email with verification link
```
---
## 📝 Testing Customizations
1. **Always backup** the original plugin files
2. **Test on staging** before production
3. **Check email delivery** - Mail might go to spam
4. **Mobile test** - Verify responsive design still works
5. **Cross-browser test** - Test on different browsers
---
## ❓ Troubleshooting Customizations
**Issue: Changes not showing**
- Clear browser cache (Ctrl+Shift+Delete)
- Clear WordPress plugin cache
- Hard refresh (Ctrl+Shift+R)
**Issue: Form not submitting after changes**
- Check browser console for JavaScript errors
- Check WordPress error log
- Verify PHP syntax with PHP linter
**Issue: Emails not sending**
- Check mail function in `form-handler.php`
- Verify admin email is set correctly
- Test email with simple WordPress mail test plugin
---
## 📚 Need More Help?
1. Read the main README.md
2. Check WordPress Codex: https://developer.wordpress.org/
3. Test features one at a time
4. Use browser dev tools (F12) to debug JavaScript
---
**Happy Customizing! 🎉**
\n";
```
---
## 🔧 Validation Customization
### Required Fields
Currently required fields are:
- Name
- Email
- Subject
- Message
To make phone required, edit `assets/js/script.js`:
```javascript
if (!phone) {
showError('phone', 'Please enter your phone number.');
isValid = false;
}
```
### Email Validation
The plugin uses basic regex for emails:
```javascript
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
```
To use stricter validation, replace with:
```javascript
const emailRegex = /^[^\s@]+@[^\s@]+\.[a-z]{2,}$/i;
```
### Add Phone Validation
Edit `assets/js/script.js`:
```javascript
if (phone && !isValidPhone(phone)) {
showError('phone', 'Please enter a valid phone number.');
isValid = false;
}
function isValidPhone(phone) {
const phoneRegex = /^\d{10}$/; // 10 digits
return phoneRegex.test(phone.replace(/\D/g, ''));
}
```
---
## 🎨 Design Customization
### Button Styling Changes
Edit `assets/css/style.css`:
```css
.ratec-cf-submit {
/* Change colors */
background: #your-color;
/* Change rounded corners */
border-radius: 25px; /* More rounded */
/* Change width */
width: 100%; /* Full width */
/* Change text */
text-transform: capitalize; /* Instead of uppercase */
}
```
### Input Field Styling
```css
.ratec-cf-input,
.ratec-cf-textarea {
/* Change border thickness */
border: 3px solid #e0e6ed;
/* Change border color */
border-color: #your-color;
/* Change background */
background-color: #f0f0f0;
/* Change border radius */
border-radius: 15px;
/* Change padding */
padding: 20px;
}
```
### Message Box Styling
```css
.ratec-cf-message-box.success {
background: #d4edda; /* Success color */
color: #155724; /* Text color */
border: 1px solid #c3e6cb;
}
.ratec-cf-message-box.error {
background: #f8d7da; /* Error color */
color: #721c24; /* Text color */
border: 1px solid #f5c6cb;
}
```
---
## 🎯 Advanced Configuration
### Filter Form Data Before Sending
Edit `includes/form-handler.php`:
```php
// After validation, before sending email
$name = apply_filters('ratec_cf_form_name', $name);
$email = apply_filters('ratec_cf_form_email', $email);
$message = apply_filters('ratec_cf_form_message', $message);
```
Then in your theme's `functions.php`:
```php
add_filter('ratec_cf_form_message', function($message) {
// Transform message before sending
return strtoupper($message);
});
```
### Add Custom Attachments to Email
Edit `includes/form-handler.php`:
```php
$attachments = array();
if (isset($_FILES['attachment'])) {
// Handle file upload
$attachments[] = $_FILES['attachment']['tmp_name'];
}
wp_mail($admin_email, $email_subject, $email_body, $headers, $attachments);
```
### Disable Confirmation Email to User
Comment out or remove this section in `includes/form-handler.php`:
```php
// wp_mail( $email, $user_email_subject, $user_email_body, $user_headers );
```
---
## 🚀 Performance Tips
1. **Minimize CSS/JS** - Remove unused styles and code
2. **Cache** - Use WordPress caching plugins
3. **Lazy Load** - Don't load form assets on all pages
4. **Optimize Images** - If adding logo to emails
---
## 🔐 Security Enhancements
### Rate Limiting
Add to `includes/form-handler.php`:
```php
$transient_key = 'ratec_cf_submit_' . $_SERVER['REMOTE_ADDR'];
if (get_transient($transient_key)) {
wp_send_json_error(array('message' => 'Please wait before submitting again.'));
}
set_transient($transient_key, true, 60); // 1 minute cooldown
```
### Email Verification
Add to `includes/form-handler.php`:
```php
// Send verification email before confirming submission
$verification_code = md5($email . time());
// Send email with verification link
```
---
## 📝 Testing Customizations
1. **Always backup** the original plugin files
2. **Test on staging** before production
3. **Check email delivery** - Mail might go to spam
4. **Mobile test** - Verify responsive design still works
5. **Cross-browser test** - Test on different browsers
---
## ❓ Troubleshooting Customizations
**Issue: Changes not showing**
- Clear browser cache (Ctrl+Shift+Delete)
- Clear WordPress plugin cache
- Hard refresh (Ctrl+Shift+R)
**Issue: Form not submitting after changes**
- Check browser console for JavaScript errors
- Check WordPress error log
- Verify PHP syntax with PHP linter
**Issue: Emails not sending**
- Check mail function in `form-handler.php`
- Verify admin email is set correctly
- Test email with simple WordPress mail test plugin
---
## 📚 Need More Help?
1. Read the main README.md
2. Check WordPress Codex: https://developer.wordpress.org/
3. Test features one at a time
4. Use browser dev tools (F12) to debug JavaScript
---
**Happy Customizing! 🎉**