Tag - Form

How to Build a WordPress AJAX Form (in 4 Easy Steps)


Do you want to build an AJAX contact form in WordPress?

AJAX contact forms allow users to submit the form without reloading a page. This enables you to increase user engagement while offering a better form submission experience to your users.

This comes in handy when you run an eCommerce website and want to collect user feedback without diverting user attention.

You can also use the same AJAX functionality for other custom forms on your website. For example, a custom user login form will allow users to login without an additional page load.

In this article, we will show you how to easily build a WordPress AJAX contact form with step by step instructions.

Creating an Ajax contact form in WordPress

What is Ajax and Why Use it For Your Forms?

Ajax, short for Asynchronous Javascript and XML, is a JavaScript programming technique which allows developers to transfer data without reloading a page.

It is most commonly used in web forms allowing users to submit form data without reloading a page. This makes form submission easy and fast, which improves the overall user experience.

Web applications like Gmail and Facebook extensively use this technique to keep users engaged while making everything work seamlessly in the background.

You can also use Ajax for your WordPress forms. It will save users from unnecessary page reload and keeps them engaged on the page they are currently viewing.

That being said, let’s take a look at how to easily make a WordPress Ajax contact form in 4 simple steps.

1. Install WPForms Plugin

First thing you need to do is install and activate the WPForms plugin. For more details, see our step by step guide on how to install a WordPress plugin.

WPForms is the best WordPress form builder plugin on the market. It allows you to easily create Ajax powered forms aswell.

Upon activation, you need to visit WPForms » Settings page to enter your license key.

WPForms license key

After entering the license key, you’ll be able to receive automatic updates and install add-ons.

You are now all set up to make beautiful ajax forms in WordPress.

2. Create Your First Form

Let’s go ahead and create your first form.

Simply visit WPForms » Add New page in WordPress admin area. You’ll be asked to provide a title for your form and select a template as a starting point.

Choose form template

For the sake of this tutorial, we will be creating a contact form. However you can create any other type of form you need.

WPForms will now load your form with basic fields already added to it. You can simply point and click on any form field to edit it.

Editing form fields in WPForms

You can also add any new form field from the left column by simply clicking on it. The new field will appear at the bottom of your form just above the submit button.

Click to add a new form field

You can easily drag and drop form fields to move them up and down in the form.

Once you are finished editing the form, you can move on to the next step.

3. Turn On Ajax Form Submission Feature

WPForms does not enable Ajax form submission by default. You will need to manually enable it for your form.

Simply switch to the Settings tab in the form builder and check the box next to ‘Enable AJAX form submission’ option.

Turn on Ajax form functionality

Checking the box will turn on the Ajax functionality for this form.

Now let’s set up what happens after the form submission.

First, switch to the ‘Confirmation’ tab under settings. This is where you inform your users that you have received their form submission.

Confirmation settings

WPForms allows you to do that in different ways. For example, you can redirect users to a URL, show them a specific page, or simply display a message on screen.

Since we have enabled Ajax functionality for the form, redirecting users to another page will defeat the purpose of creating an Ajax form.

You need to select the message option and edit the confirmation message. Feel free to use the formatting toolbar on the editor or add a link or two to tell users where to go next.

After that, you can set up how you would like to be notified about a form submission.

Switch to the Notifications tab in the form settings and configure notification email settings.

Form notification email settings

Once you are done, you can save your form and exit the form builder.

4. Add Your Ajax Enabled Form in WordPress

WPForms makes it super easy to add forms into your WordPress posts, pages, and sidebar widgets.

Simply edit the post or page where you want to add the form and insert the WPForms block to your content area.

Add WPForms block to WordPress post or page

After that, you need to select the form you just created from the block’s settings. WPForms will immediately load a live preview of the form in the content editor.

Select your form

You can now save or publish your content and then visit your website to test the form’s ajax functionality.

Ajax contact form preview

You can also add your form to a sidebar widget in WordPress. To do that, go to Appearance » Widgets page and add the WPForms widget to a sidebar.

Add your ajax powered form to a sidebar widget

Select the form you created earlier and click on the Save button to store widget settings. You can now visit your website to see your Ajax powered form in action.

We hope this article helped you learn how to create a WordPress Ajax contact form for your website. You may also want to see our guide on how to create a contact form popup in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link

How to Remove Website URL Field from WordPress Comment Form


Spam comments are a huge problem for many blogs. The biggest reason for spam comments is the desire to get backlinks by using the website url field in the WordPress comment form.

