Contact Form 7 doesn’t include a built-in form preview feature, but you can easily preview your forms using the Essential Addons for Contact Form 7 plugin. This plugin also offers a selection of predefined templates and styles to enhance your forms.
To implement the Contact Form 7 form preview feature follow the below guideline.
Make sure you have installed both Contact Form 7 & Essential Addons Contact Form 7 plugins inside your WordPress.
Enable Form Preview
You must enable the Column Layout feature to implement predefined templates for your contact form. To do that, follow the below steps:
- Navigate to the Contact Form 7 menu.
- Essential Addons.
- From the Features tab enable the Form Preview.
Form Preview
After enabling the Form preview you will discover a preview button inside your form. Follow the below steps to understand how to preview your form.
- Navigate to any existing form or create a new one.
- Click on the Preview button.
Form Style Customization
After clicking the Preview button a new page will appear with a style customization option. Follow the below steps to customize form presets & styles.
- Select your preferred preset from the Form Style Preset.
- Enable Customize Style Preset to customize your selected preset style.
- Container Styles
- Label Styles
- Input Field Styles
- Placeholder Styles
- Submit Button Styles
- Custom CSS
- Click the Save button to save changes.
- Copy & paste the Shortcode to display the customized form on any page or post.
Now, the custom form will be visible and users can submit the form using the updated form.
