Demo
Use this in the Form editor (customize as needed):
<div class="nebula-validate"> <div class="nebula-form-group"> <label class="form-label" for="your-name">Name*</label> [text* your-name id:your-name class:form-control class:nebula-validate-text class:crm-full_name autocomplete:name placeholder "Enter your full name"] </div> <div class="nebula-form-group"> <label class="form-label" for="your-email">Email Address*</label> [email* email id:your-email class:form-control class:nebula-validate-email class:crm-email_address autocomplete:email placeholder "Enter your email address"] <div class="invalid-feedback">Please check that you have entered a valid email address.</div> </div> <div class="nebula-form-group"> <label class="form-label" for="your-phone">Phone Number</label> [tel phone id:your-phone class:form-control class:nebula-validate-phone class:crm-phone_number autocomplete:tel 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="nebula-form-group"> <label class="form-label" for="your-address">Street Address</label> [text address id:your-address class:form-control class:nebula-validate-text class:crm-street_address autocomplete:address-line1] </div> <div class="row"> <div class="nebula-form-group col-md-5"> <label class="form-label" for="your-city">City</label> [text city id:your-city class:form-control class:nebula-validate-text class:crm-city autocomplete:address-level2] </div> <div class="nebula-form-group col-md-4"> <label class="form-label" for="your-state">State</label> [select state id:your-state class:form-select class:nebula-validate-select include_blank "Alabama" "Alaska" "Arizona"] </div> <div class="nebula-form-group col-md-3"> <label class="form-label" for="your-postal-code">Postal Code</label> [text postalcode id:your-postal-code class:form-control class:nebula-validate-text class:crm-postalcode autocomplete:postal-code] <div class="invalid-feedback">Please verify you have entered a valid postal code.</div> </div> </div> <div class="nebula-form-group"> <label class="form-label" for="your-dob">Date of Birth</label> [date dob id:your-dob class:form-control class:nebula-validate-date class:crm-dob 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="nebula-form-group"> <label class="form-label" for="your-message">Message*</label> [textarea* message id:your-message class:form-control class:nebula-validate-textarea placeholder "Enter your message here..."] </div> <div class="hidden"> [text attribution id:attribution class:attribution class:hidden readonly] </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-label" for="time">Choose your preferred time of day</label> [checkbox time id:time use_label_element "Morning" "Afternoon" "Evening"] </div> <div class="form-check"> <label class="form-label" for="color">Choose your preferred color</label> [radio color id:color default:1 "Red" "Green" "Blue"] </div> <div class="nebula-form-group"> <label class="form-label" for="favoriteteam">Favorite NFL Team</label> [select favoriteteam id:favoriteteam class:form-select class:nebula-validate-select include_blank "Philadelphia Eagles" "Philadelphia Eagles" "Philadelphia Eagles" "Philadelphia Eagles"] </div> <div class="form-check"> [acceptance privacy-acceptance id:cf7-privacy-acceptance] I agree to the storage and handling of my data.*[/acceptance] <div class="invalid-feedback">This is required in order to process your request.</div> </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.
CF7 deletes files from the server after the email is sent. However, Nebula will still denote the information about that temporary file. If your server preserves files when uploaded, use the following filter to modify the Nebula file location string to match:
add_filter(‘nebula_cf7_file_location’, function($file_location){
return str_replace(WPCF7_UPLOADS_TMP_DIR, home_url(‘/’) . ‘/wp-content/uploads/your-storage-directory-here/’, $file_location);
});
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).
Be sure to add acceptance_as_validation: on into the Additional Settings of each form so that this checkbox field shows a native invalid indicator. Nebula will attempt to show one if provided (see the example form code on this page).
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).
Sending Data to the CRM
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 “crm-” followed by the category of data (lowercase and underscores). For example, first name would be “class:crm-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”).