Since majority of the spam is generated by automated bots, you can easily combat comment spam by using free tools and plugins.

The trickier part is to discourage spam comments submitted manually by humans. These unwanted comments are submitted by actual users and are often off-topic, irrelevant, and add no value to the discussion.

In this article, we’ll show you how to remove the website URL field from the WordPress comment form. We’ll also explain why removing the URL field from the comment form will help you discourage spam.

Removing website URL field from WordPress comment form

Why Do People Submit SPAM Comments?

The short answer to that question is SEO or Search Engine Optimization. Let’s take a look at that in details.

Have you ever received comments from users like “Best WordPress Themes”, “Make Money Online”, or “MyBlogName” on your website? Why do they use such keywords instead of their real name?

By default, the WordPress comment form has four fields: name, email, website URL, and the comment box.

When displaying the comments, WordPress automatically hyperlinks the name of the commenter with the website URL they provided.

This backlink provides an incentive for blackhat SEO marketers and newbie bloggers.

They believe this tactic can help them get better rankings for specific keywords in search engines.

This technique does not work for SEO in most cases, but that hasn’t stopped spam comments.

This is why we have removed the URL field altogether from our WordPress comment form. By doing this, we have greatly reduced the number of spam comments on our site.

Real users will leave a comment on your articles whether they get a backlink or not. If someone doesn’t want to comment on your website because they are not getting a backlink, then you really have to question their intention in the first place.

That being said, let’s take a look at how to easily remove the website field from WordPress comment form. We will cover two different methods, and you can choose the one that works best for you.

Remove Website Field from WordPress Comment Form (Plugin)

This method is easier and recommended for all users.

First, you need to install and activate the Comment Link Remove and Comment Tools plugin. For detailed instructions, please follow our step by step guide on how to install a WordPress plugin.

Upon activation, you will see a new menu item called “QC CLR Settings” in the left sidebar of your WordPress admin panel. Clicking on it will take you to plugin’s settings page.

Comment Link Remove and Comment Tools plugin

From here, you need to check the box next to “Remove WEBSITE Field from Comment Form” option.

Once done, you need to scroll down to the bottom of the page and click on the Save Changes button to store your settings.

Since you are already logged in, you will not see the full comment form when visiting an article on your website.

You need to either log out from the WordPress admin area or open a new incognito browser window. After that, you can visit any post on your WordPress site to see the comment form without the website URL field.

Comment form without website URL field

Removing the website field will discourage users who only want to comment on your website to get a backlink.

However, the comments that are already approved will still have their author names linked to their website URL.

To remove them, you need to go back to the settings page of this plugin and check the box next to the “Remove hyperlink from comment AUTHOR Bio” option.

Once you save the changes, the links from the existing comments will be removed as well.

Manually Removing the Website URL Field From WordPress Comment Form

Some users always want to learn how to do things manually instead of using a plugin. The good news is that you can certainly remove the website field from the comment form with the help of a code snippet.

To get started, you need to take a full backup of your WordPress site. This will help you to restore your website files in case you break anything while editing the theme files.

Next, you need to copy and paste the following code to your theme’s functions.php file or a site-specific plugin:

add_filter('comment_form_default_fields', 'unset_url_field');
function unset_url_field($fields)
    if(isset($fields['url']))
       unset($fields['url']);
       return $fields;

This code simply removes the website field from your WordPress comment form. You can visit a blog post on your website in a new incognito tab to see it in action.

We hope this article helped you to learn how to remove the website URL field from the WordPress comment form.

You may also want to check out our guide on how to add reCAPTCHA to WordPress comments to prevent spam comments. For more tips, also see our 12 vital tips to combat comment spam in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Remove Website URL Field from WordPress Comment Form appeared first on WPBeginner.



Source link

How to Add reCAPTCHA to WordPress Comment Form


Are you looking to add reCAPTCHA to your WordPress comment form?

Spam comments have gotten out of control for WordPress websites. As spammers become more sophisticated, they can launch massive spam attacks with little effort.

Akismet, the popular spam filtering service for WordPress blocks about 7.5 million spam comments every hour. Dealing with spam comments can be frustrating, and some bloggers even choose to completely disable comments on their websites.

Instead of turning off the comments, you can add CAPTCHA to the comment form to practically eliminate spam.

In this tutorial, we’ll show you how to easily add reCAPTCHA to the comment form of your WordPress website.

