Title: Style Contact Form 7
Author: mofis
Published: <strong>1. desember, 2023</strong>
Last modified: 22. mai, 2026

---

Søk i utvidelser

![](https://ps.w.org/customizer-block-cf7/assets/banner-772x250.jpg?rev=3002982)

![](https://ps.w.org/customizer-block-cf7/assets/icon.svg?rev=3002982)

# Style Contact Form 7

 Av [mofis](https://profiles.wordpress.org/mofistudio/)

[Last ned](https://downloads.wordpress.org/plugin/customizer-block-cf7.1.4.1.zip)

 * [Detaljer](https://nb.wordpress.org/plugins/customizer-block-cf7/#description)
 * [Omtaler](https://nb.wordpress.org/plugins/customizer-block-cf7/#reviews)
 * [Utvikling](https://nb.wordpress.org/plugins/customizer-block-cf7/#developers)

 [Brukerstøtte](https://wordpress.org/support/plugin/customizer-block-cf7/)

## Beskrivelse

This Contact Form 7 compatible Gutenberg Block automates CSS style generation, allowing
you to quickly design contact forms with minimal setup.

### Blocks

#### Style Contact Form 7

Design and style Contact Form 7 forms visually in the block editor with live styling
controls.

#### Features

 * Gutenberg Block Integration: Design and customize Contact Form 7 forms directly
   in the block editor with live styling controls.
 * Responsive Design: Forms automatically adapt for desktop, tablet, and mobile 
   devices.
 * Flexible Form Styling: Customize field backgrounds, labels, text, borders, padding,
   and shadows.
 * Improved User Experience: Includes styled validation, error, success, and loading
   states for Contact Form 7 forms.
 * Multilingual support with multiple translations.
 * Comprehensive documentation with video demos.

#### Docs and support

View the [Docs](https://stylecontactform7.com/documentation/), get fast [Support](https://stylecontactform7.com/support/).
Popular Questions and Solutions will be posted to the Support Forum & FAQ.

#### Required Plugins

[Contact Form 7](https://wordpress.org/plugins/contact-form-7/)

## Skjermbilder

 * [[
 * Adding block to Editor Area
 * [[
 * Adjust block margin
 * [[
 * Change background color
 * [[
 * Block border and corners
 * [[
 * Adjust block shadow

## Blokker

Denne utvidelsen gir 1 blokk.

 *   Style Contact Form 7 Style your Contact Form 7 forms with Ease.

## Ofte stilte spørsmål

### What is Contact Form 7?

[Contact Form 7](https://wordpress.org/plugins/contact-form-7/) is one of the most
popular and widely used WordPress plugins for creating and managing multiple contact
forms on a website.

### Will Style Contact Form 7 plugin work with my theme?

While it is not possible to test with every WordPress theme, the plugin has been
tested with many themes, especially block themes.

The demo videos were recorded with Twenty Twenty-Three theme.

Feel free to contact [Support](https://stylecontactform7.com/support/) if it is 
not working as expected.

### I am having issues, can you offer support?

Yes, click here for [Support](https://stylecontactform7.com/support/)

## Vurderinger

![](https://secure.gravatar.com/avatar/d413f5d3364d7eb28dada2f0c8b80f290636f5a632289cae61ac97756edb84b0?
s=60&d=retro&r=g)

### 󠀁[overall nice block](https://wordpress.org/support/topic/overall-nice-block/)󠁿

 [tfgadmin](https://profiles.wordpress.org/tfgadmin/) 21. mars, 2025 1 svar

Would be OK for simple sites. What it can’t do is break your form field stacks into
multiple columns.

![](https://secure.gravatar.com/avatar/bfce52eecd8a4ce320ee62f143b7438e41efaa0ea03414ea83b630c1d47ec19e?
s=60&d=retro&r=g)

### 󠀁[Perfect for Customising CF7!](https://wordpress.org/support/topic/perfect-for-customising-cf7/)󠁿

 [edmart1n](https://profiles.wordpress.org/edmart1n/) 17. november, 2024

This plugin makes it so easy to give Contact Form 7 a fresh, modern look. The styling
options are simple yet powerful—highly recommend it! Nice one Mofistudio saved me
hours of work.

![](https://secure.gravatar.com/avatar/3e5d4e0648babc86b6a9fac90409a897c8893570d129e0929633bdfa6f12aeb6?
s=60&d=retro&r=g)

### 󠀁[A really useful plugin](https://wordpress.org/support/topic/a-really-useful-plugin-9/)󠁿

 [qazujm](https://profiles.wordpress.org/qazujm/) 20. oktober, 2024

It makes integrating the Contact Form 7 forms into your webpage design so much simpler.
This plugin provides many options for styling the forms to suit the look you want.

![](https://secure.gravatar.com/avatar/388deb6f86e26162faa9d52402c153603a028bd0f5b0f5e1c2eb90de3e45cc7c?
s=60&d=retro&r=g)

### 󠀁[it looks good](https://wordpress.org/support/topic/it-looks-good-5/)󠁿

 [Bjørn Nielsen](https://profiles.wordpress.org/bplndk/) 8. oktober, 2024 1 svar

Hi, Yes, it looks good… but when using the Classic Editor, it doesn’t work! Otherwise,
it looks fine…

![](https://secure.gravatar.com/avatar/068abbf941d4f20bf51757655e271333ae95a2a96ca0fd3f7fa810472b6d22bb?
s=60&d=retro&r=g)

### 󠀁[Excellent plugin!](https://wordpress.org/support/topic/excellent-plugin-9343/)󠁿

 [Matthew McVarish](https://profiles.wordpress.org/drmatthewmcvarish/) 8. oktober,
2024

This plugin makes Contact Form 7 styling so easy, I love it, great design!

![](https://secure.gravatar.com/avatar/b7eef4cbee60fa65d3a0360f862f0d12f34ba7c4eda438ef82f41d233bbbae66?
s=60&d=retro&r=g)

### 󠀁[Good addition to CF7!](https://wordpress.org/support/topic/good-addition-to-cf7/)󠁿

 [Metasequoia](https://profiles.wordpress.org/metasequoia/) 22. april, 2024

I like the plugin very much. Finally a simple solution to visually enhance the monotonous
forms of CF7. And very pleasing: the developer is very easy to contact and responds
quickly to comments. Great 🙂

 [ Les alle 7 vurderinger ](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/)

## Bidragsytere og utviklere

«Style Contact Form 7» er programvare med åpen kildekode. Følgende personer har 
bidratt til denne utvidelsen:

Bidragsytere

 *   [ mofis ](https://profiles.wordpress.org/mofistudio/)

«Style Contact Form 7» har blitt oversatt til 8 språk. Takk til [oversetterne](https://translate.wordpress.org/projects/wp-plugins/customizer-block-cf7/contributors)
for deres bidrag.

[Oversett «Style Contact Form 7» til ditt språk.](https://translate.wordpress.org/projects/wp-plugins/customizer-block-cf7)

### Interessert i utvikling?

[Bla gjennom koden](https://plugins.trac.wordpress.org/browser/customizer-block-cf7/),
sjekk ut [SVN-repositoriet](https://plugins.svn.wordpress.org/customizer-block-cf7/),
eller abonner på [utviklingsloggen](https://plugins.trac.wordpress.org/log/customizer-block-cf7/)
med [RSS](https://plugins.trac.wordpress.org/log/customizer-block-cf7/?limit=100&mode=stop_on_copy&format=rss).

## Endringslogg

#### 1.4.1

 * Tested up to WP 7.0
 * Adjusted block icon styling to better match WordPress 7.0 editor UI
 * Improved contact form selection workflow for faster form switching in the editor

#### 1.4

 * Tested up to WP 6.9.4
 * Added instance class to make unique in case of multiple forms
 * Moved messages to popup
 * Adjusted some default css values
 * Centered spinner on button when set to width Auto

#### 1.3

 * Tested with WP 6.8
 * Updated documentation

#### 1.2

 * Added new pro demo video.
 * Moved pro plugin to its own domain : https://stylecontactform7.pro/
 * Added 10 new demo pages

#### 1.1.9

 * Tested with WP 6.7
 * Added background color to invalid fields.
 * Centered the form loading spinner over submit button and hide button text when
   active.
 * Fixed $wrapper_attributes output bug, flagged by plugin check.
 * Changed default left and right margin for mobile screen size to -0.5 (em).

#### 1.1.8

 * fixing broken SVG icon links

#### 1.1.7

 * Added function to auto close the block inspector Panel Body tabs to keep it tidy
   and aid navigation.
 * Improved admin page with a new layout, more information and links to new Pro 
   Version.
 * launched Style Contact Form 7 Pro – https://stylecontactform7.com/pro/
 * Added more detailed descriptions of block features in the readme and added demo
   video.
 * Translated all new text to 15 languages, Danish, German, English (UK), Spanish(
   Spain), Finnish, French (France), Croatian, Italian, Dutch, Polish, Portuguese(
   Portugal) Romanian, Russian, Swedish & Ukrainian.

#### 1.1.6

 * Set font family and removed some default form styles.
 * Made the form identical in the editor and the front end.

#### 1.1.5

 * fix broken admin stylesheet link.

#### 1.1.4

 * Added 2px padding to ‘outer’ .cfcf7-block-container – this fixes the block overlapping
   the is_selected blue outline.
 * Made the admin panel Css more specific to avoid disrupting other blocks admin
   panels.
 * Changed Admin Menu title from ‘Style Contact Form 7’ to ‘Style CF7’ to avoid 
   line break.
 * Added some default gradient color options to the submit button.

#### 1.1.3

 * Bug fix, Altered ‘wpcf7_contact_form’ post loop as it was overwriting contact
   forms.

#### 1.1.2

 * Tested with WordPress 6.6
 * Removed ‘margin’ option from Submit Button settings

#### 1.1.1

 * Changed Plugin display in main PHP file’.
 * Added styles for contact form validation warnings.
 * Added ‘New Additions’ link on admin page to https://stylecontactform7.com/new-
   additions/ where I will document recent upgrades and features.

#### 1.1

 * Changed Plugin display name and Gutenberg block name to ‘Style Contact form 7’.
 * Added ‘Requires Plugins:’ header tag (WP 6.5+).
 * Added fill color to Block Icon background.
 * Added Top & Bottom negative Margin options to help refine block positioning for
   Desktop, Tablet & Mobiles screen sizes.

#### 1.0.9

 * Added styles for Contact Form 7 input fields, (radio, checkbox, number, select),
   Added margin option to Submit button, Added Gradient option to Submit button.
   Added field focus outline settings.
 * Changed Field Border style & Field Border position options to Select inputs instead
   of Radio buttons. (thanks to @metasequoia for the feedback).

#### 1.0.8

 * Re-added ‘__experimentalGetPreviewDeviceType’ for > WP 6.5.
 * Changed Text Transformation & Font Weight options to Select inputs instead of
   Radio buttons.

#### 1.0.7

 * Removed ‘__experimentalGetPreviewDeviceType’ as it was causing issues in site
   editor, using ‘getDeviceType’ instead.

#### 1.0.6

 * Added post loop to init function to access contact forms.

#### 1.0.5

 * Added languages (Danish, Dutch, English (UK), Finnish, French, German, Hindi,
   Italian, Japanese, Norwegian, Polish, Portuguese, Russian, Spanish, Swedish, 
   Ukrainian)

#### 1.0.4

 * Added Pot file to languages folder
 * Removed block patterns

#### 1.0.3

 * updated admin page

#### 1.0.2

 * moved docs & support to its own domain (stylecontactform7.com)
 * updated links to docs & support throughout.

#### 1.0.1

 * bug fix – Undefined variable in block-patterns.php
 * added default margin values for tablet and mobile.

#### 1.0

 * Initial release

## Meta

 *  Versjon **1.4.1**
 *  Sist oppdatert **1 uke siden**
 *  Aktive installasjoner **1 000+**
 *  WordPress-versjon ** 6.0 eller nyere **
 *  Testet opp til **7.0**
 *  PHP-versjon ** 7.4 eller nyere **
 *  Språk
 * [Catalan (Valencian)](https://ca-valencia.wordpress.org/plugins/customizer-block-cf7/),
   [Croatian](https://hr.wordpress.org/plugins/customizer-block-cf7/), [Danish](https://da.wordpress.org/plugins/customizer-block-cf7/),
   [English (UK)](https://en-gb.wordpress.org/plugins/customizer-block-cf7/), [English (US)](https://wordpress.org/plugins/customizer-block-cf7/),
   [Spanish (Chile)](https://cl.wordpress.org/plugins/customizer-block-cf7/), [Spanish (Spain)](https://es.wordpress.org/plugins/customizer-block-cf7/),
   [Swedish](https://sv.wordpress.org/plugins/customizer-block-cf7/) og [Ukrainian](https://uk.wordpress.org/plugins/customizer-block-cf7/).
 *  [Oversett til ditt språk](https://translate.wordpress.org/projects/wp-plugins/customizer-block-cf7)
 * Stikkord
 * [cf7](https://nb.wordpress.org/plugins/tags/cf7/)[contact form](https://nb.wordpress.org/plugins/tags/contact-form/)
   [contact form 7](https://nb.wordpress.org/plugins/tags/contact-form-7/)[form styling](https://nb.wordpress.org/plugins/tags/form-styling/)
   [gutenberg](https://nb.wordpress.org/plugins/tags/gutenberg/)
 *  [Avansert visning](https://nb.wordpress.org/plugins/customizer-block-cf7/advanced/)

## Vurderinger

 4.7 av 5 stjerner.

 *  [  6 5-star reviews     ](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/?filter=5)
 *  [  0 4-star reviews     ](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/?filter=4)
 *  [  1 3-star review     ](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/?filter=3)
 *  [  0 2-star reviews     ](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/?filter=2)
 *  [  0 1-star reviews     ](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/#new-post)

[Se alle omtalene](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/)

## Bidragsytere

 *   [ mofis ](https://profiles.wordpress.org/mofistudio/)

## Brukerstøtte

Har du noe å si? Trenger du hjelp?

 [Vis brukerstøtteforumet](https://wordpress.org/support/plugin/customizer-block-cf7/)