Tag - Forms

How to Create AMP Forms in WordPress (The Easy Way)

Do you want to create AMP-friendly forms on your WordPress site?

Accelerated Mobile Pages or AMP is a Google project that makes websites load faster on mobile devices.

While AMP offers a great mobile browsing experience by making your webpages load faster, it disables many useful features on your website.

One of them is contact forms. Since AMP uses a limited set of HTML and JavaScript, it cannot load your WordPress forms properly on AMP pages.

But thankfully, now there is an easy solution available. WPForms, the most beginner-friendly WordPress form plugin now helps you create AMP-ready WordPress forms. Their team recently worked with Google to make AMP forms easy for WordPress.

In this article, we will show you how to create AMP forms in WordPress using WPForms (the easy way).

Creating AMP Forms in WordPress (The Easy Way)

Creating AMP Forms in WordPress (Step by Step)

In order to use AMP with WordPress, you need to install and activate the official AMP plugin for WordPress. For more details, see our step by step guide on how to install a WordPress plugin.

Once activated, the plugin will automatically add Google AMP support for your WordPress site.

However, you can change AMP settings for your website by going to AMP » General from your dashboard.

AMP for WordPress Settings

From the AMP settings page, you can enable or disable AMP on your website, choose a website mode for AMP, and choose supported templates.

Once you have configured AMP, the next step is to create an AMP compatible contact form on your WordPress site.

Step 1. Create a WordPress Form with WPForms

To get started, install and activate the WPForms Lite plugin on your site. It is the lite version of the WPForms Pro plugin.

Both the lite and pro version of WPForms allows you to create a basic AMP ready contact form. In our article, we will be using the free version for screenshots.

Once the plugin is installed and activated, you need to head over to WPForms » Add New page to create a new WordPress form.

On the form setup screen, you can choose a form template to get started quickly. You can select the Blank Form if you want to start from scratch.

Form Templates WPForms

Next, it will open the form builder page.

Drag and Drop Form Builder WPForms

From here, you can add or remove form fields. To add a new field to your form, you can simply click on a form field from the left panel, and it will appear in the form builder panel on the right.

After that, you can configure the field options. Simply click on a field, and then Field Options will appear.

Configuring Field Options in WPForms Plugin

Similarly, you can customize all the other fields.

After that, you can click on the Settings tab to configure your form settings.

WPForms General Settings

The General Settings allow you to change your form name, submit button text, submit button processing text, enable anti-spam Honeypot, and more.

Next, you can click on the Notifications tab to set up email notifications to notify you when a user completes the form.

WPForms Notification Settings

Next, you can click on the Confirmation tab to set up a confirmation message to be shown when a user submits the form.

WPForms Confirmation Message Settings

After the configuration is complete, you can save your form.

Step 2. Add Your AMP Form to a Page

Now that your WordPress form is ready, you can add it to a page.

First, you need to create a new page or open an existing one where you want to add the form.

On your page edit screen, click on the Add New Block icon and select the WPForms block.

Add WPForms Block to WordPress Page Editor

After that, you can see the WPForms widget added to your page edit screen. You just need to select the form you created earlier, and the widget will instantly load it in the page editor.

Add Contact Form to WordPress Page with WPForms

Next, you can publish or update your page.

That’s all! You don’t need to configure anything else. The WPForms Lite plugin will add full AMP support to your form now.

If you want to see how it looks, then you can open the page on your mobile phone.

Or you can open the page on your desktop browser by adding /amp/ or /?amp at the end of your page URL. For example, https://www.example.com/contact/?amp.

Adding Google reCAPTCHA to Your AMP Form

By default, WPForms includes anti-spam honeypot to catch and block spam. Additionally, you can use Google reCAPTCHA to reduce spam submissions.

To use Google reCAPTCHA with your AMP forms, you need to register your site for Google reCAPTCHA v3 and get the Google API keys.

Go to the Google reCAPTCHA website and click on the ‘Admin Console’ button at the top right corner of the page.

Visit Google reCAPTCHA website

After that, you need to sign in with your Google account. Once done, you will see the ‘Register a new site’ page.

Register a New Site for Google reCAPTCHA

