The post How to Easily Style Contact Form 7 to Match Your WordPress Website appeared first on PluginsForWP.
]]>While its functionality is versatile and can be used for many purposes, its default style is plain and boring. Because of that, potential users are dropping CF7 and using different form plugins that are easier to style.
In this article, I’ll show you how to style Contact Form 7 to match the look of your website.
Why Style Contact Form 7
As mentioned above, CF7 is a powerhouse plugin for creating different forms on your WordPress website.
There are many uses for the forms that you can create with the CF7 plugin. You can connect the forms with PayPal to collect payments or even integrate with Mailchimp to capture leads.
Although the many advantages of contact form 7, there is one thing that the plugin lacks: the form’s appearance.
The forms created by Contact Form 7 lack style because the plugin doesn’t include any CSS files to come with it.
The form’s appearance is generated by the default style assigned by the browser and, therefore, is very blank.
In today’s world, while every website strives to present uniqueness, displaying a basic form that doesn’t match the rest of the website look is a no-go. Therefore, many website owners are dropping the Contact Form 7 plugin, regardless of its benefits and uses.
It is essential to have a consistent design for all the elements of your website, and in the next couple of sections, you’ll learn how to style your Contact Forms 7 forms.
Contact Form 7 Styling with the CF7 Styler Plugin
We assume that if you knew how to write CSS rules, you probably wouldn’t read this article.
Therefore, bombarding you with CSS rules you are unfamiliar with is not the best solution for you.
Instead, it will be more beneficial to use visual editor plugins. That way, you’ll be able to take an active role in styling your forms and change any parameter to fit your needs.
The first plugin that I would like to show you is CF7 Styler. Navigate to Plugins -> Add New, and activate the Contact Form 7 Wow Styler.
Once activated, navigate to the page that displays the form you want to style and click on the open styler button.
The styler screen is divided into two sections, the left sidebar contains the styling options, and the right section shows what the form looks like.
The visual section is displayed in a split view, the before and after look of the form. I find it confusing, so I’ll uncheck the split view box and focus only on what I want the after state to look like.
Once I only see a single form, I can move over to the properties sidebar and style any element of the form.
Style Schemes Settings
From the style sidebar on the left, we can customize and prettify any form part, from the text size to background and border colors.
If, for example, we would like to add a light red background color, let’s expand the Form BG Image & Colors tab and set your desirable color.
Once selected, the form on the right will change accordingly and display the new chosen background color.
If we would like to add a border or a shadow, please expand the Padding & Margin tab, and change the property values based on your needs.
In our form, we will add a maroon border and grey outline shadow,
The form’s labels can be accessed through the Label Settings section under the form text tab.
We can increase the label text size by entering a more significant number into the label’s font field. In addition, you also have the option to make the text bolder by changing the font weight.
Finally, we can move on and style the form’s submit button to match the rest.
Therefore, expand the Buttons tab and change your desired properties. To match the created design, I’ll make the button a full width and change its color to red.
Please ensure to hover over the button to view its hover state and change it accordingly.
Once satisfied with the overall look of the form, it’s an excellent time to save and publish the changes.
Therefore, click on the green save button at the top of the styling sidebar and then the activated style for the current form button.
Then, revisit the form page and ensure it adopts the new look.
If you are happy with the results and how they look, that’s great. Keep it. Otherwise, you can always open the styler screen again and tweak the design.
Style Contact Form 7 with a Visual Editor Plugin
The CF7 Styler plugin we explored above is a dedicated plugin that can only be used with Contact Form 7 plugin.
Suppose you are looking for a more flexible visual editor that can also style any form on your website. In that case, you can use YellowPencil, CSS Hero, or SiteOrigin CSS, the plugin I will show you in this section.
In short, the SiteOrigin CSS is a visual editor plugin that can style and customize any tag or element on any page.
SiteOrigin can modify the existing elements of your website but won’t add any new ones, unlike a page builder plugin such as Elementor.
Once you activate SiteOrigin, navigate to Appearance -> Custom CSS and click on the eye icon to open the visual editor.
The default page that will be displayed on the right is the homepage of your website. If that’s where the contact form exists, that’s good. Otherwise, enter the URL at the top field and click enter.
Then, hover your mouse over any of the form’s elements, highlight them, and select the one you would like to style.
Once selected, the element’s structure will automatically fill in the inspector tool below the canvas.
You can climb up the structure tree and select the form as a whole instead of a single label.
The tag you’ll need to choose depends on what you would like to style. If, for example, you would like to add a background color to the form, we will need to target the form itself, rather than just a single label.
Change the Properties Values
After you select the desired element, it will appear at the top of the styling bar on the left, and that’s the one you’re editing.
Similar to the CF7 WOW plugin, we can also change any part of this form, including font and text sizes, border and background colors, etc.
Go through the different styling options and change the property values to match your needs.
To add a background, navigate to the decoration tab and choose a color. You can also add borders and shadows from the same screen.
To add padding and make it more spacious, click on the layout tab and increase the padding numbers.
Then, click back on the label tag again and ensure it appears at the top of the styling sidebar.
Adjust the font size, weight, and other values, and see what the form looks like on the right.
Once done with the labels, click on the button element and style it. I changed its background color in our example and made it full width.
After styling every part of your form, click on the checkmark icon to save the CSS rules.
Saving the changes will take you back to the editor screen, where you can see all the CSS rules applied to the form.
Notice that any rule that doesn’t start with the wpcf7 class, such as the label one in the picture below, will affect the tag globally, which is not recommended.
Therefore, add .wpcf7-form to the left of those tags to only affect the properties of the Contact Form 7 plugin.
Then, save the changes and visit the page with the form again to ensure it looks as you styled it.
Bonus: Save the CSS Rules
The nice thing about the SiteOrigin plugin is that it provides you with the CSS rules it’s using to style the form.
If you’re only using the plugin to style the CF7 forms, we can use the rules and then deactivate the plugin.
Navigate to Appearance -> Custom CSS and copy all the CSS rules from the editor screen on the left.
Then, paste the rules into the Additional CSS section inside the customization screen, and save the changes.
Once pasted, move on to the plugins page and deactivate the SiteOrigin plugin. Although the plugin is no longer active, recheck the form and ensure it still looks the same.
Conclusion
This article showed you how to style Contact Form 7 in a couple of ways, once by using a dedicated plugin and second by using a visual editor.
Leave us a comment and tell us which method you followed to achieve this task.
The post How to Easily Style Contact Form 7 to Match Your WordPress Website appeared first on PluginsForWP.
]]>The post How to Integrate Contact Form 7 With MailChimp to Collect Email Leads appeared first on PluginsForWP.
]]>Contact Form 7 is easy to set up and use. But don’t be fooled by its simplicity. It’s versatile enough to be configured precisely for your needs. In addition, it offers a wealth of features that give you the flexibility to engage with users on multiple levels.
Marketers who learn how to integrate Contact Form 7 with MailChimp have the potential to upgrade their sales funnels and efficiently manage a large group of subscribers.
Below, we’ll go over the features that make Contact Form 7 so valuable to marketers and provide a guide for integrating it with MailChimp.
Advantages of Using Contact Form 7 With MailChimp
Contact Form 7 allows you to add subscribers to your MailChimp lists efficiently and provides the following benefits:
- Contact Form 7 enables you to automate the addition and tagging of new contacts. No more manual contact inputs are needed.
- Add users to your automated email marketing campaigns.
- Need a subscription form to match your website’s theme? No problem. Contact Form 7’s design can be customized to fit different aesthetics.
- Form fields are entirely customizable. In addition, all data can be sent to MailChimp for further use.
- Sign-up forms are more versatile with Contact Form 7. Show them anywhere you want using the Contact Form 7/MailChimp shortcode.
Key Features
- Free and easy to use
- It suits the needs of marketing professionals for all business sizes
- Supports customizable fields
- Unlimited contact forms
- Use a unique MailChimp API key for each contact form
- Use a unique MailChimp mailing list for each contact form
- Add an opt-in checkbox to give users a chance to opt-in or opt-out
- The single opt-in option doesn’t send confirmation emails to subscribers
- The double opt-in option sends confirmation emails to subscribers
- Regular updates
- Allowing users to upload files
Premium Features
- Set GDPR for your contact list
- Tag existing MailChimp subscribers
- Group existing MailChimp subscribers
- Unlimited MailChimp custom fields
- Mailchimp email verification
- Unsubscribe feature
- Archive function
- Permanent delete feature
- Unlimited MailChimp tags and groups
- Support for birthdays, language, and text/html
- Support for MailChimp categories, segments, and interests
Getting Started
If you’re ready to integrate the Contact Form 7 extension with MailChimp, follow the steps in the guide below to use the extension.
- Make sure that you’ve signed up for a MailChimp account and installed the plugin “Contact Form 7 MailChimp Extension.”
- On the left-hand side, go to the Contact tab and create a new contact form.
- Inside your MailChimp account, click on your name from the bottom left side of the screen and click on Account.
- Click on Extras, then select API keys.
- Click on the Create a Key button.
- Label and copy your API key. We will need to use it in the next step.
- and paste it into the MailChimp API Key field in the Contact Form 7 extension.
Using Contact Form 7 with MailChimp for WordPress (MC4WP)
Another common way to integrate Contact Form 7 is through the popular MailChimp for WordPress (MC4WP) plugin. If you use this plugin to manage your website, follow the steps below.
-
First, make sure your MailChimp account is connected to your WordPress website. If it already is connected, skip ahead to step 5.
-
In the MC4WP menu, click MailChimp.
-
Enter your API Key copied from your MailChimp account in the text field.
-
Click Save Changes. You’ll see a green box showing a Connected status if it’s operational.
-
Then, go back to the MC4WP menu and click Integrations.
-
Select Contact Form 7.
-
In the MailChimp Lists section, choose the lists where you’ll add subscribers with Contact Form 7.
-
Once you’ve made your selections, click Save Changes.
Create a Contact Form
Follow these steps to create a new contact form:
- Go to Contact and click Add New.
- Add the individual fields you want subscribers to enter when subscribing to your MailChimp list. Make sure that you add the prefix mc4wp before the name of each field and write the field name in uppercase letters.
- If you want to add a checkbox, input the
[mc4wp_checkbox]tag in the form. When users select this checkbox, their data is sent to your MailChimp account. If you want to omit the checkbox and add all the users who submit the form as subscribers, add the following line to the form:<input type="hidden" name="mc4wp-subscribe" value="1" />
- Click Save.
Contact Form 7 is one of many plugins that can integrate with MailChimp. If you’re using Elementor, read our article on integrating Elementor with MailChimp.
Frequently Asked Questions About Integrating Contact Form 7 with MailChimp
If you need help solving any specific issues integrating MailChimp and the Contact Form 7 extension, visit this dedicated wordpress.org forum. You can browse various support threads to see if your problem has been solved in the past. Or, you can sign up to submit a new support topic.
Perhaps you have multiple subscriber lists. In this case, you might need to add subscribers from different forms to various MailChimp lists. Here’s how.
In the MC4WP menu, select MailChimp and scroll down until you see the ID of the list you want to send the data to. You’ll need to add this ID to the Form with the following HTML code snippet. <input name="_mc4wp_lists[]" type="hidden" value="<list id>" />
First, go to the MC4WP menu and select Form. Next, click on Settings and scroll down to the Subscriber tags box. Add the desired tags for subscribers through the contact form in the text field. Then, click Save Changes.
Conclusion
In this article, you learned how to integrate Contact Form 7 to MailChimp in two different ways.
Leave us a comment and know which plugin you chose to achieve this task.
The post How to Integrate Contact Form 7 With MailChimp to Collect Email Leads appeared first on PluginsForWP.
]]>The post How To Add reCaptcha To Contact Form 7 (v3) appeared first on PluginsForWP.
]]>Contact Form 7 is one of the most popular form plugins for WordPress used by millions around the world.
In this article, you’ll learn how to integrate reCaptcha with Contact Form 7 on your WordPress website.
What Is reCaptcha
Bots and malicious software uses websites’ forms to send messages or leave comments with abusive content or spam.
Often, the left content will damage your domain score, hurt the visitors’ experience, and decrease the overall quality of your website.
reCaptcha is a free service created by Google to help protect your website against that.
The service adds a test box that is very easy for humans to solve but very hard for bots.
When adding a reCaptcha to a contact form, you minimize the number of spam messages and guarantee a better user experience.
Integrate reCaptcha With Contact Form 7
To integrate between reCaptcha and CF7 you’ll first need to install the plugin, then get the unique keys for your domain name, and finally, connect between the two.
Step #1: Install Contact Form 7
From your WordPress dashboard, navigate to Plugins -> Add New. Then, search and install the Contact Form 7 plugin.
Once you activated the plugin, move forward and get the API keys.
Step #2: Generate reCaptcha keys
To start using this tool, you’ll need to have a Google account and get the API keys for your domain name.
Open the official reCaptcha website and click on the Admin Console.
Fill the form with your information such as label, type, domain, and etc, and click submit.
Copy both site and secret keys from the next page.
After getting both keys, we can go back to our WordPress website.
Step #3: Connect the keys
In this step, we will paste the keys inside the CF7 integration screen.
First, navigate to Contact -> Integration.
Then, click on setup integration and enter the keys you generated in the last step.
Once pasted, you will see the message that reCaptcha is active on your site.
In the last step, we need to verify that we successfully added the reCaptcha box to our website.
Step #4: Test the form
After entering the reCaptcha keys into the Contact Form 7 settings page, we need to verify that it’s working and active on our website.
Thus, visit your website or the page you’re displaying the contact form 7 on and look for the reCaptcha logo at the bottom right corner.
If you see the logo, it means that you connected between the two successfully and your form is now secured.
That’s it, the two are now integrated together and you won’t get any spam messages any longer.
Related Articles
Conclusion
In this article, you learned how to integrate Google reCaptcha with Contact Form 7 to secure your forms.
Leave us a comment and let us know if you have any questions about the process.
The post How To Add reCaptcha To Contact Form 7 (v3) appeared first on PluginsForWP.
]]>The post Top 7 Best WordPress Upload Plugins appeared first on PluginsForWP.
]]>Because WordPress doesn’t have the built-in functionality to upload files through the front end of the website, we will need to use a plugin to achieve this task.
This article will show you how to upload files to WordPress with a few different plugins.
Best WordPress File Upload Plugins
WordPress upload file plugins are a must-have for some websites that enable their visitors to upload files through the frontend.
Many great WordPress plugins will enable you to give yourself and your visitors the option to upload files to your website.
Many of the plugins below share similar features, and some are unique. Feel free to install them all and test for yourself which plugin suits you the best.
Let’s start by overviewing the list with the first plugin, WPForms.
WPForms
Official website price: $79 | Our price: $4.99
WPForms is a user-friendly WordPress form builder that comes with many great options.
In the last few years, WPForms established itself as one of the best WordPress form plugins, and for good reasons. The available options are limitless, and building the forms can easily be made thanks to the drag and drop interface.
When building a form, you can easily add an upload file field to the form and set a size limit for the uploaded files.
Another great feature of the upload files field is limiting the extension of the uploaded file type. For example, if you have a stock images website, you can define that the only acceptable files are JPG and PNG. That way, you can prevent users from uploading other files such as video files or GIFs.
Features
- Create unlimited forms.
- Easy drag and drop form builder.
- Unlimited and limitless options.
- Frontend file uploads field.
- Updated constantly.
Gravity Forms
Official website price: $59 | Our price: $4.99
The Gravity forms WordPress plugin is another great way to let your users submit files.
Like the WPForms plugin above, building forms with the Gravity plugin is also a straightforward mission thanks to the intuitive, user-friendly drag & drop builder.
The Gravity forms plugin comes fully loaded with excellent features such as conditional logic fields, signatures, captcha, etc.
Like all the other premium form plugins, you can also limit the upload file size and the file kind.
Features:
- User-friendly interface.
- Drag and drop builder.
- Large shortcode library.
- Frontend file upload submission.
- Great customer support.
Happy Forms
Official website price: $69 | Our price: $4.99
Our third option in the premium plugins list is the Happy Forms plugin.
Happy Forms is a relatively new plugin gaining more popularity in WordPress. It provides you with the same features as the other premium form plugins but for a better price.
While the other plugins are running for $99 and over, you can get the Happy Forms plugin for only $69 from their official website. On our website, you can get any of them for only $4.99.
This plugin also lets you define the file types and sizes just like the other two above and limit the number of files that can be submitted.
Features:
- Really easy to setup.
- Conditional logic fields.
- Same features like others but better prices.
- Limit uploads by file count.
- Save abandoned responses.
Formidable
Official website price: $149 | Our price: $4.99
Quickly and easily create drag-and-drop forms with the amazing Formidable plugin.
This is another excellent option in our upload files plugins list and maybe even the best option.
It may be the best plugin to upload files because it gives you more options to control how many and how heavy the uploaded files can be and lets you automatically resize files before upload.
For example, if you are running a photo website where users can upload their photos, you can enable the option to resize the files and decrease the photo size before the upload.
You can save valuable space and loading time by enabling the resize option.
Features
- Can integrate with many apps and plugins.
- Export forms to CSV.
- Multi-page forms.
- Calculator.
- Surveys & polls.
Contact Form 7
Contact form 7 is one of the oldest players in the game.
This plugin has millions of users because it was one of the first and has many free features.
The Contact Form 7 plugin isn’t the most accessible because it’s not a drag and drop builder.
Nevertheless, it’s still giving you (for free) the option to enable file uploads and also more advanced options, just like the premium plugins above.
Features:
- Free
- Can be embedded with shortcodes and Gutenberg blocks.
- Many integrations with apps and services.
WordPress File Upload
This plugin is maybe the easier way to add a file upload option to your website.
Unlike the other options above, this is a minimal plugin that focuses mainly on the upload files option without bells and whistles.
You can embed the file upload field on any page, post, or widget using the [wordpress_file_upload] shortcode.
You can define and set up the plugin from inside the Setting -> WordPress File Upload screen, but the free version of the plugin won’t let you adjust uploaded files size or type, and for that, you’ll need to upgrade to the pro version.
Features:
- Easy to use.
- Very simple.
- Free.
Filester
The last plugin on our list is a file manager plugin called Filter.
Unlike all the other plugins above, this plugin is not for your visitors to upload files but for yourself.
We sometimes want to upload and host files on our WordPress website that we can not upload from the media screen because they are not media files.
Therefore, we find ourselves using an external hosting cloud such as Dropbox or Amazon S3 to upload our files.
Before file manager plugins, it was possible to upload files to WordPress only when using FTP software but not anymore.
Thanks to Filester, you will be able to access your WordPress files and even upload different types of files.
After installing and activating the plugin, navigate the file manager tab and your desired folder. Then, drag the file you would like to upload into the plugin.
Features:
- Free.
- Easy to use.
- Can access WordPress files without FTP.
Conclusion
In this article, we showed you the best WordPress plugins to upload files from the frontend.
Feel free to try all the plugins above yourself and decide which fits your needs the best.
If you are already using one, let us know why you decided that specifically in the comment box below.
The post Top 7 Best WordPress Upload Plugins appeared first on PluginsForWP.
]]>The post How to Integrate Contact Form 7 With PayPal to Accept Payments appeared first on PluginsForWP.
]]>This article will guide you through integrating Contact Form 7 with PayPal to accept payments via forms.
With CF7, you can only set one price for each form. If you have products with variable prices, consider using a different plugin, such as Easy Digital Downloads or WooCommerce.
Integrate Contact Form 7 With PayPal
It’s a good idea to integrate the two when a customer needs to make a payment after submitting a form.
A good example is when your business has a product or service that requires clients to answer questions in a dynamically generated form.
This kid’s Reptile Parties website enables visitors to book a party and set a payment after submitting their order form. That way, they will receive all the necessary information to plan the party, as well as the customers’ payment details.
We can accomplish this in two different ways: the first is by using an add-on plugin, and the second is by creating a PayPal button.
Let’s start with the first way, by using a plugin.
Integrate With a Plugin
In this way, we will use an add-on plugin to integrate your desired form with PayPal.
Step #1: Install the plugin
From your WordPress dashboard, navigate to Plugins -> Add New. Search for Contact Form 7 – PayPal & Stripe Add-on, install, and activate it.
Once installed, please proceed to the plugin dashboard to configure it.
Step #2: Set up the plugin
After activating the plugin, navigate to PayPal & Stripe Settings under the Contact tab.
On this screen, you’ll find several tabs where you can set up the plugin.
- Language & Currency – Set and change the currency used for charging.
- PayPal – Enter your PayPal email address or your Merchant account ID. You can find your Merchant account ID in your PayPal account under ‘Profile’ -> ‘My business info’. Alternatively, you can use your PayPal email address for simplicity.
- Other – Set a PayPal Cancel and Return URL. For example, you can create a new page and call it ‘Incomplete Payment’, and paste its URL in the Cancel URL field. When a customer clicks on ‘Cancel and return to merchant account’ in PayPal, they will be redirected to that page.
If the customer isn’t redirected to PayPal after submission, change the Redirect Method to Method 1 and try resubmitting the form again.
When done, click on the ‘Save Settings’ Button.
Step #3: Enable PayPal
At this step, navigate to the form you would like to integrate with PayPal (Contact tab> Contact Forms> Edit form). Inside the form options, navigate to the PayPal & Stripe tab.
Check the ‘Enable PayPal’ box on this form, enter the item description and amount, and click ‘Save’.
Step #4: Test the form
Once the form is ready, please fill it out and submit it. Then, you will be redirected to PayPal to complete the payment.
If you are not being redirected, change the Redirect Method under the PayPal & Stripe settings tab, and resubmit the form.
If you would like to integrate the two without using a plugin, move on to read the section below.
Integrate Without a Plugin
Using this method, we will integrate CF7 with PayPal without the need for a plugin.
Create the Button in PayPal
First, we will need to create a PayPal link with a specified price amount by making a button within the PayPal dashboard.
Log in to your PayPal account and navigate to Tools> All Tools.
On the left sidebar, click “Integrate PayPal” and then “Buttons.”
Here you’ll have a few buttons to choose from. Since we will use the button link only, without displaying the Button on our website, choose a simple button like ‘Buy Now’.
Fill in the item name field and the price (choose the right currency for you).
You also have the option to add a shipping cost (if the product is physical) and a tax rate.
In steps 2 and 3, set advanced options such as track inventory, profit & loss and etc. Both steps (2 and 3) are optional and we won’t get into it in this tutorial.
Once done, click the Create Button.
On the next screen, you’ll have the button URL under the Email tab. We will use it in a second.
Once the button link is ready, we can proceed and use a function to connect them.
Use the function
The function below will redirect the user to PayPal after clicking on the submit Button.
Paste the code below at the bottom of the functions.php file of your child theme or a site-specific plugin. If you haven’t used a child theme yet, read our article on how to create a child theme.
From your WordPress dashboard, navigate to Appearance -> Theme Editor and click on the functions.php file from the right sidebar.
Now, scroll to the bottom and paste this code.
add_action( 'wp_footer', 'pfwp_connect_cf7_with_paypal' );
function pfwp_connect_cf7_with_paypal() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( 'FORM ID HERE' == event.detail.contactFormId ) {
location = 'LINK HERE';
}
}, false );
</script>
<?php
}Change the Form ID HERE with the actual ID of the form (you can find it in the form shortcode).
[contact-form-7 id="64" title="Cake Decoration Form"]Replace the Link Here with the actual link of the PayPal button (the one we created a moment ago). When done, save the changes.
Now, navigate to the page with that contact form.
Please fill out the form and submit it. If you set it up correctly, you’ll be redirected to PayPal, and you’ll see the button price and description.
Conclusion
In this article, you learned two different ways to integrate the Contact Form 7 plugin with PayPal to accept payments from customers.
You may also be interested in how to integrate reCAPTCHA with Contact Form 7 to prevent spam comments.
Leave us a comment down below and let us know which one of the methods you used to achieve it.
The post How to Integrate Contact Form 7 With PayPal to Accept Payments appeared first on PluginsForWP.
]]>