Contact Form 7 Elements

gistfile1.txt

// input text
[text* name class:form-control id:name placeholder "Name"]
// input phone
[tel phone class:form-control placeholder "Phone"]
// input email
[email* email class:form-control placeholder "Email"]
// select
[select* department data-placeholder:Department class:form-control class:js-select include_blank "Logistic & operation" "Brand management" "Marketing it & tech" "Product development & Innovation" "Legal" "Compliance" "Procurement" "Sales" "Strategy & planning" "Other"]
// textarea
[textarea message x1 class:form-control placeholder "Message"]
// checkbox
[checkbox* accept-personal-data-test use_label_element "I consent to process my personal data for marketing purposes."]
// radio
[radio request-type use_label_element default:1 "Information request" "Product availability" "Request return"]
// acceptance checkbox with link
[acceptance contact-us-accept-all-terms acceptance_as_validation:on] I have read the <a href='/privacy-cookies-policy' target='_blank'>Privacy & Cookies policy</a> [/acceptance]
// recaptcha
[recaptcha]
// submit
[submit class:btn class:btn-primary "Send message"]
<button class="wpcf7-form-control has-spinner wpcf7-submit btn btn-primary" type="submit">Send message</button>

// * - it is required
// for ReCaptcha 2 - install plugin ReCaptcha v2 for Contact Form 7
// for custom checkbox and radio html structure use this:

// ADJUST CF7 RADIOS AND CHECKBOXES TO MATCH CUSTOM HTML STRUCTURE ================================================================
add_filter("wpcf7_form_elements", function ($content) {
	$content = preg_replace(
		'/<label><input type="(checkbox|radio)" name="(.*?)" value="(.*?)" \/><span class="wpcf7-list-item-label">(.*?)<\/span><\/label>/i',
		'<label class="\1-custom">
			<input type="\1" name="\2" value="\3" class="\1-custom__input" />
			<span class="\1-custom__item">
				<span class="\1-custom__checkmark"></span>
				<span class="\1-custom__text wpcf7-list-item-label">\4</span>
			</span>
		</label>',
		$content
	);

	return $content;
});

// clear cf7 after success submit
const contactForm = $('.wpcf7-form');

if (contactForm.length) {
	contactForm[0].addEventListener( 'wpcf7mailsent', function( event ) {
		contactForm.trigger('reset');
	}, false);
}

// letter html structure
<h2>You have received a letter!</h2>

<table style='width: 100%;'>
  <tr>
    <td style='padding: 10px; border: #e9e9e9 1px solid;'><b>Name:</b></td>
    <td style='padding: 10px; border: #e9e9e9 1px solid;'>[name]</td>
  </tr>
</table>

<p>This e-mail was sent from <b>[_site_title]</b> ([_site_url])</p>