First, you need to enter your website name in the Label field. Google AMP only supports reCAPTCHA v3, so you need to choose it from the reCAPTCHA type options.

After that, enter your domain name under the Domains section.

Add Domain Name and Owner for Google reCAPTCHA

The Owners section shows your email address by default. You can also add another email if you want.

Next, you need to accept the reCAPTCHA Terms of Service to continue. Also, select the ‘Send alerts to owners’ checkbox, which will allow Google to notify you about problems like misconfiguration and suspicious traffic on your site.

Accept Google reCAPTCHA Terms of Service

Once done, click on the Submit button.

Next, you will see a success message along with the site key and the secret key to add reCAPTCHA on your site.


Now you have the Google API keys to add reCAPTCHA to your forms. However, there is one more adjustment required to ensure AMP compatibility with the reCATCHA. Click on the ‘Go to Settings’ link there.

Next, you will see the reCAPTCHA settings again with ‘Allow this key to work with AMP pages’ checkbox. Simply check the box and click on the Save button below.

Allow reCAPTCHA to work on AMP Pages

Now that you have Google API keys to add reCAPTCHA on AMP forms, you need to open WPForms » Settings » reCAPTCHA page in your WordPress dashboard.

WPForms reCAPTCHA Settings WordPress

On this screen, you need to choose reCAPTCHA v3 option and paste the site key and secret key. After that, click on the Save Settings button.

Now that Google reCAPTCHA is added to WPForms, you can enable it in your forms where needed. Go to WPForms » All Forms and select the form where you want to enable the reCAPTCHA.

Edit a Form Created with WPForms

Once the form setup screen appears, click on the Settings tab and select the General Settings section. At the bottom, you can see ‘Enable Google v3 reCAPTCHA’ checkbox.

Enable Google v3 reCAPTCHA in WPForms

Check the box and then save your form by clicking on the Save button at the top right corner.

After that, you can revisit your contact page and see the AMP form with reCAPTCHA in action.

We hope this article helped you to learn how to create AMP forms in WordPress easily. You may also want to see our guide on how to create GDPR compliant forms 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 Create Conversational Forms in WordPress (Typeform Alternative)

Do you want to make your forms feel more human? Many of our readers have asked us to write a tutorial on how to create a Typeform-like form in WordPress.

Unlike a traditional contact form or survey form that lists all question at once, conversational forms take a one question at a time approach similar to a face-to-face conversation.

This makes conversational forms less overwhelming for users and result in higher form completion rate. In this article, we will show you how to create a conversational form in WordPress.

How to Create Conversational Forms in WordPress Easily

Conversational Form Plugin for WordPress (Typeform Alternative)

Previously it was hard to create conversational forms in WordPress because there wasn’t a good WordPress-focused solution.

Several SaaS applications offered this feature with Typeform being the most popular one, but it had several downsides:

  • Typeform is a SAAS (software as a service) tool which stores your forms data on their servers. This means you’re trusting someone else for your data security.
  • Typeform is expensive if you’re a small business. The premium plans start from $30 / user / month, and if you want more features, then it costs $59 / user / month.

While Typeform offered a free plan, it was too limited which made it less attractive for WordPress users.

This is why we asked our team at WPForms to create a Typeform alternative for WordPress.

Conversational Forms by WPForms lets you create interactive WordPress forms without the high costs of Typeform.

WPForms Conversational Forms Addon

See the Conversational Form Demo

WPForms is the most user-friendly WordPress form plugin that’s used by over 1 million websites.

This new addon helps you transform any form into a conversational form in less than 90 seconds.

Unlike Typeform, WPForms is an open-source WordPress plugin which means all your form data is stored on your website, not some third-party app.

WPForms is more cost-effective than Typeform. You can buy the yearly plan for $199 which gives you unlimited forms, surveys, and tons of other powerful features including Conversational Forms.

Let’s take a look at how to easily create a conversational form on your WordPress website.

Disclosure: WPForms is created by the same team behind WPBeginner. It is one of our premium WordPress plugins.

Creating Conversational Forms in WordPress

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

You will need at least the ‘Pro’ plan to access the ‘Conversational Forms Addon’. WPBeginner users can get 50% OFF on all WPForms licenses using our WPForms coupon.

