Contact form 7 wordpress ready styles.

It was necessary to get a beautiful form for the plugin, the forms were needed yesterday, and it’s quite difficult to sit and prescribe styles manually, and for many projects it just doesn’t fit the budget. Therefore, I went in search of interesting plugins for quickly setting up css contact forms.

All together (this applies to search engines) recommended - wise people said - edit css and do not fool anyone, Notepad in hand and go. Looking ahead, the wise people were right.

However, curiosity prevailed and it was decided to test the plugin in more detail, I had already tried it before, but it seemed extremely dull and inconvenient. The plugin has not been updated for 11 months, which is sad. A little more than 6K webmasters risked trusting their forms to him, also not a large number (of which I downloaded it four or five times).

After installation, it creates a “Contact style” section in the root of the admin menu. In this section, there are two items containing templates for Valentine's Day and Christmas and "Custom Style" where you can fully customize the output of the form. Actually, the “Custom Style” section is of most interest, more about the available settings:

"GENERALS SETTINGS" - you can define the background color, the width of the form (set in px,% did not try it), the thickness of the border, the shape (dotted line, solid, etc.), color, rounding.

"INPUTS AND LABELS SETTINGS" - the background of the input fields, the color of the input font, the font (the list is not large and there is hardly anything with Cyrillic) and its size. Field border color, style (dashed solid, etc.), thickness, rounding. Input font and size. Margin parameters in px — height/width, padding. Label font, style, size, color.

"SUBMIT BUTTON SETTINGS" - settings for the form submit button. Available settings are button size, rounding, color, border type and color.

Problems in use.

After reviewing the settings, you can come to the conclusion that everything is very good - practice has shown the opposite. There are really a lot of settings, but they are not enough - there are no indent settings inside the form, so all blocks are collected on the left border close to the edge of the form. Strange "default" settings - where the input field is 100 * 100 px in size. If you set the field sizes correctly, then the drop-down list will not be affected and it will drag the style of the main theme. Resetting to original settings did not work until the plugin was removed ...

So far, except for how to manually change the styles more or less decently, it has not worked ... A miracle has not happened.

Important note! The plugin has recently been updated and something has changed in the settings quite significantly, so you need to look and test.

Contact Form 7 can manage numerous contact forms where you can flexibly customize the content of the forms and mail with fairly simple markup. Forms have built-in support for Ajax submission, CAPTCHA, Akismet's spam filter, and more.

Documentation and support

Screenshots

Installation

  1. Upload the entire contact-form-7 folder to the /wp-content/plugins/ directory.
  2. Activate the plugin from the Plugins page in your WordPress dashboard.

In the WordPress dashboard menu, you will find the ‘Feedback’ tab.

To learn how to properly use the plugin, you can visit its homepage.

Members and Developers

"Contact Form 7" is an open source project. The following contributors contributed to the development of the plugin:

Members

Changelog

See Releases for more information.

5.1.3

  • Fixed a bug that made it impossible to deselect an option in the Mail tab.

5.1.2

  • Permanent contact: Introduced contact list selector.
  • Constant Contact: An additional setting constant_contact has been introduced.
  • reCAPTCHA: Introduced wpcf7_recaptcha_actions and wpcf7_recaptcha_threshold filter hooks.

5.1.1

  • reCAPTCHA: Changes the response to empty response tokens.

5.1

  • The Permanent Contact integration module has been introduced.
  • Updated reCAPTCHA module to support reCAPTCHA v3.
  • Adds Dark Mode style rules.

5.0.5

  • Fixed mismatch issue between get_data_option() and get_default_option() in WPCF7_FormTag class.
  • Silences PHP errors that occur on unlink() calls.
  • Introduced wpcf7_is_file_path_in_content_dir() to support the UPLOADS constant.

5.0.4

  • Explicitly sets the power_type argument in the register_post_type() call to fix the problem of unauthorized privilege escalation.
  • Attaching a local file - it is forbidden to specify absolute paths to files located outside the wp-content directory.
  • Configuration Validator - Adds a test element to detect incorrect attachment file settings.
  • Fixed a bug in the JavaScript backwards compatibility feature for legacy browsers that do not support the HTML5 placeholder attribute.
  • Consent checkbox - disables the do-not-store function of the form tag.

