• I have a simple contact form set up to use required fields, the markup is:

    
    <div class="form-inputs">
    
    <label>Your Title</label>
    [select title "Mr" "Mrs" "Miss" "Other"]
    
    <label>Your name</label>
    [text* fullname placeholder "Full Name"]
    
    <label>Your Telephone</label>
    [tel* telephone_number placeholder "Your Telephone"]
    
    </div>
    
    [submit "Request Call Back"]
    

    But the required fields aren’t being validated, so it’s possible to submit an empty form, which I want to avoid. I noticed in the markup on the front-end the form tag contains novalidate="novalidate" but I’m not sure where that’s coming from. Any ideas how we can get the validation/required fields working?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    Where can we see the website in question?

    Thread Starter rokkashthomas

    (@rokkashthomas)

    The site is at http://accident-helpline-uk-com.rokkhost.co.uk/

    If you click the ‘request call back’ button it will open a popup with the contact form.

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    What other plugins and theme do you use on the site?

    Thread Starter rokkashthomas

    (@rokkashthomas)

    The theme used is Hello Elementor. The active plugins are:

    – Autoptimize
    – Code Snippets
    – Contact Form 7
    – Elementor
    – Elementor Pro
    – Enable jQuery Migrate Helper
    – Favicon by RealFaviconGenerator
    – Flamingo
    – WebP Express

    We also have some custom code which connects CF7 forms to a CRM, which is as follows:

    
    add_action( 'wpcf7_init', 'wpcf7_add_form_tag_current_url' );
    function wpcf7_add_form_tag_current_url() {
        // Add shortcode for the form [current_url]
        wpcf7_add_form_tag( 'current_url',
            'wpcf7_current_url_form_tag_handler',
            array(
                'name-attr' => true
            )
        );
    }
    
    // Parse the shortcode in the frontend
    function wpcf7_current_url_form_tag_handler( $tag ) {
        global $wp;
        $url = home_url( $wp->request );
        return '<input type="hidden" name="'.$tag['name'].'" value="'.$url.'" />';
    }
    
    add_action( 'wpcf7_init', 'wpcf7_add_form_tag_show_body_parts' );
    function wpcf7_add_form_tag_show_body_parts() {
        // Add shortcode for the form [show_body_parts]
        wpcf7_add_form_tag( ['show_body_parts', 'show_mobile_body_parts'], [
            'name-attr'=> false
        ] );
    }
    
    // Change CF7 form actions to process.pl (for CRM integration)
    add_filter('wpcf7_form_action_url', 'wpcf7_custom_form_action_url');
    function wpcf7_custom_form_action_url() {
        return 'https://www.accident-helpline.uk.com/cgi-bin/process.pl';
    }
    
    add_filter( 'wpcf7_load_js', '__return_false' );
    
    // Shortcodes
    
    function show_body_parts($atts){
    	extract( shortcode_atts( array(
    		'deathness' => false,
    		'multiselect' => false,
    		'bootstrap' => false,
    		'bootstrapclass' => ''
    	), $atts ) );
    
    	$html = '';
    
    	$xml_string = file_get_contents(get_site_url(null, '/xmldata/guidelines-2020.xml'));
    
    	if ($deathness){
    		error_reporting(E_ALL);
    		ini_set('display_errors','on');
    		//most Nasty Way to do this, DOM XML doesn't appear to be avaible
    		preg_match('/<body_part id="ear">.*?<\/body_part>/s',$xml_string,$matches);
    		$ear = $matches[0];
    		$xml_string = preg_replace('/<body_part id="ear">.*?<\/body_part>/s','',$xml_string);
    		$xml_string = preg_replace('/<\/button_details>.*?<full_list>/s','</button_details><full_list>'.$ear,$xml_string);
    	}
    
    	$parts = new SimpleXMLElement($xml_string);
    
    	$isFirst = true;
    	$html .= (!$bootstrap ? '<ul>' : '');
    	foreach ($parts->full_list->body_part as $parts){
    		$attrs = $parts->attributes();
    
    		if ($multiselect) {
    			$html 	.= ($bootstrap ? '<div'.(!empty($bootstrapclass) ? ' class="'.$bootstrapclass.'"' : '').'>' : '<li>')
    					.'<label for="body_part_'.$attrs['id'].'">'
    						.'<input type="checkbox" name="body_part" id="body_part_'.$attrs['id'].'" value="'.$attrs['id'].'" />'
    						.'<span>'
    						.ucwords(preg_replace('/\s?injur(ies|y)/i','',$parts->name))
    						.'</span>'
    					.'</label>'
    					.($bootstrap ? '</div>' : '</li>')."\n";
    		} else {
    			$html 	.= ($bootstrap ? '<div'.(!empty($bootstrapclass) ? ' class="'.$bootstrapclass.'"' : '').'>': '<li>')
    					. '<label for="body_part_'.$attrs['id'].'" class="radio-inline">'
    					. '<input type="radio" name="body_part" id="body_part_'.$attrs['id'].'" value="'.$attrs['id'].'" />'
    						.'<span>'
    							.ucwords(preg_replace('/\s?injur(ies|y)/i','',$parts->name))
    						.'</span>'
    					.'</label>'
    					.($bootstrap ? '</div>' : '</li>')."\n";
    		}
    
    		$isFirst = false;
    	}
    
    	if ($multiselect){
    		$html .= ($bootstrap ? '<div'.(!empty($bootstrapclass) ? ' class="'.$bootstrapclass.'"' : '').'>': '<li>')
    				.'<label for="body_part_other">'
    					.'<input type="checkbox" name="body_part" id="body_part_other" value="other" />'
    					.'<span>Other</span>'
    				.'</label>'
    				.($bootstrap ? '</div>' : '</li>')."\n";
    	}else{
    		$html 	.= ($bootstrap ? '<div'.(!empty($bootstrapclass) ? ' class="'.$bootstrapclass.'"' : '').'>': '<li>')
    		.'<label for="body_part_other" class="radio-inline"> <input type="radio" name="body_part" id="body_part_other" value="other" /> <span>Other</span></label>'
    		.($bootstrap ? '</div>' : '</li>')."\n";
    	}
    
    	$html .= (!$bootstrap ? '</ul>' : '');
    
    	return $html;
    
    }
    
    add_shortcode('show_body_parts', 'show_body_parts');
    
    function show_mobile_body_parts($atts){
    	$vars = shortcode_atts( array(
            		'multiple' => false,
            		'drop_down_text' => 'Please Select',
            		'el_class' => false
        ), $atts );
    
    	if ($atts instanceof WPCF7_FormTag){
    		foreach ($atts->options as $key => $value) {
    			$vars[str_replace('=','',$value)] = $atts->raw_values[$key];
    		}
    	};
    
    	$html = '';
    
    	$parts = new SimpleXMLElement(file_get_contents(get_site_url(null, '/xmldata/guidelines-2020.xml')));
    
    	$class = '';
    	if ($vars['el_class']) {
    		$class = ' '.htmlentities($vars['el_class']).' ';
    	}
    
    	$isFirst = true;
    	$html .= '<select name="body_part" class="body_parts'.$class.'" '.($vars['multiple'] ? 'multiple="multiple" size="3"' : '').'>';
    	if (!$atts['multiple']){
    		$html .= '<option value="">'.$vars['drop_down_text'].'</option>'."\n";
    	}
    	foreach ($parts->full_list->body_part as $parts){
    		$attrs = $parts->attributes();
    
    		$html .= '<option value="'.$attrs['id'].'">'.ucwords(preg_replace('/\s?injur(ies|y)/i','',$parts->name)).'</option>'."\n";
    
    		$isFirst = false;
    	}
    	$html .= '<option value="other">Other</option>'."\n";
    	$html .= '</select>';
    
    	return $html;
    
    }
    
    add_shortcode('show_mobile_body_parts', 'show_mobile_body_parts');
    
    function claim_value(){
    	$html = '';
    
    	$parts = new SimpleXMLElement(file_get_contents(get_site_url(null, '/xmldata/guidelines-2020.xml')));
    
    	if (isset($_REQUEST['body_part']) && is_array($_REQUEST['body_part']) && !empty($_REQUEST['body_part']) && !$_REQUEST['body_part'][0] == ''){
    		//Do we have other in the array
    		$other = in_array('other', $_REQUEST['body_part']);
    
    		$html .= '<ul class="list_of_values">'."\n";
    			foreach ($parts->full_list->body_part as $part){
    				foreach ($_REQUEST['body_part'] as $body_part){
    					$attrs = $part->attributes();
    					if ($attrs['id'] == $body_part || $other){
    						$html .= '<li><span class="body_name_part">'.$part->name."</span><ul class='injuries'>\n";
    							foreach ($part->list->item as $item){
    								$html .= '<li>'.type_description($item).'</li>'."\n";
    							}
    						$html .= '</li></ul>';
    					}
    				}
    			}
    		$html .= '</ul>'."\n";
    	} elseif (!isset($_REQUEST['body_part']) || $_REQUEST['body_part'] == 'other' || empty($_REQUEST['body_part']) || (is_array($_REQUEST['body_part']) && $_REQUEST['body_part'][0] == '') ){
    		$html .= '<ul class="list_of_values">'."\n";
    		foreach ($parts->full_list->body_part as $part){
    			$html .= '<li><span class="body_name_part">'.$part->name."</span><ul class='injuries'>\n";
    				foreach ($part->list->item as $item){
    					$html .= '<li>'.type_description($item)."\n";
    				}
    			$html .='</ul></li>'."\n";
    		}
    		$html .= '</ul>'."\n";
    	}else{
    		foreach ($parts->full_list->body_part as $part){
    			$attrs = $part->attributes();
    
    			if ($attrs['id'] == $_REQUEST['body_part']){
    				break;
    			}
    		}
    
    		$html .= '<ul class="list_of_values">'."\n";
    		$html .= '<li><span class="body_name_part">'.$part->name."</span><ul class='injuries'>\n";
    		foreach ($part->list->item as $item){
    			$html .= '<li>'.type_description($item)."\n";
    		}
    		$html .='</ul></li>'."\n";
    		$html .= '</ul>'."\n";
    	}
    
    	return $html;
    }
    
    add_shortcode('claim_value', 'claim_value');
    
    function claim_type(){
    	$html = '';
    
    	$parts = new SimpleXMLElement(file_get_contents(get_site_url(null, '/xmldata/guidelines-2020.xml')));
    
    	if (isset($_REQUEST['body_part']) && is_array($_REQUEST['body_part']) && !empty($_REQUEST['body_part'])) {
    		$outParts = array();
    
    		foreach ($parts->full_list->body_part as $part){
    			$attrs = $part->attributes();
    
    			foreach ($_REQUEST['body_part'] as $body_part){
    				if ($attrs['id'] == $body_part){
    					$outParts[] = strtolower(trim(preg_replace('/\s?injur(ies|y)/i','',$part->name)));
    					break;
    				}
    			}
    		}
    
    		if (count($outParts) == 0){
    			return 'Injury';
    		}
    
    		if (count($outParts) == 1){
    			return $outParts[0].' injuries';
    		}
    
    		$lastone = array_pop($outParts);
    
    		return implode(', ',$outParts).' and '.$lastone.' injuries';
    
    	} elseif (isset($_REQUEST['body_part']) && $_REQUEST['body_part'] != 'other' && !empty($_REQUEST['body_part'])){
    		foreach ($parts->full_list->body_part as $part){
    			$attrs = $part->attributes();
    
    			if ($attrs['id'] == $_REQUEST['body_part']){
    				break;
    			}
    		}
    
    		$html = strtolower(trim(preg_replace('/\s?injur(ies|y)/i','',$part->name))).' ';
    	}
    
    	if (empty($html)) {
    		return 'Injury';
    	}
    
    	return $html.' injuries';
    }
    
    add_shortcode('claim_type','claim_type');
    
    function type_description($item){
    	$data = [];
    
    	$data[] = '<div class="amounts">';
    
    	if ($item->severity) $data[] = '<span class="severity">'.$item->severity.'</span>';
    
    	if ($item->title) $data[] = '<h3 class="title">'.$item->title.'</h3>';
    
    	$data[]	= '<span class="cost">'.$item->cost.'</span>';
    	$data[]	= '<p class="description">'.$item->description.'</p>';
    
    	$data[] = '</div>';
    
    	return 	implode($data);
    }
    

    As far as I can tell this code shouldn’t be adding the novalidate attribute to the forms though.

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    Try removing the custom code.

    Thread Starter rokkashthomas

    (@rokkashthomas)

    I’ve disabled the custom code but the novalidate tag is still present. I’ve left it disabled in case you need to check anything.

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    The novalidate attribute has nothing to do with your problem.

    Thread Starter rokkashthomas

    (@rokkashthomas)

    Ok, is there something else that could be causing the required fields/validation not to work then?

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    This is obviously the cause:

    // Change CF7 form actions to process.pl (for CRM integration)
    add_filter('wpcf7_form_action_url', 'wpcf7_custom_form_action_url');
    function wpcf7_custom_form_action_url() {
        return 'https://www.accident-helpline.uk.com/cgi-bin/process.pl';
    }
    
    add_filter( 'wpcf7_load_js', '__return_false' );

    What do you intend to do with it?

    Thread Starter rokkashthomas

    (@rokkashthomas)

    The wpcf7_form_action_url code is used to post the form fields to a custom script which passes the data to a CRM.

    I’m not entirely sure why we’re disabling the JS (all the custom code was inherited from a previous build). Is that the bit that would be preventing validation?

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Required fields not working’ is closed to new replies.