Add reCAPTCHA to WordPress Comment Form

What is Google reCAPTCHA?

ReCAPTCHA is an advanced form of CAPTCHA, which is a technology used to differentiate between robots and human users. CAPTCHA is an acronym for “Completely Automated Public Turing test to tell Computers and Humans Apart”.

Google acquired CAPTCHA technology in 2009 and then later rebranded it as reCAPTCHA. They also made it easier for human users to easily pass the test.

Basically, it presents users with a simple check box that they can click to pass the test. If for some reason the test doesn’t validate, then the user will be presented with a challenge identifying text in an image or matching objects in multiple images.

Google have made reCAPTCHA publicly available, so that website owners can use it on contact forms, login pages, and comment forms to reduce spam.

Here’s an example of what reCPATCHA test looks like to majority of your users:

Google reCAPTCHA tickbox

It is super easy to setup and add to the WordPress comment form.

With that said, let’s see how to easily add reCAPTCHA to the WordPress comment form with step by step instructions.

Step 1: Get Started

First thing you need to do is install and activate the reCAPTCHA in WP comments form plugin. You can see our step by step guide on how to install a WordPress plugin for detailed instructions.

Upon activation, you need to visit Settings » reCAPTCHA in Comments page to configure plugin settings.

reCaptcha plugin settings page

The plugin will ask you to provide Google reCAPTCHA API keys. You can create these keys for free from the official reCAPTCHA website.

Step 2: Register Your Website to Get reCAPTCHA API Keys

The plugin needs 2 Google API keys to add a reCAPTCHA checkbox to your comment form.

To get the API keys, head over to the Google reCAPTCHA website and click on the ‘Admin Console’ button located at the top right corner of the screen.

Visit Google reCAPTCHA website

You’ll be asked to sign in with your Google account. After that, you’ll see the “Register a new site” page where you need to provide some basic information to register your site.

First, you need to type your website name or any name of your choice in the Label field. This will help you easily identify your site in the future.

Adding a new site

Next, you need to select the reCAPTCHA V2 radio button.

This will open up 3 new options. Since you want to add the reCAPTCHA checkbox to your site, you need to select the “I’m not a robot checkbox” option.

The Domains textbox allows you to add the domain name of your website where you would like to add the reCAPTCHA checkbox.

You can also add multiple domains or subdomains by clicking on the plus (+) icon. This will allow you to use the same API keys on different websites.

Add domain and email to reCAPTCHA site

Under Owners, Google will already add your email address. You can also add another email if you want.

Next, you need to accept the terms of service to use Google reCAPTCHA on your site.

Also, select the “Send alerts to owners” checkbox to allow Google to send emails to you if they detect any misconfiguration or suspicious activity.

Submit and register your WordPress site

Once you’ve filled the form, you can click on the Submit button to register your site.

Google reCAPTCHA will now show you a success message along with the site key and the secret key on this page.

Copy site and secret keys

You can now use these API Keys in plugin settings on your website.

Step 3: Add reCAPTCHA to WordPress Comment Form

Head over to Settings » reCAPTCHA in Comments from the left sidebar of your admin panel.

On the settings page, you need to scroll down to paste the site key and the secret key.

Add Google API keys to WordPress site

Once you’re done, click on the “Save your Google reCAPTCHA API Keys pair” button to store the API keys.

The last thing you need to do is enable reCAPTCHA by clicking on the toggle button and then click on Save Changes.

Activate Google reCAPTCHA on your site

You can also do basic customization by clicking on the reCAPTCHA Customizer option.

Customize reCAPTCHA appearance

Here you can make changes to the style, size, and alignment of the reCAPTCHA checkbox.

The plugin also has Antispam Settings option which allows you to decide what to do when the plugin detects an unauthorized comment or security breach.

What to do with spam comments

Congratulations, you’ve successfully added reCAPTCHA to your WordPress comment form. You can now check the comment section of your blog posts to confirm that it’s working properly.

Note: the reCAPTCHA checkbox will be displayed only to logged out users, so you will need to either log out or open your website in an Incognito window of your browser to preview reCAPTCHA.

WordPress comment form with reCAPTCHA enabled

We hope this tutorial helped you learn how to add reCAPTCHA to the WordPress comment form of your website.

You may also want to check out our guide on how to lazy load comments in WordPress to improve the page loading time.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add reCAPTCHA to WordPress Comment Form appeared first on WPBeginner.



Source link