Once the plugin is activated, you need to visit the WPForms » Settings page to verify your license key. You can find this information in your account area on WPForms website.

WPForms license

Next, you need to go to WPForms » Addons page and find the Conversational Forms addon.

Install Conversational Forms addon by WPForms

Simply click the install button, and the plugin will install and activate the Conversational Form addon within a few seconds.

When you see the addon status as ‘Active’, it means that you can start using it.

WPForms Conversational Forms addon active

You can enable conversational forms for any new or existing forms created with WPForms.

Conversational forms are useful in reducing form abandonment. The interactivity and face-to-face conversation approach leads to a higher form completion rate.

This is highly effective on the following types of forms:

These forms are typically longer and include more fields. If you display all those questions at once, then users feel overwhelmed and abandon the form.

Conversational forms fix this by asking users to answer one question at a time. Instead of a tedious long form, it feels more interactive and keeps users engaged.

In this example, we will show you how to create a conversational survey form.

First, you need to create a regular survey form. You can do this by clicking on WPForms » Add New in your WordPress admin area. For more details, see our step by step guide on how to create a survey in WordPress.

Creating a form with WPForms is easy using its simple drag and drop interface. You can drag form fields on the left to the form editor on the right side.

For instance, here’s how a sample WPForms survey form editor looks like:

Editing Survey Form with WPForms

Once you have added your survey questions, go to Settings » Conversational Forms tab on the left panel. You need to check the ‘Enable Conversational Form Mode’ box.

Enable Conversational Form Mode in WPForms

After that, you will see the conversational form settings and customization options. These options allow you to design an attractive conversational form landing page with your logo, color scheme, and message.

Conversational Form Landing Page Options WordPress

You can preview your form anytime by clicking on the ‘Preview Conversational Form’ button on the top right corner under Conversational Form settings.

Preview button for Conversational Forms WordPress

At first, you will see the Conversational Form Title field. You can enter a short descriptive title for your form there. For example: Please, Take Our Survey!

WPForms Conversational Form Title

Next, there is a Message field where you can add a short message to encourage your users to complete the form.

Conversational Form Landing Page Message

As you scroll down, you will see the Permalink option.

The permalink is a unique URL for your conversational form landing page. The plugin automatically creates it for each conversational form by using your form’s title. You can change that if needed.

Conversational Form Page Permalink Option

While setting up a permalink, make sure that it is short and simple because you may want to use this URL in your email campaigns or social media posts.

Next thing you can do to customize your conversational form page is to add a header logo. Click on the ‘Upload Image’ button, then choose an image to upload.

Upload Header Image in Conversational Form Landing Page

Below that, you’ll see a checkbox option to hide WPForms branding. Check the box next to ‘Hide WPForms Branding’ if you don’t want to display ‘powered by WPForms’ message on your form landing page.

You can preview how the branding appears by clicking the Preview Conversational Form button on the top right corner.

WPForms Branding in Conversational Form Landing page

After that, there is a Color Scheme option to customize your form Submit button and page background. You can use one of the pre-set colors or choose a new color by using the color picker.

Choose a Color Scheme for Your Conversational Form Page

Lastly, there is the Progress Bar option. You can choose one from the 2 styles: Percentage and Proportion.

WPForms Conversational Form Progress Bar Options

If you want to see how each progress bar style looks, you can select the styles one by one and preview the form. Or you can see our screenshot:

Conversational Forms Progress Bar Styles - Percentage vs. Proportion

Once you have configured all your conversational form settings, you can preview it to see how it looks on a live site. Next, click on the ‘Save’ button on the top to store your settings.

Save Conversational Form Landing Page Options

That’s it!

Now you can open your conversational form link in your browser to see it in action. Here’s how our conversational survey form page looked:

Conversational Form Landing Page Preview

You can check the official WForms Conversational Forms demo to see how the interactive form elements works.

Now that your conversational form landing page is ready, you can add the link to your WordPress Navigation menu, use it in your email campaigns, social media updates, or blog posts.

We hope this article helped you learn how to easily create conversational forms in WordPress. You may also want to check out our guide on how to track user engagement on your site.

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

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