Images – Tutorials

Last Updated on December 24, 2020 by Sally Lance

We maintain a record of all the many different images used on our various websites.

Tutorials #

CF7 Skins HTML Element #

CF7 Skins HTML Element – All images

cf7skins-blog-add-html-tags-using-paragraph-element-768×708
cf7skins-blog-addition-of-html-element
cf7skins-blog-using-html-element-step1
cf7skins-blog-using-html-element-step2
cf7skins-blog-using-html-element-step3
cf7skins-blog-using-html-element-step4
cf7skins-blog-using-html-item

CF7 Skins Multi (with Visual Editor) #

CF7 Skins Multi (with Visual Editor) – All images.

cf7skins-kb-initial-template
cf7skins-kb-multi-options
cf7skins-kb-rename-multi-form-tab
cf7skins-kb-visual-editor-with-multi-form
cf7skins-kb-visual-editor-with-new-tab-between-two
cf7skins-kb-visual-editor-with-two-tabs

CF7 Skins Multi (with CF7 Form Editor) #

CF7 Skins Multi (with CF7 Form Editor) – All images.

cf7skins-kb-adding-tab-between-other-two
cf7skins-kb-delete-tab
cf7skins-kb-edit-tab-name
cf7skins-kb-multi-options-cf7-form-tab
cf7skins-kb-multi-page-form-2
cf7skins-kb-new-tab-in-form-editor
cf7skins-kb-with-multi-addon

Choosing a Style for Your Form #

Choosing a Style for Your Form – all images.

browsing-templates
cf7skins-form-example

style images

style-details
style-expanded-view (1)
style-expanded-view
styles-cf7skins

Using a Custom CSS plugin to modify a CF7 Skins Style #

Using a Custom CSS plugin to modify a CF7 Skins Style – all images.

caspar-submit-changed
caspar-submit-css-changing
caspar-submit-css-plain
custom-css-button
firebug-inspect-element
firebug-inspect-html

Contact Form 7 Fields Side by Side #

Contact Form 7 Fields Side by Side – all images

4.-Contact-Form-7-Fields-Side-by-Side-Add-Singline-Ready-Class
5.-Contact-Form-7-Fields-Side-by-Side-Arrange-form-elements
6.-Contact-Form-7-Fields-Side-by-Side-Registration-Template-768×471
7.-Contact-Form-7-Fields-Side-by-Side-Edit-OL
CF7-Skins-Ready-Singleline-Choose-Ready-Checkbox-1
cf7skins-sidebyside-example
column-screen-all-496×1024

Contact Form 7 Form in Columns #

Contact Form 7 Form in Columns – All images

5.-Contact-Form-7-Fields-in-Column-Thumbnail-Form
6.-Contact-Form-7-Fields-in-Column-Final-Visual-Form
6.-Contact-Form-7-Fields-in-Column-Template
7.-Contact-Form-7-Fields-in-Column-Preview
8.-Contact-Form-7-Fields-in-Column-Edit-OL
select-multi-class-dialog-box-column-1
select-multi-class-dropdown-singleline-column-1-768×607

Change Type of CF7 Tag: a Quick Guide #

Change Type of CF7 Tag: a Quick Guide – All images

cf7skins-blog-change-type-cf7tags-from-edit-window
cf7skins-change-cf7tagtype-edit-icon
cf7skins-kb-before-v2-1-768×287
cf7skins-kb-change-type-of-cf7-tags-before-v2-1-1
cf7skins-select-cf7tagtype-dropdown

Installing CF7 Skins #

Installing CF7 Skins – all images

activate-plugin
add-new-plugin
upload-plugin1

Create a form with CF7 Skins #

Create a form with CF7 Skins – All images.

cf7-form-shortcode
cf7skins-form-editor-save-visual
cf7-skins-form-field-addnew-drag
cf7skins-form-start
cf7skins-style-berrydelight-selected
cf7skins-template-event-selected
cf7skins-template-filter-sort-search
cf7skins-ui-mainSections
cf7skins-visual-form-field-tag-action-basics
cf7skins-wp-shortcode-preview
wordpress-contact-addnew

Choosing a Template for Your Form #

Choosing a Template for Your Form – all images

cf7-form-template-event
cf7skins-form-editor-save-visual
cf7skins-form-template-event
cf7skins-template-contact-details
cf7skins-template-contact-details-view
cf7skins-template-contact-selected
cf7skins-template-event-selected
cf7skins-template-filter-sort-search
cf7skins-template-search-registration
cf7skins-template-tab-open
wpadmin-contactform-select

Edit your CF7 Skins Form (CF7 Skins Visual Editor) #

Edit your CF7 Skins Form (CF7 Skins Visual Editor) – All images.

cf7skins-form-delete-options
cf7skins-form-dragDrop-reorder-field
cf7skins-form-duplicate-options
cf7skins-form-editor-save-visual
cf7skins-form-field-add
cf7-skins-form-field-addnew
cf7skins-form-field-edit-explanation
cf7skins-form-field-move-unable-350
cf7skins-form-ui-narrow-768×575
cf7skins-ui-mainSections
cf7skins-ui-skins

How to Customise Your Selected CF7 Skins Style #

How to Customise Your Selected CF7 Skins Style – All images.

caspar-fieldset
changed-font
contact-form-html
css-caspar
css-legend
final-contact-form1
font-family-css
submit-button-html1
submit-hover1

Better Contact Form 7 Checkboxes & Radio Buttons #

Better Contact Form 7 Checkboxes & Radio Buttons

cf7skins-blog-better-checkboxes-radio-buttons (1)
cf7skins-blog-better-checkboxes-radio-buttons
cf7skins-blog-creating-checkboxes
cf7skins-blog-default-look-of-options
cf7skins-blog-default-look-of-radio-button
cf7skins-blog-default-option-in-checkbox-and-radio-button
cf7skins-blog-exclusive-checkboxes
cf7skins-blog-select-radio-buttons-checkboxes

Making your form easy to read by using Fieldsets #

Making your form easy to read by using Fieldsets – All images

cf7skins-form-fieldset-visual-wordpress
cf7skins-form-long-multifieldset-contact
cf7skins-form-onefieldset-contactform
cf7skins-form-singlefieldset-contact-long
cf7skins-form-singlefieldset-long-contact
cf7skins-wp-multifieldset-long-contact
wp-cf7skins-singlefieldset-contact-stanwyck

Edit your CF7 Skins Form (Contact Form 7 Editor) #

Edit your CF7 Skins Form (Contact Form 7 Editor) – All images.

cf7-cf7skin-contact-edit-label
cf7-cf7skins-contact-copypaste
cf7-cf7skins-contact-new-tag
cf7-cf7skins-contact-remove-field
cf7-cf7skins-contact-tag-insert
cf7-form-editor-template-contact
cf7skins-template-contact-selected
cf7-wp-contactform-new (1)