Preparing Visual Template files – Alpha Version

Last Updated on December 3, 2018 by Neil Murray

We need to prepare Visual versions for each Template added to Contact Form 7 Skins.

Here is a way to write Visual items for visual.php for each template.

In this example, we use the contact-form-7-skins\skins\templates\contact template.

1a. Select the Contact Template so it is added to the Form section of the CF7 interface

<fieldset>
	<legend>Contact Form</legend>
	<ol>
		<li> Your Name (required) [text* cf7s-name] </li>
		<li> Email Address (required) [email* cf7s-email-address] </li>
		<li> Your Message [textarea cf7s-message] </li>
	</ol>
	[submit "Submit"]
	<p>* Required</p>
</fieldset>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus pharetra vehicula. Aliquam pellentesque mi non scelerisque placerat.</p>

1.b Alternatively – Open the main file, i.e. contact.php

<fieldset>
    <legend><?php _e( 'Contact Form', CF7SKINS_TEXTDOMAIN); ?></legend>
    <ol>
        <li> <?php _e( 'Your Name (required)', CF7SKINS_TEXTDOMAIN ); ?> [text* cf7s-name] </li>
        <li> <?php _e( 'Email Address (required)', CF7SKINS_TEXTDOMAIN ); ?> [email* cf7s-email-address] </li>
        <li> <?php _e( 'Your Message', CF7SKINS_TEXTDOMAIN ); ?> [textarea cf7s-message] </li>
    </ol>
    [submit "<?php _e( 'Submit', CF7SKINS_TEXTDOMAIN); ?>"]
    <p>* <?php _e( 'Required', CF7SKINS_TEXTDOMAIN ); ?></p>
</fieldset>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>

2. Follow the HTML structure and create the items in the Visual editor

Create fieldset, set the legend label

Create numbered list and add list child

Create text item, set required option checked, give the name cf7s-name

So on…

3a. Add temporary Visual Save button

Open the ..\src\components\form\form-itemsform-items.js file

Copy & add the commented out Visual Save button

	</div>
	{/*<input className="button" type="submit" value="SAVE" onClick={this.updateComponent.bind(this)} />*/}
	<input className="button" type="submit" value="SAVE" onClick={this.updateComponent.bind(this)} />
	<span className="spinner"></span>
</div>

3b. Temporarily output visual.php data to Console log

Open the ..\includes\admin.php file

Uncomment

// print_r( str_replace("'", "\\'", stripslashes( $_POST['options'] )) );

and comment

print_r( $this->extract_visual( $visual ) );

4. Enable browser console, and press Visual Save button

Note: You may need to press ctrl+shift+r to reload the page ignoring the local browser cache – reloading the page ignoring the local browser cache ensures the cf7svisual global variable is updated.