Skip to Content

Contact Form 7

An example implementation of Contact Form 7 with Bootstrap 4 and Nebula styles/functionality.

May 13, 2020

Demo


Use this in the Form editor (customize as needed):

<div class="nebula-validate">
	<div class="form-group">
		<label class="form-control-label" for="cf7-your-name">Name*</label>
		[text* your-name id:cf7-your-name class:form-control class:nebula-validate-text class:crm-full_name placeholder "Enter your full name"]
	</div>
	<div class="form-group">
		<label class="form-control-label" for="cf7-your-email">Email Address*</label>
		[email* your-email id:cf7-your-email class:form-control class:nebula-validate-email class:crm-email_address placeholder "Enter your email address"]
		<div class="invalid-feedback">Please check that you have entered a valid email address.</div>
	</div>
	<div class="form-group">
		<label class="form-control-label" for="cf7-phone">Phone Number</label>
		[tel phone id:cf7-phone class:form-control class:nebula-validate-phone class:crm-phone_number placeholder "Enter your phone number"]
		<div class="invalid-feedback">Please verify you have entered a valid phone number.</div>
		<small class="form-text text-muted">This is only to show phone validation.</small>
	</div>
	<div class="form-group">
		<label class="form-control-label" for="cf7-address">Street Address</label>
		[text address id:cf7-address class:form-control class:nebula-validate-text class:crm-street_address]
	</div>
	<div class="form-row">
		<div class="form-group col-md-5">
			<label class="form-control-label" for="cf7-city">City</label>
			[text city id:cf7-city class:form-control class:nebula-validate-text class:crm-city]
		</div>
		<div class="form-group col-md-4">
			<label class="form-control-label" for="cf7-state">State</label>
			[select state id:cf7-state class:form-control class:nebula-validate-select include_blank "Alabama" "Alaska" "Arizona"]
		</div>
		<div class="form-group col-md-3">
			<label class="form-control-label" for="cf7-zipcode">Zip Code</label>
			[text zipcode id:cf7-zipcode class:form-control class:crm-zipcode]
			<div class="invalid-feedback">Please verify you have entered a valid postal code.</div>
		</div>
	</div>
	<div class="form-group">
		<label class="form-control-label" for="cf7-bday">Date of Birth</label>
		[date bday id:cf7-bday class:form-control class:nebula-validate-date class:crm-date_of_birth placeholder "Enter your date of birth"]
		<div class="invalid-feedback">Please verify you have entered a valid date.</div>
		<small class="form-text text-muted">This is only to show date validation.</small>
	</div>
	<div class="form-group">
		<label class="form-control-label" for="cf7-message">Message*</label>
		[textarea* message id:cf7-message class:form-control class:nebula-validate-textarea placeholder "Enter your message here..."]
	</div>
	<div class="nebula-drop-area">
		<div class="custom-file">
			<label class="custom-file-label" for="cf7-file-upload">Choose file...</label>
			[file file-upload id:cf7-file-upload class:custom-file-input limit:6000000 filetypes:pdf|jpg|jpeg|gif|png]
			<div class="invalid-feedback">That file may be too large or an unaccepted type.</div>
			<small class="form-text text-muted">Browse for your file or drag and drop to this area.</small>
		</div>
	</div>
	<div class="form-check">
		<label class="form-control-label" for="cf7-time">Choose your preferred time of day</label>
		[checkbox time id:cf7-time use_label_element "Morning" "Afternoon" "Evening"]
	</div>
	<div class="form-check">
		<label class="form-control-label" for="cf7-color">Choose your preferred color</label>
		[radio color id:cf7-color default:1 "Red" "Green" "Blue"]
	</div>
	<div class="form-group">
		<label class="form-control-label" for="cf7-favoriteteam">Favorite NFL Team</label>
		[select favoriteteam id:cf7-favoriteteam class:custom-select class:nebula-validate-select include_blank "Philadelphia Eagles" "Philadelphia Eagles" "Philadelphia Eagles" "Philadelphia Eagles"]
	</div>
	<div class="form-check" for="cf7-privacy-acceptance">
		[acceptance privacy-acceptance id:cf7-privacy-acceptance] I agree to the storage and handling of my data.[/acceptance]
	</div>
	[submit class:btn class:btn-brand class:notable-form "Send"]