5.0.3

  • CSS: Applies the "not-allowed" cursor style to submit buttons in the "disabled" state.
  • Acceptance Checkbox: Revises the tag-generator UI to encourage the use of better options in terms of personal data protection.
  • Introduces wpcf7_anonymize_ip_addr() function.
  • Introduced consent_for:storage option for all form tag types.

5.0.2

  • Added the Privacy Notices section to the readme.txt file.
  • Updated the Information meta-box content.
  • Use get_user_locale() instead of get_locale() where it is more appropriate.
  • Acceptance Checkbox: Reset submit buttons’ disabled status after a successful submission.

5.0.1

  • Fixed incorrect uses of _n().
  • Config validation: Fixed incorrect count of alerts in the Additional Settings tab panel.
  • Config validation: Fixed improper treatment for the [_site_admin_email] special mail-tag in the From mail header field.
  • Acceptance checkbox: The class and id attributes specified were applied to the wrong HTML element.
  • Config validation: When there is an additional mail header for mailboxes like Cc or Reply-To, but it has a possible empty value, “Invalid mailbox syntax is used” error will be returned.
  • Explicitly specify the fourth parameter of add_action() to avoid passing unintended parameter values.
  • Check if the target directory is empty before removing the directory.

5.0

  • Additional settings: on_sent_ok and on_submit have been removed.
  • New additional setting: skip_mail
  • Flamingo: Inbound channel title changes in conjunction with a change in the title of the corresponding contact form.
  • DOM events: Make an entire API response object accessible through the event.detail.apiResponse property.
  • HTML mail: Adds language-related attributes to the HTML header.
  • File upload: Sets the accept attribute to an uploading field.
  • Introduces the WPCF7_MailTag class.
  • Allows you to abort an attempt to send mail using the wpcf7_before_send_mail action hook. Also, you can set custom status and message via action interceptor.
  • Acceptance checkbox: Allows the specifying of a statement of conditions in the form-tag's content part.
  • Acceptance checkbox: Supports the optional option.
  • New special mail tags: [_site_title], [_site_description], [_site_url], [_site_admin_email], [_invalid_fields], [_user_login], [_user_email], [_user_url], [_user_first_name], [_user_last_name], [_user_nickname], and [_user_display_name]
  • New filter hooks: wpcf7_upload_file_name, wpcf7_autop_or_not, wpcf7_posted_data_($type), and wpcf7_mail_tag_replaced_($type)
  • New form-tag features: zero-controls-container and not-for-mail

Using the Contact Form plugin. But over time, the understanding came that the capabilities of this plugin are clearly not enough and the biggest disadvantage is that it allows you to create only one feedback form.

There doesn't seem to be a problem, really. But some site owners need more than one feedback form, which can be located not only on the "Feedback" or "Contact" page, but also on any other pages or posts.

In this tutorial, I want to show you how to create a feedback form using another plugin, more functional and a little more complex than the one discussed in the last post. Shall we start?

Plugin Description

The Contact Form 7 plugin allows you to create many different forms to send results to your email inbox. Absolutely everything can be configured - the appearance of the form, the order of the fields, the title of the inscriptions, the format of electronic messages, the choice of recipients of responses. In general, the plugin is really very functional and cool.

In addition, you can connect the Akismet anti-spam plugin to it, implement it, and also use multilingualism. This is cool in my opinion! :-)

Installing the Contact Form 7 Plugin

The plugin is installed in the standard way in WordPress. Go to the "Plugins" - "Add New" section, enter the name Contact Form 7 and install it from the repository. Do not forget to activate immediately after installation.

Customizing Contact Form 7

After activating the plugin, a new item “Contacts (CF7)” will appear in the WordPress main menu, this is the main place for setting up your feedback forms. The number of forms is unlimited.

The list of existing forms is available in the "Contact Forms" section:

You can also copy the desired shortcode to paste it on a page or post:

Adding a new feedback form

As you can see, there are no special additional items in the menu, so let's move on to creating the feedback form itself. To do this, select the "Add New" item in the main menu.

First of all, we are asked to choose the interface language of the form that will be created. WordPress detects the installed version on your site and prompts you to select it by default:

But you can choose any available language from the list:

After clicking on the "Add New" button, the form constructor will appear.

Change the name of the form

The first step is to enter the name of our form, so as not to get lost in the list of forms when there are too many of them. To do this, just click on the word "Title" in the upper area of ​​​​the screen:

After that, a text field will appear in which we will enter a name with a description:

As soon as the page refreshes, you will see the following message:

You can copy the suggested shortcode and paste it on the page we need.
But you can do it later as well, once you've set up the form. The choice is yours.

Changing the form template

A form template is plain HTML code that defines the look and feel of your form. By default, it contains 4 fields (name, email, subject, and message) and a form submit button. It looks like this:

You can swap blocks around by simply cutting and pasting their code anywhere.
For example, we can swap the email address field and the customer name:

Or we can remove the "Subject" field so that it does not appear in our form. To do this, just delete the corresponding block of text in our template:

An asterisk next to the element code means that this field is required and until the client enters some value, the form will not be submitted:

How to add a new field to a form

Imagine that you need to add a field with the website address to a standard form. The form constructor of this plugin allows you to implement your plans without any problems. Just use the "Generate tag" button:

When clicked, a huge list of possible additional fields will fall out:

You just have to choose the type of the desired field and perform a number of simple steps.

Don't be scared. The settings, although they look intimidating, are actually very simple :-)

The "Required field" flag allows you to set an additional check, and as long as this field remains empty or has an incorrect value, the form will not be submitted. Almost all types of fields have this setting:

In addition, many of our form fields have the same name settings, element ID and CSS class settings, through which you can change the appearance of these fields. They are present in almost all fields:

The "Name" field is the most important, it is used in both the form template and the email template.

But while using this plugin, I have never had to change or set the values ​​of these attributes. Most likely you won't need it either. But I have to tell and introduce them :-)

All text fields in our form constructor have additional fields with the size of the field itself and the maximum length of the value, here they are:

Also, specific fields, such as URL or some other, different from ordinary text fields, have their own special settings. For example, our URL field has an additional setting:

I will not consider absolutely all the settings, because. there are too many of them and they are specific to each type of field. Well, if suddenly you still need this information, then write about it in the comments to this post and I will prepare an additional review of the settings.

Now we need to add the code for this field to the form template form.
To do this, you need to copy the proposed code and paste it into the form on the left:

For example, I want to place a field with the website address after the customer's name. I will need to enter a code similar to other fields, that is, add a paragraph, line break and insert a shortcode for this new field:

Well, in order for the value of this field to come to our email address, this value must be copied:

And paste in the text field below in the "Email template":

By analogy, other fields are added. Everything is simple and clear :-)

Recipient and letter template

Now let's look at the settings that are taken into account when sending a message. In our case, this is the recipient (almost always you are) and a letter template that will be sent to the specified email address after the message is sent.

First of all, you need to specify the addressee, whose e-mail will receive messages from our form. By default, the email address from the WordPress settings is substituted here.

I think you have already noticed that these forms use obscure codes, such as , . So, this is the same “Name” field from the field generator that I considered above:

Well, then you just have to put in order the template of the letter itself:

You can use all the fields that were created automatically via the "Generate tag" button, or you can leave the standard form if you did not change anything in the settings.

P.S. In the settings of this plugin, there is a rather interesting opportunity - to specify the second recipient of the message. To be honest, I can’t immediately think of why this might be needed, but since there is an opportunity, then someone will use it anyway.

Message settings

Well, what kind of plugin is it for sending messages if it does not allow you to change the text of notifications or inscriptions? And the Contact Form 7 plugin is no exception. It allows you to translate any inscription or error message:

Known Issues

It happens that when using non-standard controls, such as email or url, the appearance of individual elements on the page will be different. For example, take a look at the "Your site address" field on the form itself:

Didn't see? And I'll show you closer:

In general, the problem is that the appearance of such fields is visually different from standard text fields. Compare with the field "Your name", you will immediately understand everything.

There are two solutions here. The first is to add the appropriate styles to the style.css file of your theme, or change the url type to text in the form template, then everything will be fine:

Conclusion

I think the review of ways to create feedback forms can be considered completely closed, and the topic itself has been considered up and down.

Of course, there will definitely be someone who either fails something, or wants to suggest some other, similar plugin for consideration. I'm always open to questions and suggestions! Feel free to ask them in the comments :-)

If you want to thank me for the material - you can do it here :-)

If you find an error, please highlight a piece of text and click Ctrl+Enter.