5 Best Contact Form Plugins for WordPress Compared


Are you looking to add a contact form on your WordPress site? Not sure which one of the 1625+ WordPress contact form plugins to use? In this article, we have hand-picked the 5 best contact form plugins for WordPress and compared their pros and cons, so you can easily add a contact form in WordPress.

Best WordPress Contact Form Plugins

1. WPForms

WPForms is the most beginner friendly WordPress contact form plugin. We use it on WPBeginner and all of our other websites. WPForms is built by the same team as WPBeginner with a single goal: Make a WordPress forms plugin that’s both easy and powerful.

WPForms Best WordPress Contact form plugin

Pros

WPForms’ drag & drop online form builder makes it the most user-friendly form plugin for WordPress.

WPForms Lite is available for free in the official WordPress plugin directory meaning you can install it on as many sites as you like for free.

The free version comes with all the basic contact form features including basic form fields, captcha for spam protection, email notifications, and a thank-you page for form confirmation.

The premium version allows you to extend the functionality, so you can build any type of forms such as multi-page forms, email subscription forms, payment forms, order forms, and more.

WPForms pro also comes with other powerful form fields and features like smart conditional logic, file upload, geo-location, signature feature, form abandonment, user-submitted content (post submissions), login and user registration for WordPress, and over 150+ pre-made form templates.

You can see all your form submissions right inside your WordPress dashboard as well as get customized email notifications. You can even setup conditional notifications, so the right person in your team gets notified.

WPForms surveys & polls addon is by far the best WordPress survey solution in the market. It comes with interactive survey reports, real-time polls for WordPress, and all smart survey fields like star ratings, likert scale, NPS, etc.

They also have a form landing page solution to help you create distraction-free form pages in WordPress.

WPForms integrates with all popular email marketing and payment platforms. There are documentation and guides available along with email support to help you when you need it.

WPForms is being used by over 1 million websites and have built quite a loyal following (See: WPForms user reviews).

Cons

While the lite version is free, you need to upgrade to Pro to unlock more powerful features.

Even though WPForms is powerful, the #1 goal of this plugin is to make it user friendly. That’s why it doesn’t have the more complex features that some other form plugins offer.

WPBeginner users can use this WPForms coupon that will give you 50% off the premium version of WPForms.

Get WPForms Pro Now »

Alternatively, you can start with WPForms Lite for Free.

2. Formidable Forms

Formidable Forms is the most advanced WordPress form plugin in the market. They specialize in helping developers build complex form-focused solutions quickly.

Formidable Forms Advanced WordPress form plugin

Pros

Formidable is an all-in-one WordPress form builder that comes with powerful addons to help you go beyond simple contact forms.

You can use Formidable drag and drop interface to create advanced forms like quizzes, surveys, payment forms, registration forms, profile forms, and more.

Advanced users will really love the Formidable Views feature because it allows you to format, filter, and display user-submitted data on the front-end of your website. You can use it to create form-focused solutions like directories, job board listings, event calendars, management systems, rating systems, and more.

You can use Formidable’s advanced calculation fields to create powerful order forms as well as smart calculators like Mortgage calculator, car payment calculator, request a quote calculator, and more.

Formidable integrates with all popular email marketing and payment platforms.

They also have a powerful WooCommerce integration to help you build product forms and even WooCommerce product configurator forms that ties directly to your cart.

Cons

Formidable form builder is not as intuitive as WPForms because they focus on advanced users and developers.

But it makes up for it by being the most extendable form solution in the market. If you’re a developer or agency looking to build form-based solutions or data-driven web applications, then nothing in the market comes close to Formidable Forms.

3. Gravity Forms

Gravity Forms is a paid WordPress form builder plugin that comes with a lot of advanced functionality and features. They also specialize in helping developers build complex form related solutions.

Gravity Forms WordPress form plugin

Pros

Gravity Forms is a powerful drag and drop contact form plugin for WordPress.

With the help of additional add-ons, Gravity Forms can be used to create surveys, quizzes, user submitted content, and even web directory.

It comes with premium support options like FAQs, knowledge base, forums, and email support. This means that help is available when you need it.

Cons

Gravity forms does not have a free version, so it can be a bit expensive than other WordPress contact form plugins. However, if you are using it on multiple sites and projects, then the cost should not be a big deal.

4. Ninja Forms

Ninja Forms is a freemium contact form plugin for WordPress. It can be used to create highly interactive form with very little effort.

