Add Support for Custom Forms in WordPress Easily

How to add custom forms in wordpress; 
Best wordpress plugins for custom forms; 
Create custom forms wordpress tutorial; 
Wordpress custom form builder plugin; 
Add custom registration form wordpress; 
Wordpress custom form support; 
Custom form plugin wordpress free; 
Wordpress custom form examples; 
Troubleshoot wordpress custom forms; 
Wordpress custom form integration; 

Explanation

To add a custom form to your WordPress site, you can use a shortcode. This code snippet creates a simple form with fields for a name and email. You can place this form anywhere on your site using the shortcode [wp_dudecom_custom_form].

Form Submission:

When someone submits the form, the code checks for a hidden field to ensure it's a valid submission.
It also uses a security check called a nonce to prevent unauthorized submissions.
Once validated, it sanitizes the input to keep your site secure.
The form data can be processed, such as sending an email to the site admin with the submitted details.
After processing, users are redirected to a thank-you page.

Styling and Scripts:

The code includes styles and scripts for the form, which are only loaded on pages or posts where they are needed.
Make sure you have the corresponding CSS and JavaScript files in your theme's directory to style and enhance the form's functionality.

This setup allows you to easily integrate a custom form into your WordPress site without needing a plugin, giving you more control over its appearance and behavior.

Code

<?php
// Add a custom form shortcode
function wp_dudecom_custom_form_shortcode() {
    ob_start();
    ?>
    <form id="wp-dudecom-custom-form" method="post" action="">
        <label for="wp-dudecom-name">Name:</label>
        <input type="text" id="wp-dudecom-name" name="wp-dudecom-name" required>
        
        <label for="wp-dudecom-email">Email:</label>
        <input type="email" id="wp-dudecom-email" name="wp-dudecom-email" required>
        
        <input type="hidden" name="wp_dudecom_form_submitted" value="1">
        <?php wp_nonce_field('wp_dudecom_custom_form', 'wp_dudecom_custom_form_nonce'); ?>
        
        <input type="submit" value="Submit">
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('wp_dudecom_custom_form', 'wp_dudecom_custom_form_shortcode');

// Handle form submission
function wp_dudecom_handle_form_submission() {
    if (isset($_POST['wp_dudecom_form_submitted']) && $_POST['wp_dudecom_form_submitted'] == '1') {
        if (!isset($_POST['wp_dudecom_custom_form_nonce']) || !wp_verify_nonce($_POST['wp_dudecom_custom_form_nonce'], 'wp_dudecom_custom_form')) {
            wp_die('Security check failed');
        }

        $name = sanitize_text_field($_POST['wp-dudecom-name']);
        $email = sanitize_email($_POST['wp-dudecom-email']);

        // Process form data (e.g., send email, save to database)
        // Example: Send an email
        $to = get_option('admin_email');
        $subject = 'New Form Submission';
        $message = 'Name: ' . $name . "\n" . 'Email: ' . $email;
        $headers = array('Content-Type: text/plain; charset=UTF-8');

        wp_mail($to, $subject, $message, $headers);

        // Redirect to a thank you page or display a success message
        wp_redirect(home_url('/thank-you'));
        exit;
    }
}
add_action('init', 'wp_dudecom_handle_form_submission');

// Enqueue necessary scripts and styles
function wp_dudecom_enqueue_custom_form_scripts() {
    if (is_page() || is_single()) {
        wp_enqueue_style('wp-dudecom-custom-form-style', get_template_directory_uri() . '/css/wp-dudecom-custom-form.css');
        wp_enqueue_script('wp-dudecom-custom-form-script', get_template_directory_uri() . '/js/wp-dudecom-custom-form.js', array('jquery'), null, true);
    }
}
add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_custom_form_scripts');
?>

Instructions

File Location: Add the code to your theme's functions.php file or a custom plugin file.

Prerequisites:

Basic understanding of WordPress file editing.
Access to your WordPress theme files or plugin directory.
Ensure you have a backup of your site before making changes.

Implementation Steps:

Access Your WordPress Files: Use an FTP client or your hosting provider's file manager to access your WordPress installation.
Edit the functions.php File: Navigate to wp-content/themes/your-theme/functions.php and open it for editing.
Insert the Code: Copy and paste the provided code snippet into the functions.php file. Ensure it's placed before the closing ?> tag if it exists.
Create CSS and JavaScript Files: In your theme directory, create a css folder and a js folder if they don't exist. Add your custom styles in wp-dudecom-custom-form.css and any JavaScript in wp-dudecom-custom-form.js.
Use the Shortcode: Add the shortcode [wp_dudecom_custom_form] to any post or page where you want the form to appear.
Test the Form: Visit the page where you added the shortcode to ensure the form displays correctly and submissions are processed as expected.

If you need help with implementation or require more advanced functionality, consider using the services of wp-dude.com.

Add Support for Custom Forms in WordPress Easily

Explanation

Code

Instructions

See More

Add Support for Custom Page Templates in WordPress Easily

Disable Automatic Tag Addition in WordPress Posts

How to Add Custom Taxonomies in WordPress Easily