• Ik heb deze code

    <?php
    
    /** Plugin Name: mycustomForm
    
     * Plugin URI: none
    
     * Description: Test.
    
     * Version: 0.1
    
     * Author: Roelof Wobben
    
     * Author URI: none
    
     **/
    
    class mycustomForm {
    
        public function __construct() {
    
            // add assests(js,css , etc)
    
            add_action('wp_enqueue_scripts', array($this, 'load_assets'));
    
            // add shortcode
    
            add_shortcode('contact_form', array($this, 'load_shortcode'));
    
            // add validation
    
            add_action( 'admin_post_submit_contact_form', 'process_contact_form' );
    
            add_action( 'admin_post_nopriv_submit_contact_form', 'process_contact_form' );
    
        }
    
        public function load_assets() {
    
            wp_enqueue_style(
    
                'mycustomForm',
    
                plugin_dir_url(__FILE__) . '/css/mycustomForm.css',
    
                array(),
    
                1,
    
                'all'
    
            );
    
            wp_enqueue_script(
    
                'mycustomForm',
    
                plugin_dir_url(__FILE__) . '/js/mycustomForm.js',
    
                array(),
    
                1,
    
                true
    
            );
    
        }
    
        public function load_shortcode($atts) {
    
            $default = array (
    
                "subject" => ""
    
            );
    
            $a = shortcode_atts($default, $atts);
    
            ob_start();
    
            ?>
    
            <div class="container">
    
                <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
    
                <input type="hidden" name=“action” value="process_contact_form">
    
                    <h1>Contact Form</h1>
    
                    <div class="form-group">
    
                        <input type="text" value="<?php echo $a['subject'] ?>" />
    
                        <label for="input" class="control-label">Subject</label></i>
    
                    </div>
    
                    <div class="form-group">
    
                        <input type="text" />
    
                        <label for="input" class="control-label">Email</label><i class="bar"></i>
    
                    </div>
    
                    <div class="form-group">
    
                        <textarea></textarea>
    
                        <label for="textarea" class="control-label">Message</label><i class="bar"></i>
    
                    </div>
    
                    <div class="button-container">
    
                        <button type="submit" class="button"><span>Submit</span></button>
    
                    </div>
    
                </form>
    
            </div>
    
            <?php
    
            return ob_get_clean();
    
        }
    
        function process_contact_form() {
    
            echo "Form is beiing validated";
    
            // Verify the nonce
    
            if ( !isset( $_POST['contact_form_nonce'] ) || !wp_verify_nonce( $_POST['contact_form_nonce'], 'submit_contact_form' ) ) {
    
                // Nonce verification failed; handle the error
    
                echo "Something went wrong here";
    
            }
    
            // Process the form submission
    
            // Your form processing code here
    
        }
    
    }
    
    new mycustomForm();

    Maar ik merk dat als ik de submit button indruk , de validatie functie niet aangeroepen wordt.

    Wat heb ik verkeerd gedaan ?

    • Dit onderwerp is gewijzigd 5 maanden, 1 week geleden door roelof.
3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • Guido

    (@guido07111975)

    Hoi Roelof,

    Ik krijg het op deze manier ook niet werkend. Functie process_contact_form() moet aangeroepen worden op het moment dat je op submit drukt, maar dat kan niet middels het toevoegen van een hidden input zoals je nu hebt gedaan. Ik heb zelf een contact formulier waar alles binnen de shortcode functie gebeurt. In jouw geval binnen functie load_shortcode().

    Guido

    Thread starter roelof

    (@roelof)

    oke

    Ik heb vandaag een video gevonden waar ajax wordt gebruikt maar er zijn een paar zaken die me daarin niet echt bevallen.

    de PHP file ziet er nu zo uit

    <?php
    
    /**
    
     * Plugin Name: RW ajax form
    
     * Description : my solution to a wpchellange challenge to make a shortcode form
    
     **/
    
    function rw_contact_form ($atts) {
    
        $a = shortcode_atts( array(
    
            'subject' => '',
    
        ), $atts );
    
        $content = '' ;
    
        $content .= '<div class="container">';
    
        $content .= '<h1>Contact Form</h1>';
    
        $content .= ' <div class="form-group">';
    
        $content .= ' <input type="text" value="' . $a['subject'] . '" id="subject" />';
    
        $content .= '<label for="input" class="control-label">Subject</label>' ;
    
        $content .= '</div>';
    
        $content .= ' <div class="form-group">';
    
        $content .= ' <input type="email" value="' . $a['email'] . '"  id="email" />';
    
        $content .= '<label for="input" class="control-label">Email</label>' ;
    
        $content .= '</div>';
    
        $content .= '<div class="form-group">';
    
        $content .= '<textarea id="message"></textarea>' ;
    
        $content .= '<label for="textarea" class="control-label">Message</label>';
    
        $content .= '</div>';
    
        $content .= '<div class="button-container">';
    
        $content .= '<button type="submit" class="button"><span>Submit</span></button>';
    
        $content .= '</div>' ;
    
       return $content;
    
    }
    
    add_shortcode('contact_form', 'rw_contact_form');
    
    function load_assets() {
    
        wp_enqueue_style(
    
            'mycustomForm',
    
            plugin_dir_url(__FILE__) . '/css/mycustomForm.css',
    
            array(),
    
            1,
    
            'all'
    
        );
    
        wp_enqueue_script(
    
            'mycustomForm',
    
            plugin_dir_url(__FILE__) . '/js/mycustomForm.js',
    
            array(),
    
            1,
    
            true
    
        );
    
    }
    
    add_action('wp_enqueue_scripts', 'load_assets');
    en een js file wat er zo uitziet 


    function submit_contact_form() {     var fd = new FormData();     fd.append('FormSubmit', '1');     fd.append('subject', '#subject');     fd.append('email', '#emai');     fd.append('message', '#message');     js_submit(fd, 'submit_contact_form_callback'); } function js_submit(fd, callback) {     var submitUrl = 'localhost/wp-content/plugins/mycustomForm/process';     $.ajax({url: submitUrl,type:'post',data:fd,contentType:false,processData:false,success:function(response){ callback(response); },}); } function submit_contact_form_callback(data) {     var jdata = json.parse(data);     // do something with the data. }

    Waar ik niet blij van wordt is de js_submit functie.
    Daar is nu een url hard-coded en jquery gebruikt om een post request te doen.
    Kun je me daarmee helpen ?

    Guido

    (@guido07111975)

    Hoi,

    Helaas, heb slechts zeer beperkte kennis van jQuery / JavaScript.

    Guido

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)