Ninja Forms WordPress Form Creation Plugin

Pros

The base plugin for Ninja Forms is available for free from the official WordPress repository. This means you can download and install it on as many sites as you like.

There are premium extensions which allow you to extend Ninja Forms functionality such as connecting with Campaign Monitor, Freshbooks, Salesforce, SMS notifications, etc.

There is a helpful community support option, as well as documentation, guides, and email support.

Cons

Even though the main plugin is available for free, the extensions are not. Buying two or more extensions or even the developer bundle will cost you nearly the same amount as WPForms or Formidable Forms.

5. Contact Form 7

Although we don’t recommend Contact Form 7, this list cannot be complete without the oldest and most downloaded contact form plugin in the official WordPress plugin directory.

Contact Form 7 Free WordPress Contact Form Plugin

Pros

Price is probably the most important advantage of using Contact Form 7. You are free to install it on as many sites as you want.

Although if you’re looking for a free WordPress form plugin, then WPForms Lite, Formidable Forms, and Ninja Forms are all significantly better solutions than Contact Form 7.

There are several third-party plugins that act as add-on plugins for Contact Form 7. Most of them are available for free.

Cons

Contact Form 7 is a below-average solution for creating a basic contact form for your blog. It is very difficult to set up for absolute beginners. The user interface is not intuitive at all.

Since it is a free plugin, support options are limited.

There are several third-party add-ons available for Contact Form 7, but the official plugin website doesn’t have an add-ons directory which makes it difficult to find add-ons to extend the functionality of the base plugin.

Which is the Best Contact Form Plugin for WordPress?

The plugins we mentioned in this article can all help you create a contact form plugin. However deciding the best WordPress form builder plugin varies based on your needs.

If you’re a beginner and don’t want to spend any money, then go with WPForms Lite.

If you’re a business owner and want to create powerful forms without learning code or hiring a developer, then go with the WPForms Pro version.

If you’re a developer trying to build more complex forms, then there’s no better solution than Formidable Forms.

Our overall pick for the best WordPress contact form plugin is WPForms.

We hope this guide helped you choose the best contact form plugin for your WordPress site. You may also want to take a look at our guide on the best WordPress backup plugins compared (Pros and Cons).

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 5 Best Contact Form Plugins for WordPress Compared appeared first on WPBeginner.



Source link

Form Pages by WPForms – Google Forms Alternative for WordPress


Have you ever tried creating a distraction-free form landing page in WordPress? If so, then you likely realized that it is not easy.

The biggest challenge with WordPress forms until now has been that all form layouts are controlled by WordPress themes, and sadly most WordPress themes do not prioritize form layouts.

This forced a lot of WordPress users to use Google Forms to create standalone forms which isn’t an ideal workflow. Since there wasn’t a perfect Google Forms alternative in WordPress, we created one.

Today, I’m excited to announce the launch of Form Pages by WPForms, a “distraction-free” form landing page builder for WordPress to help you improve your form conversions.

Form Pages by WPForms Preview

Form Pages addon for WPForms allows you to quickly create dedicated form landing pages without hiring a developer or writing any code in less than 5 minutes.

Like everything else in WPForms, we made the process “stupid simple”.

You can create a custom landing page for any of your WordPress forms by simply enabling the “Form Page Mode” from the Form Settings.

Form Pages by WPForms

On the settings page, you can add your logo, custom page title, description, and define the landing page URL.

It comes with two different form styles Modern and Classic. The Classic style will give you the exact same look-and-feel of Google Forms whereas the Modern Design will allow you to bring your form into 2019.

You can combine the form styles with six pre-made color schemes. You can also build a custom color scheme by selecting the main color. WPForms will then generate other colors and gradients to automatically build your color scheme.

Once done simply save your settings, and that’s it.

Your custom form landing page is ready to be shared.

Form Pages by WPForms is the perfect Google Forms alternative for WordPress because it lets you build custom form landing pages and combine it with other powerful WPForms features such as smart surveys, conditional logic, payment integrations, marketing integrations, user registration, form abandonment technology, and so much more.

Form Pages addon is available as part of the WPForms Pro plan.

If you’re serious about improving your form conversions, then you need get started with WPForms Pro today.

Bonus: You can get 50% off WPForms when using the coupon code: SAVE50

Thank you as always for your continued support of WPBeginner and our products. We look forward to bringing you even more powerful solutions in 2019.

Syed and the WPBeginner Team



Source link