</div>

Use this in the Mail Message Body (customize as needed):

From: [your-name] <[your-email]>
[phone]
[bday]

Message Body:
[message]

--
This e-mail was sent from a CF7 form on [_date] at [_time] from [_url]

[debuginfo]

If using the Google RECAPTCHA v3 service (whether inside of CF7 or not) the badge can be hidden if the following message appears somewhere in the user flow:

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Additional Notes

Additional documentation can be found here.

From and Reply-To

The “From” field under the “Mail” tab of the contact form needs to have an email address with a domain that matches the website. I recommend using [email protected]. This is due to DMARC policy.

Instead, add a “Reply-To:” to the Additional Settings field. The format for this should be Reply-to: [your-name] <[your-email]> and make sure those field names match what you’ve created in the form!

File Uploads (and Drag-and-Drop Uploads)

Tip: You can add multiple file fields. In the “Mail” tab, just space separate the shortcodes and it will attach all files.

Add the class nebula-drop-area to wrap the file upload input field (on a div above the custom-file div, the entire form, or even the body tag) to enable drag-and-drop uploading!

Use the class no-ui on the same element to not have inactive drop area classes (no dotted border or solid green success border on the drop area). Note: The active classes are still applied, so you’ll need to override those manually if/when desired.

Validation

Nebula includes live, soft-validation. This pre-submit validation helps assist the user without actually preventing form submission. Proper validation is done upon submitting.
Phone number validation supports many different formats.
Date validation supports both numbered format (Ex: MM/DD/YYYY) as well as textual dates (Ex: March 27, 2015).

ReCAPTCHA and Spam Prevention

Contact Form 7 now integrates with the Google reCAPTCHA API. Manage your reCAPTCHA sites here, then add the data under Contact > Integrations in the WordPress admin.

There are honeypot plugins, or you could also utilize the Comment Blacklist in the Settings > Discussion page (since CF7 listens to that). Here is a text document with many thousand keywords.

LocalStorage

Contact Form 7 forms in Nebula have built-in localstorage support, so data is saved on navigation or refresh, and data is transferred between windows/tabs for all text-based fields.

Event Tracking

Submission attempts and success will be logged in Google Analytics automatically. Nebula also reports input timing for individual form fields as well as abandonment tracking if enabled in Nebula Options as a custom dimension. Event data is labeled using the Contact Form 7 form ID (since it is not currently possible to simply retrieve the form name).

Visitor Data

Nebula can track important data in forms to store or send to a CRM. To do this, add a class to the input fields of “nv-” followed by the category of data (lowercase and underscores). For example, first name would be “class:nv-first_name“. The example here includes some of these for reference.

Debug Info

Use the special mail tag debuginfo (with square brackets) to include accompanying information from Nebula to provide additional context to the form submission. Note: A hidden text field is no longer required for debuginfo!

Submit Button

Nebula converts the submit input from <input type="submit"> to <button id="submit"> so that a more optimized (and nicer looking) spinner icon can be used (instead of the default gif). To prevent this replacement, add the class “no-button” to the submit shortcode.

Styling

Nebula disables the Contact Form 7 CSS resources in favor of Bootstrap (and it’s own style overrides). If the CF7 CSS files are desired, you can follow these instructions to re-enable them in your child theme (skip ahead to “Step 2”).

Demo



    Please check that you have entered a valid email address.


    Please verify you have entered a valid phone number.

    This is only to show phone validation.





    Please verify you have entered a valid postal code.


    Please verify you have entered a valid date.

    This is only to show date validation.



    That file may be too large or an unaccepted type.

    Browse for your file or drag and drop to this area.



    RedGreenBlue