Quantcast
Channel: WordPress Tutorials Archives - Formidable Forms
Viewing all 521 articles
Browse latest View live

Add a Color Picker Form Field

$
0
0

Several Formidable Pro users have requested the ability to add a color picker field into a form. This post explains exactly how to do that.

This tutorial and the screenshots displayed are taken from the default 2011 theme.

Step 1: Get the files

The color picker javascript (jscolor) used in this tutorial can be downloaded directly by clicking here. Or if you would like to read more about jscolor.js, Click here to go to the developer’s website.
Once downloaded, unzip/extract the file and upload the entire folder (js file and all the images) in your theme’s javascript or js folder if there is one. If there is no folder containing javascripts, you may want to create one.

Step 2: Load the Javascript

If you are familiar with developing themes, you likely know how to load a javascript into a wordpress site. For those of you who don’t know or just forgot, read on.
With the jscolor folder uploaded to your site, you can add the following script to load it onto all your wordpress pages. There are much fancier ways of doing this, but for now we will go for the easiest/quickest method.

  1. open your header.php file
  2. load the jscolor javascript by adding the following line of code somewhere just above the wp_head(); hook
    <script src="<?php echo get_template_directory_uri(); ?>/js/jscolor/jscolor.js" type="text/javascript"></script>

    Be sure to change the path to reflect where you put your file.

  3. check the page source of your site to make sure the file is there in your head

Step 3: Create your form and insert it on a page

In my example, I created a simple 1-field form with a single line text field.

At this point, you should have a form with your single text field displaying on the front end. If you click on the field, it behaves as any normal text field would. Here’s what my form looks like after following steps 1-3:

Step 4: Add some Class to the Drab Text Field

Update: As of version 1.6.3, this class can be added by going to the form settings page, clicking the “Customize HTML” tab, and changing [input] in the box for this field to [input class="color"]

And when I say “some class”, I really mean “a class”. More specifically, class=”color”. To add a class to an input we need to make use of one of formidable’s many hooks. The following code should be added to your theme’s function.php file:
add_filter('frm_field_classes', 'add_input_class', 10, 2);
function add_input_class($classes, $field){
if($field['id'] == 80){ //change 80 to the ID of your field
$classes .= ' color';
}
return $classes;
}

There are two keys to making sure the code above works for you:

  • Change the “80″ to the ID specific to your field
  • Don’t change anything else in the code above unless you know what you are doing

After copying and pasting this into your functions.php file, make sure to change the field ID from 80(my field ID) to whatever your field ID is. You can find the field ID by clicking on the field in the form builder page. The ID is in blue bar that expands the field options. This is the magic code that activates the color picker javascript, and if you have done everything correctly, you should have something like this:


Create Maps from Form Entries

$
0
0

MapPress is a free plugin that creates Google maps. You may have a form that collects address information that you want to generate a map from. This is handy with business listings, real estate listings, and many others.

  1. Install plugins. If you haven’t already, you need to install Formidable Pro and MapPress. The pro version of Formidable is needed for the custom display feature.
  2. Create your form. First, you need a form to collect the addresses you want to use in your maps. You can use any number of fields for your address that you would like. One field for the whole address, or multiple fields to separate out the city and state.
  3. Add a new shortocode. Copy and paste the following code into a new plugin or your theme functions.php file. If your not sure where to add it, put it add the very end of your functions.php right before the ending ?> if there is one. This doesn’t need any modification or changes.
    add_shortcode('form_to_mappress', 'form_to_mappress');
    function form_to_mappress($atts) {
         extract(shortcode_atts(array(
    	      'width' => 600, 'title' => '', 'body' => '',
                  'address1' => '', 'address2' => '', 'directions' => 'none'
         ), $atts));
    
         $mymap = new Mappress_Map(array("width" => $width));
         $mypoi_1 = new Mappress_Poi(array("title" => $title, "body" => $body, "address" => $address1));
         $mypoi_1->geocode();
         $mymap->pois = array($mypoi_1);
         if($address2 != ''){
           $mypoi_2 = new Mappress_Poi(array("address" => $address2));
           $mypoi_2->geocode();
           $mymap->pois = $mypoi_2;
         }
         return $mymap->display(array('directions' => $directions));
    }
  4. Create your custom display. Now, create a custom display to loop through your entries and display them on a page. The specific settings for your custom display don’t matter. In the spot you would like to insert your map, use the new shortcode you just created above.
    [form_to_mappress address1="[25]” address2=”[26]” title=”[27]” body=”[28]” width=300 directions=”google”]
    [25], [26], [27], and [28] should be replaced with field IDs or keys for your form using the dropdowns above the content/dynamic content boxes. If you only want a single point on the map, your shortcode might look like this: [form_to_mappress address1="[25]“]

    The “directions” parameter accepts “inline”, “google”, or “none”. Choose “inline” to include a link in each map marker for directions or “google” to display a directions window from Google.

    Or, if you are using multiple fields to collect your address information:
    [form_to_mappress address1="[25], [31], [32]“]
    [25] = Address line
    [31] = City
    [32] = State

    This shortcode will work independent of Formidable as well if you want to hardcode an address.
    [form_to_mappress address1="500 chestnut st, phildelphia" width="400" title="DC" body="Beautiful Washington, DC"]

  5. Publish. There are a number of ways you might be publishing: automatically in generated posts, automatically using the settings in the custom display, or by inserting the shortcode on a page. If you are inserting the shortcode, you MUST include a parameter to tell Formidable to run the content through WordPress filters, filter=1.
    [ display-frm-data id=x filter=1]

Adding progress bar to multi-paged forms

$
0
0

This blog post demonstrates a simple method for adding a progress bar to your multi-paged forms using a third-party plugin found on the WordPress repository. The plugin is called “Progress Bar” and it can be found here: http://wordpress.org/extend/plugins/progress-bar/ . With this plugin installed and activated, you can add nice looking CSS3 progress bars to your forms by adding progress shortcodes in your form. Follow these steps:

    Progress Bar 1
  1. Install and activate the Progress Bar plugin by Chris Reynolds
  2. Build your multi-page form in Formidable Pro using the “page break” field type to indicate where each page will start
  3. Add new “HTML” fields before your “page 1″ fields and directly following all “page break” fields in your form. This assumes you want the progress bar at the top of your pages, but you can add them anywhere you would like progress bars to be displayed in your form.
  4. Add progress bars to your newly created HTML fields by clicking on the “field options” bar on each of your HTML fields. You can type the Progress Bar shortcode directly in the “content” box found in these field options. For demos of the different progress bar types, colors and options with their associated shortcodes, click here.
  5. Your HTML field options should look something like this

    Progress Bar 2
  6. If you would also like to add a progress bar to the success message, you can do so on the form setting page as shown here: Progress Bar 3

That’s it. The result should be a progress bar at the top of each page of your form indicating the total progress. Here is a screenshot of what my overall form looks like on the form builder page and an example of page 2 of my form:
Progress Bar 4
Progress Bar 5

How to build a Business Directory in WordPress

$
0
0

Creating a business directory or any other type of listing in WordPress can be tricky. Collecting information with your form builder plugin is one thing, but displaying that data in a useful and unique way is where a lot of plugins fall short. Fortunately, the Pro version of Formidable Forms was built with displaying data in mind and has all of the tools you need to quickly and easily start building a directory with WordPress. So let's get started.

Step 1: Build and Publish your Data Collection Form

First You'll want to create a form to collect the information you would like to show in your directory. Using the drag-and drop interface native to Formidable Forms, this step is a piece of cake. Adding that form to a page is equally simple, just use the shortcode builder on your posts and pages composer to add your form. I have taken a few minutes (literally 2 minutes) to create and publish a simple form below step 2, but no skipping ahead.

Step 2: Collect the data

You can collect data in a couple ways. If you already have data collected, importing from a csv file is your best option. Alternatively, you can create entries with the form you created in step 1. Another option is to simply allow others to enter their own information by submitting your published form. With the use of permissions and editing tools, you can allow users to edit/update their own information, prevent user's who are not logged in from adding entries, even require payment before a user can submit their entry.

Go ahead and enter a name and company to be added to my demo directory.


Simple Directory

Simple Directory

Sending

Step 3: Build and Publish your Directory

Formidable Forms is the only form builder plugin with the ability to display form submissions without the need for additional plugins or add-ons. Views allow you to display your form entries in a totally custom way. With the use of dynamic filters, search and sorting options, you have total control over how entries are displayed, which entries are displayed, their order, and how many per page. I have set up my View to simply show the 5 most recent submissions. Pagination is built in, but not helpful for this demonstration. If you entered your name in the form above, you should be listed at the top of the directory


First Name Last Name Company
j p jpp
j p jpp
Donna Dowson Danone
Jim Johns Jimmy Johns
Matt Mullenweg Automattic

Step 4: Add Features

Search: What use is a directory if your users can't find who or what they are looking for? Adding a search form allows you to quickly find that needle in a haystack. Test it out below. Search for your name or mine (Steve). The View above will update to show only listings that match all your search criteria.


Simple Directory Search

Simple Directory Search

Sending

Detail Pages Have you ever wanted a super clean and simple directory, but have a ton of information that needs to be accessible? So have we. That's why we built in detail pages. Display only necessary info on the listing page, and then let users get all the details on the detail page. Our simple directory form only has 3 fields, so it isn't the best candidate to show off this feature, but this will at least give you an idea for how it works. Click a name to see the rest of the user's information.


First Name
j
j
Donna
Jim
Matt

With 4 easy steps, you can create a searchable business directory. If you are tired of collecting form data without any way of using it in a powerful way, maybe it is time you considered Formidable Forms.

For more advanced demos of the power of Forms and Views, check out our Demos Page or Check out our Pricing to get started today.

The post How to build a Business Directory in WordPress appeared first on Formidable Forms.

How to Easily Create a Poll and Display Results

$
0
0

How to Easily Create a Poll and Display Results

Today’s content marketing landscape looks different than it did in the early years. Today, there is much less talking to your audience and much more talking with your audience.

The bottom line: if your content is not engaging, you’re missing out on important interactions with your audience.

One very easy way to begin an engaging conversation with your audience is with a poll. In this post we are going to cover how to easily create a poll and display results with Formidable.

What is a Poll?

A poll is content. Engaging content. A poll helps you listen to your audience while they are engaging with your site.

A poll is different from a survey. How? A survey asks multiple questions, whereas a poll asks one question. Surveys require a larger time commitment. A poll? Not so much. Polls are fairly irresistible. Who doesn’t want to talk about their preferences?

Next time you are at the water cooler or coffee bar at work, test it out. Ask someone their preference on a particular topic. Most people will gladly give their opinion and more. Wink wink on the “more” part.

Because polls only ask one question, they tend to garner more responses than a longer survey. They are easier to answer. Plus, people want to see the results. Surveys don’t often lend themselves to immediate feedback, whereas polls allow people to see how they stack up against others in their tribe.

Why Are Polls Used?

Polls allow you to listen to your website visitors. If you are listening to them, hopefully you are learning about your audience. Listening to your audience and learning their preferences will give you an edge over your competitors who aren’t doing this. Most importantly, though, polls engage your users.

Tribe Engagement

People want to engage with what is meaningful to them. Part of this has to do with wanting to know how they stack up against their tribe. People are constantly self-monitoring. They want to know if their perception of self lines up with how their tribe perceives itself.

The tribe mentality concept as it refers to marketing was coined by Seth Godin in 2008 with his book “Tribes: We Need You to Lead Us” published in 2008. A tribe in marketing terms is essentially a group of people connected around a certain lifestyle choice. When a brand is able to connect to a tribe and be seen as a thought leader and influencer, the brand will flourish.

People want to know how their tribe thinks and how they stack up within their tribe. That’s why polls need to also show pollees their results.

People want to engage with content that is meaningful to them. I recently took my fifteen year old daughter to a Twenty One Pilots concert. Prior to attending the concert, she knew very little about the guys who call themselves Twenty One Pilots. Twenty One Pilots weren’t very meaningful to her yet. After the concert, however, she began looking up YouTube videos and social media about the band. She wanted to engage with them.

How to Know What’s Hot to Poll

Staying abreast of your audience’s preferences and trends by doing such things as engaging with them on social media, integrating (instead of isolating) customer service and support, and watching your email marketing campaign performance will help guide you into what makes an engaging poll. Ask:

  • What is my tribe concerned about right now, personally, as well as what regards our tribe?
  • What is my tribe feeling insecure about right now? (This is where your tribe will be incentivized because they want to know how they stack up with their poll response against their tribe.)
  • What polarizes my tribe? (Engaging content is content that is not designed to be passive or easily overlooked.)
  • What unites my tribe? (This is where poll users may give answers that are so obvious but they are irresistible to answer.)
  • What might/ might not my tribe want to dip their toe into? Is there an issue or product or philosophy that my tribe wants to begin to engage with, but it is so new it is going to take some first adapters? Polls can plant seeds and give first adapters credibility.

How to Easily Create a Poll and Display Results

Formidable makes it very easy to create a poll and display results. The secret to an engaging poll is to not show results at the outset. Part of the motivation for answering a poll is seeing the results. If you show the results with the poll question before the user answers, you’ve removed much of the incentive for answering.

Step One: Build the Form to Ask the Question

The beautiful thing about building a poll form is there is only one question on the form. It doesn’t get any easier than that. Make sure to make the question field “required.” Otherwise, users can submit the form without answering the poll just so they can see results. Embed your poll using shortcode on a page or widget in the location of your choice on your site.

Tip: The * can be toggled on and off from the “build” tab without going into the field options to require any field.

#1 Build Poll

Step Two: Create the Graph

All the directions you need to know for inserting a graph can be found here. Here’s how it looks while creating a pie chart.

#4 Insert a Graph

My favorite is the Formidable 3D pie chart. The bold colors draw users into the vibrancy of the results.

#2 3D pie chart

Step Three: Redirect Users to the Graph page upon Submit

Maintaining the incentive to answer the poll by keeping the results hidden until submit rests upon the redirect option in General Form Settings.

#5

This should give some general sense of what polls can do as part of an overarching content marketing strategy. Let us know what you’ve found works for you. We’d love to see how you are using Formidable to build polls.

The post How to Easily Create a Poll and Display Results appeared first on Formidable Forms.

OptinMonster and Formidable Forms: Easy Integration Using MailChimp Add-On

$
0
0

OptinMonster and Formidable Forms Easy Integration Using Mailchimp

November 22-30th only. Get 35% off with the coupon code BF2016

Maximizing the effectiveness of your opt-in forms

Whoever said “email marketing is dead” was dead wrong. It’s alive and well. The question of the effectiveness of email marketing isn’t one we’ll be tackling here. But here’s a simple question: how are your opt-in forms doing? Are they dull and uninspiring? Are they converting your visitors to subscribers? This post is going to show you how to use OptinMonster and Formidable Forms together to maximize your opt-in forms. For purposes of demonstration, we've used the MailChimp Add-On.

OptinMonster Mascot

OptinMonster's mascot

There are several tools out there to maximize the effectiveness of opt-in forms. The ever-popular OptinMonster makes design and configurability of opt-in forms a snap. We get asked about it a lot. Users want to know if Formidable Forms plays well with OptinMonster. The answer is, of course, yes. (Formidable plays nicely with everyone, even monsters munching on envelopes!)

It’s very simple to optimize your opt-in forms through integration of OptinMonster and Formidable Forms. No custom code is needed.

If you aren’t currently an OptinMonster account holder, check out the comprehensive review by Joe Fylan to see if OptinMonster is right for your site.

Why integrate OptinMonster and Formidable Forms?

Integrating Formidable Forms with OptinMonster requires a few extra steps than if you were simply integrating OptinMonster with your Email Marketing Provider. Essentially, Formidable integrates via a custom HTML integration versus a standard email provider integration with OptinMonster.

Formidable Forms becomes the middleman between OptinMonster and your Email Marketing Provider. As far as middlemen go, sometimes they enhance the transaction; sometimes they cost you more. In this instance, Formidable Forms as the middleman opens up your options and capabilities in so many ways. It doesn’t cost you any more (if you already use Formidable) but it enhances what you can do with your opt-ins.

All of the power of Formidable Forms behind your opt-in

When you integrate Formidable Forms with your OptinMonster opt-in, you’ll have all the power of Formidable available to you. You’ll have more control over your form style and form data.

Take form fields for instance. Unless you are custom coding your OptinMonster form from scratch, OptinMonster’s default field settings include only fields for name and email address. Custom HTML integration via your Email Marketing Provider (i.e. MailChimp, Campaign Monitor or MyEmma) is available, but then you are limited to the form design restrictions allowed by your Email Marketing Provider (unless you use custom code).

With a Formidable Forms integration, you can add or change opt-in fields, have complete control over your form styling, and use your OptinMonster popup for more than simple email opt-ins. You can do this all without custom code.

You have the ability to register users, collect payments, send autoresponders and anything else Formidable handles, all within a well-timed popup.

Here are the simple steps to integrate your Formidable Forms with OptinMonster. We’ve integrated an OptinMonster popup form on our FormidablePro.com website and taken screenshots to show you what the process looks like.

Step one: create an OptinMonster account

Start by creating an OptinMonster account if you don’t already have one. You’ll also need to have the OptinMonster WordPress plugin downloaded and activated on your site. Add your new API Credentials into the fields in your plugin on your site as shown below.

OptinMonster and Formidable Forms: Screenshot showing API credentials in OptinMonster Plugin

Step two: create your OptinMonster opt-in

Create your opt-in within your OptinMonster account. OptinMonster’s website gives a handy step-by-step instruction post.

Choose your theme

Complete custom CSS is an option within OptinMonster. But for purposes of this blog post we will be working with an OptinMonster templated theme.

We decided to use the “Transparent” lightbox theme. This is how it looks in OptinMonster before customization. You can see the form field area for the theme. Our Formidable Form that we are about to create will need to fit inside this OptinMonster templated theme area.

OptinMonster and Formidable Forms lightbox transparent template

We created our own image to replace the smart bedding image and uploaded it into OptinMonster. This is accomplished in the Setup area of your OptinMonster editing dashboard.

Now it’s time to create the form in Formidable that you plan to integrate.

Step three: create your form in Formidable Forms

Create your form in Formidable Forms. Make sure you have your Email Marketing Provider integrated with Formidable Forms. The Email Marketing Provider that we use is MailChimp. Screenshots reflect the Formidable Forms MailChimp add-on.

Set up your Form Style

The default Formidable style will fit in the templated theme area of your OptinMonster opt-in. We just created a new style so we could change color and font size. We named our style “OptinMonster Form” and we chose the colors and field settings we wanted.

To have your Submit button match the width of your fields, set the Submit button width to 100% in the Formidable Style you are using.

Override theme styling

In order to allow your form styling to override OptinMonster’s theme styling, make sure to check Override Theme Styling in the general section of Formidable’s Edit Styles. If we didn’t do this, we would still have the green Submit button in our chosen theme. We instead want orange to match the colors of our website.

OptinMonster and Formidable Forms Styles screenshot

Set up your fields

Create your form in Formidable’s Build tab. Our opt-in for demonstration purposes is an email opt-in and we’ve chosen not to ask for a name.

What fields should your form contain? That’s up to you. With a Formidable Forms integration, you have expanded field options. For an email opt-in, you obviously need an email field. Whether or not you use a name field (or first name field and last name field) is up to you. Do you personalize your emails to subscribers? If so, you may want to use at least a first name field.

Set up your form action

Send your new opt-ins to your Email Marketing Provider by setting up your form action. MailChimp users accomplish this with an Add to MailChimp Form Action.

OptinMonster and Formidable Forms Integration: MailChimp form action screenshot

Inside your Add to MailChimp Form Action, you can choose which list to map your sign-ups to. Formidable shows whatever your MailChimp account list settings are.

Formidable Forms and OptinMonster Integration: Map to MailChimp screenshot

Map your opt-ins

Map your opt-in sign ups to a list (and a group if you’d like) that you have set up in your Email Marketing Provider account.

As you can see here, we’ve set up a field that maps our sign-ups to a group we have set up in MailChimp. The group is called “Signup Source: Site” Each submission will automatically map to this group in MailChimp. This is an option to us since we have this group already set up in MailChimp. For more help with this, click here.

The mapping field “Signup Source” is set as a hidden field. For more information on how to accomplish this, see the documentation here.

 

OptinMonster and Formidable Forms Integration with MailChimp list mapping screenshot

Set up AJAX

In your Form Settings, be sure to check Submit this form with AJAX in your General settings. This will allow your form submission to submit without an entire page refresh. This is important so that your success message will show immediately in the opt-in window after submission. If you don’t check this, your success message will create a refreshed page. A refreshed page brings the pop up open again. That would skew your conversion rates and provide a less than great experience for your visitor.

OptinMonster and Formidable Forms Integration AJAX setting screenshot

Add om-trigger-conversion CSS class to custom HTML of Formidable Forms submit button

In the Customize HTML form settings, you’ll need to add some custom HTML to your Submit button. This is a CSS class provided by OptinMonster required for the integration. It ensures that you can track conversions.

You need to change the HTML in the Submit button box from:

<input type="submit" value="[button_label]" [button_action] />

to:

<input type="submit" value="[button_label]” class=“om-trigger-conversion” [button_action] />

OptinMonster and Formidable Forms Integration om-trigger-conversion CSS class

Set up your success message

Whatever you want your opt-in form to show for successful opt-ins, you’ll need to set up in the Messages section of your General Form Settings. With custom HTML integration in OptinMonster, the success settings are disabled in OptinMonster and dependent upon what you’ve set up in Formidable. Styling for your success message can be done in the Styles section of Formidable. Our success message reads “You’re a PRO! Check your email to confirm.”

OptinMonster and Formidable Forms integration success message screenshot

Here's how it looks live after submission by a new subscriber.

Formidable Forms and OptinMonster integration Success message live screenshot

Step 4: Integrate Formidable Forms with OptinMonster within OptinMonster dashboard

We’re about to go back to your OptinMonster opt-in editing dashboard and prepare your custom integration. This part is easy. Before you leave the form you just created in Formidable, grab your form shortcode as shown below by copying it onto your clipboard.

OptinMonster and Formidable Forms integration shortcode screenshot

Go to your OptinMonster editing dashboard. Choose “Custom HTML” as Email Provider and paste your form shortcode into the first line of Custom HTML Form Code.

OptinMonster and Formidable Forms integration Custom HTML screenshot

Once you have added your shortcode, you can see that the shortcode appears in the templated theme area. You won’t be able to see the actual form until it’s seen in testing on an actual WordPress page. For now, just know that you need to see your form shortcode in the form area in OptinMonster.

OptinMonster and Formidable Forms custom HTML integration shortcode screenshot

Once live, our opt-in shows the actual form styling we have set up in Formidable.

OptinMonster and Formidable Forms custom HTML integration live screenshot

Include custom CSS if necessary

We actually ran into a small issue with our image, even though it was sized correctly according to OptinMonster specs. It was causing the image to not quite stretch as far as it needed across the theme template, leaving a sliver of white space on one edge of the opt-in. We added custom CSS code to stretch it an additional two pixels, which fixed the problem. See below for where any custom CSS will go.

OptinMonster and Formidable Forms custom integration showing custom CSS addition in OptinMonster dashboard

CRITICAL STEP: Refresh Optins within your plugin settings

In order for all your changes and integration to show live on your website, you need to Refresh Optins within your plugin settings. Refreshing will take in all your changes. You won’t be able to see your opt-in without doing this critical step.

OptinMonster and Formidable Forms integration Refresh Optins screenshot

Step 5: Test and configure your opt-in

Your integration with Formidable Forms is complete! You’re now ready to test your optin. Find step by step instructions for testing here.

Override cookie settings for testing

When it comes to testing, you’ll need to override your browser’s cookie settings. We found Google Chrome’s Incognito setting worked really well for this. Incognito allowed us to view the opt-in over and over again on our testing page until we had it formatted just right.

Decide timing and placement for your opt-in

Once you are satisfied that your opt-in is displaying and functioning properly, decide the timing and placement of your opt-in. This is found in the Display Rules section of your OptinMonster editing dashboard. Additional output settings are found in the Optins tab of your OptinMonster plugin settings.

CRITICAL STEP: Enable Optin on your site.

This is done in the Output Settings area of the OptinMonstor plugin on your site. Check the box: Enable optin on site.

OptinMonster and Formidable Forms integration Enable optin on site screenshot

Step 6: Go live

Finally, you are ready to go live! Click Go Live in your OptinMonster plugin settings. You should see the red Disabled change to green Live.

OptinMonster and Formidable Forms integration Go Live screenshot

OptinMonster and Formidable Forms integration WordPress plugin settings screenshot

Make sure it shows a green Live in the top blue bar of your OptinMonster dashboard also.

OptinMonster and Formidable Forms integration live dashboard setting screenshot

That’s all there is to it! Options for your opt-ins and popups are limitless when you integrate with Formidable Forms. Let us know how you’re using the integration!

The post OptinMonster and Formidable Forms: Easy Integration Using MailChimp Add-On appeared first on Formidable Forms.

How To Switch to HTTPS for Secure WordPress Forms

$
0
0

How To Switch to HTTPS for secure WordPress forms
Learn what HTTP, HTTPS, SSL, and TLS are. Then we'll show you how to switch to HTTPS for secure WordPress forms.

What is HTTP?

When any two systems communicate, they need to have rules they both understand and follow so they can communicate back and forth. Much like sending paper letters back and forth using a mail service, computer systems talk to each other by sending electronic messages back and forth across networks. When sending a package to a friend—as long as you follow the rules—you trust that the package will get to the right person at the specified place. The “protocol” or rules for mailing a package to a friend might look something like this:

  • Put your gift in a box
  • Pay postage in the form of stamps on the box
  • Make sure to include a name and address on the box so the delivery service knows where to deliver it
  • Put the box in a mailbox where it will be picked up for delivery

Hyper Text Transfer Protocol, commonly referred to simply as HTTP, is the protocol used by many computer systems to "talk" to each other. Importantly, it is what your browser uses to communicate with the servers that host the websites you visit. As essential as it is, however, it does have a weakness: security.

Introducing HTTPS

Even if you followed the correct mailing protocol to send your package to a friend, you might worry about a shady neighbor shuffling through your mail. Similarly, when data is being transmitted through a large network (such as the internet), it can be problematic if the data being sent is sensitive.

Since messages using HTTP can be read by any system that also uses HTTP and has access to the same network, there is a risk that messages can be read by others.

Thus, the need for HTTPS.

HTTPS, or HTTP-Secure, is really the same old HTTP that we have been using, but it's encrypted. If HTTP is like using a delivery van to deliver a gift in a cardboard box to a friend, HTTPS is like delivering that gift inside a locked safe in an armored truck. Instead of steel and locks, however, HTTPS uses sophisticated mathematics. What’s more, with HTTPS, only you and your friend have keys to the armored truck.

Just like a delivery service is only concerned with delivery of a package and not what you do with it after it arrives, nether HTTP or HTTPS affect the data before it is sent, or after it arrives. They are simply a means of delivery. So, while HTTPS is great for sending and receiving data, it doesn’t encrypt data stored on a browser, or on a website’s server.

How To Switch to HTTPS for secure WordPress forms

What is the difference between SSL, TLS, and HTTPS?

Remember earlier when we defined HTTPS as HTTP-Secure? This is because the “package to a friend” is still delivered using HTTP either way. It’s just how you package it that is different. The difference is that with HTTP your package is transported in a cardboard box via delivery van, and with HTTPS your package is placed in a locked safe inside an armored truck for its journey.

Think of Secure Socket Layer, or SSL and Transport Layer Security, or TLS, as the protocol for the encryption, or the “strength” of the safe and the armored truck you mail your package in. To summarize:

  • HTTP: Like packing your gift in a cardboard box and transporting it in a delivery van
  • SSL/TLS: A mathematical box safe and an armored truck
  • HTTPS: Delivering the same gift, but in an SSL truck and safe

From a more technical standpoint, SSL is an older method for handling encrypted traffic. It is no longer considered safe for secure data transmission. We now use TLS, a more advanced method.

Despite the fact that they are different, the term SSL is often used (knowingly or not), when referring to TLS. Generally speaking, whether you see SSL, TLS, or HTTPS, they reference the same thing: encrypting data for transmission with TLS.

If I’m not transmitting sensitive data, why does HTTPS matter?

During its first twenty years, adoption of HTTPS was slow. It was only used when necessary because it involved additional costs and technical understanding to implement. Two independent sources show that HTTPS adoption doubled between August of 2015 and July 2016.

There are several things that have contributed to increased adoption recently.

Google Search will rank for HTTPS

First, Google announced in 2014 that its search algorithm would begin to take into account whether a site was using HTTPS in its ranking results. This provided an incentive for sites to use HTTPS for the potential search rank boost, even if they weren't necessarily dealing with particularly sensitive data.

Cost for TLS has gone down

Second, lower-cost or even free certificates have become available. In order for HTTPS to work, a cryptographic certificate must be generated by a trusted authority, installed on a server, and regularly renewed (usually once a year, but sometimes with longer terms). These digital certificates cost money, which is often a deterrent for sites that aren’t generating much, if any, direct revenue.

Let's Encrypt was created as a solution to this problem and provides free certificates. This has lowered the cost to maintain a site on HTTPS by removing what can be the biggest cost involved.

Many CDNs (Content Delivery Networks) include TLS automatically, as do many hosting providers, such as WordPress.com.

The Network and Social Effect

Third, there is a combined network and social effect. Site owners are influenced by their competitors’ adoptions of HTTPS. Site owners are also influenced by their visitors' preferences. Web users are learning that HTTPS sites are more secure, therefore more worthy of their trust. Site owners are taking this into account when looking to generate credibility.

Google Chrome will penalize HTTP sites beginning January 2017

Finally, beginning January 2017, Google’s Chrome browser will start to explicitly label HTTP sites as “not secure.” Data containing email addresses, passwords and credit card information is all considered sensitive. If your site collects sensitive information, even just from a login form, you will want to have HTTPS enabled to avoid being explicitly labeled as "not secure" in users’ browser address bars.

How to switch to HTTPS for secure WordPress forms?

WordPress itself is written to accommodate sites that use both HTTP and HTTPS. Fortunately, making the switch from HTTP to HTTPS is not generally complicated. Even though each site’s host, theme, plugins and custom code are going to be different, the process itself is pretty much the same across the board.

It may get more complex if you have additional modifications to your site behavior in your .htaccess, php.ini, Nginx config file, etc.

Without such additional site modifications, these are the steps you’ll want to follow to ensure a clean switch:

Step One: Contact your Host

In order to transition to HTTPS, you will need a Dedicated IP Address and an SSL certificate. Individual setups will vary, but your host will be able to provide guidance on how to best transition given your setup as far as the server is concerned.

Most hosts will offer SSL certificates (for free or for purchase) and many hosts will even install it for you for a fee. You can get one for free through Let’s Encrypt, but it will require a bit more technical understanding to set up. It may be worth it to purchase your SSL certificate through your hosting provider to have installation performed by their staff.

If your host will not be installing your SSL certificate or you simply choose to install your own SSL certificate, do your research, and continue to step two.

Essential reading before implementing your own HTTP to HTTPS switch

Google’s Protect your site and your users
Google’s Move a site with URL changes (HTTP to HTTPS requires a URL change)
SSL Labs SSL/TLS Deployment Best Practices (for more advanced reading)

Step Two: Make a complete backup of your site

Backup plugins are convenient, but should your site become inaccessible during the process and you aren't able to access the Dashboard, rolling back changes can become more problematic. For backups, I always feel better after making a complete copy of the WordPress home directory, exporting a complete copy of the database, and saving both on my laptop (off of the server). I'll admit it is a bit extreme, but it's the safest approach.

Step Three: Updating WordPress Settings

  1. From the Dashboard, go to Settings > General. Change your WordPress Address (URL) and Site Address (URL) from http to https.
  2. Open your wp-config.php file. Just above the line that reads: That's all, stop editing! insert this line: define('FORCE_SSL_ADMIN', true);
  3. Go to Settings > Permalinks. Click Save Changes.
  4. Insert a 301 redirect so that any traffic coming to your site over HTTP will be redirected to the HTTPS version. There are plugins that can handle this for you. For the more technically inclined, this can be done by modifying your site’s .htaccess, php.ini, or Nginx config file, as applicable.On FormidablePro.com, we added this to the beginning of our .htaccess to force all pages to use HTTPS:

    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule ^(.*)$ https://formidablepro.com/$1 [R=301,L]
    </IfModule>

What do I need to do for Formidable to work on HTTPS?

Here's the good news: You don't have to change anything in your Formidable settings for your forms to work over HTTPS. As long as your WordPress site changeover has been properly made, any data transmitted to and from your site will be secure. Please note that HTTPS will secure data in transit, but it does NOT add an extra security layer to stored data.

What if my transition to HTTPS doesn’t go well?

Here are a few troubleshooting tips:

  • Instead of simply re-saving your permalinks in Settings > Permalinks, try changing the permalink structure to Plain, saving, and then changing them back to your desired structure.
  • Do you have any custom code that references the HTTP address for the site that will need to be adjusted to HTTPS?
  • If you replace the default WordPress index.php with one that just says “hello”, do you see any errors, or do you see the HTTPS padlock in the address bar? If the padlock doesn’t appear, is likely the trouble is with the actual the SSL setup, and not your code.
  • Do you have any server-side or CDN-based caching in place? If so, these may need to be flushed or have their settings updated to work with your new setup.
  • Sometimes certain interactions between plugins and themes can make the transition more complicated and more likely to generate unexpected errors. Should this be the case, try changing your theme to Twenty Sixteen (or another WordPress default theme), deactivating your plugins, making the switch, and then re-activating your plugins and switching back your theme.

How will my search rankings be affected by the switch from HTTP to HTTPS?

Google’s Change of Address Tool for webmasters does not yet support the HTTP to HTTPS transition. This can negatively affect your search rankings temporarily because your site will need to be re-crawled and reindexed. While Google states that you may not see an obvious change in your rankings, there is debate around the web about whether the switch has a negative or positive effect.

The upcoming changes in January could have a bigger impact on the trust your visitors place in your site, which could in turn reduce your traffic and your rankings.

When it was originally announced that Google would be taking HTTPS into account for rankings, they made it clear that this would not affect everyone. In fact, it was reported that this update would initially affect less than 1% of searches, but its impact may grow. Since then, the push for an encrypted internet has grown from within the industry, but also from without, as internet users become more concerned about leaked information, traffic snooping, and their online safety in general.

Switch to HTTPS for secure WordPress forms

The future of the internet lies within secure, encrypted transmission. For WordPress websites, that means HTTPS. Fortunately, transitioning your site to HTTPS is easier and cheaper than it has ever been. In addition to the SEO and user trust benefits, switching is something that requires little time, no backlinks, no marketing strategy meetings, and no artwork with cool fonts (though we are huge fans of cool fonts). Switching to HTTPS is something a site owner can check off the list and only have to think about once a year. Get it done. A safe internet will thank you for it.

The post How To Switch to HTTPS for Secure WordPress Forms appeared first on Formidable Forms.

3 ways to stop worrying about managing your website

$
0
0

As Steph mentioned in last week's post, we are turning over a new leaf and writing more blog posts. We have been attending some WordPress conferences lately and have really enjoyed hearing others' stories of how they got involved in developing for WordPress. We want to put ourselves 'out there' a bit more rather than being just words on the other side of your support requests.

Those who know me well can tell you I am a worrier (not to be confused with warrior). My family has coined the condition as the "Wells Worry". There is just something in my genes that makes me worry about stupid things ordinary people don't think twice about. I live in a world of worst-case scenarios, and most of my decision-making processes involve consideration of everything that could possibly go wrong. For example, when my wife and I travel, I am always pushing to leave for the airport at least an hour before she thinks we should leave. I plan for flat tires, bad traffic, long security lines, a full private screening from the over-zealous TSA agent, and 20 other factors that could require additional time in order to make a flight. So what is the result of all my worrying and planning? Usually we hang out at our gate for at least an hour before boarding our plane. Does this mean that I am wrong and should listen to my wife more? Maybe so. However, I have never even come close to missing a flight, I don't have to stress out when just one thing goes wrong or when something takes longer than anticipated. I am more relaxed and patient at the airport, I even have time to stop and help others because I'm not in such a hurry myself.

When Steph and I quit our "day jobs" to focus only on Formidable forms, there were a lot of things for me to worry about. Our website was our life and our livelihood. If there was a problem with our website, it affected us. We spent a lot of time tuning servers and experimenting with different plugins and themes to get our website just right. Although everything didn't always go quite as planned, we found three keys that helped us stay on track and sleep well each night without worrying about all that could go wrong.

1. Have a testing environment I know people who make untested changes to code directly on their production site. I know other people who install 8 new plugins and expect them all to play nicely. These types of stories pique my anxiety about as quickly as does the mention of Internet Explorer 6. Or IE7. Or 8. Okay, any mention of Internet Explorer makes me a bit anxious.

A testing environment is simply a cloned version of your production site that you can break without looking like a fool. Many WordPress hosting companies offer staging sites, but if your hosting provider doesn't, you can easily install WordPress locally on your computer with MAMP. This is probably a topic for another blog post, but once you have WordPress installed and running locally, you can use the WordPress import and export tools or a backup plugin to copy your site to your local machine.

I occasionally log in to a site and find a user running WordPress 2.7 and all plugins have been left untouched since the day they were installed. When I ask why nothing has been updated, the answer is inevitably, "I'm afraid something will break if I update WordPress or my plugins". A staging site solves this predicament and brings me to my next point.

2. Stay up to date. Now that you have a way to safely test WordPress and plugin updates, you can avoid being that guy running his business on old software. But why update things if they are working, right? Answer: keeping WordPress and your plugins up to date will greatly reduce your risk of being the victim of hacking, spamming, and all things devious. There are new security vulnerabilities found all the time. As WordPress gains popularity, it also gains more attention from those trying to exploit it, and unless you stay up to date, you are an easy target.

Updating WordPress alone is not enough. If plugins and themes are left behind in your updating regimen, more and more conflicts will occur and your site's performance will suffer.

Updating to new versions of WordPress and Plugins doesn't always go smoothly. Developers can't possibly test for all server configurations or for conflicts with every single plugin out there. When things go wrong, nothing will ease a worried mind like current backups.

3. Back up daily. Even when you test changes on a staging site and keep everything up to date, problems still happen. Like that time Steph copied some terminal command from a help tutorial and accidentally deleted her entire hard drive. What could have been a devastating loss of work, pictures and data, was no big deal because she had a current backup. Your website is no different. It may be user error or just bad luck that causes an issue with your site, but whatever the case, having a recent backup will save you from panicking.

Most reliable hosting companies automatically back up your site daily. If you are not sure of this, check. If your host doesn't offer backups, there are plugins out there that make the process automatic and simple. Make sure your site is getting backed up and occasionally test those backups and verify that you can restore your site when something goes wrong.

I can't avoid worrying about hackers any more than my daughter can avoid worrying about kidnappers sneaking into our house (she inherited The Wells Worry). However, these three keys have allowed us to focus our time on what's really important -- our family and our Formidable users. We do what we can to avoid major problems and have backups in place to repair any major issues without any lasting effects.

The post 3 ways to stop worrying about managing your website appeared first on Formidable Forms.


A/B Split Test Forms in Formidable

$
0
0

Header image for A/B Split Test Forms in FormidableThis is the first in a series of articles that will dive into improving conversion rates of your Formidable forms through optimization. To start the series, let’s get a basic understanding of what conversion rate optimization means. Then we can go on to explore ways to incorporate these practices. You'll learn how to A/B split test forms in Formidable. A/B testing, when done properly, is a continual process that over time yields higher and higher conversion rates.

Put it to the Test: Why optimize?

Web pages might have a variety of purposes, but with forms themselves, they pretty much always have the same purpose: to get filled out!

Whether or not this happens can depend on an incredibly diverse and overwhelming number of reasons. Learning these reasons and then optimizing our forms based on what we learn gives us a good chance at getting the results we’re seeking.

Of course we do this already without even thinking about it. Many of Formidable’s form field options are for the very purpose of optimizing our forms. How we layout fields, their labels, descriptions and other “clues” that help the user flow through our form with as little friction as possible; these are all examples of form optimization that we don’t really think about as we go about building our forms.

Much of the time, whether or not a form is completed depends heavily on the messaging around it and throughout the page. However, those who specialize in Conversion Rate Optimization (CRO), will tell you that elements of the form itself can have an equally important impact on its conversion rate (CR).

Learning Through A/B Testing

To learn which factors are impacting your conversion rates (CR), both good and bad, you need to test and compare variations in an organized way. Then evaluate what you’ve learned and incorporate the appropriate changes.

The way to organize this testing is to compare the current version of your form with an alternate version, or what is called a variant. This is what is simply referred to as A/B testing, or split testing.

It is the process of making and comparing one change, or a specific set of changes, to the original version while measuring which form gets filled out more.

Once a winning version has been clearly identified, you then use this version as the original and create a new test that focuses on another specific change.

Introducing the Hypothesis

To give our test a focus in order to clearly define a winner, we want to start with a hypothesis. The hypothesis is a statement that defines the specific goal, or desired outcome, of this test.

This could be in the form of a question:

Will conversions be higher if button text reads ‘Buy Now’ instead of just ‘Buy’?

Notice how the hypothesis addresses one specific change. It is very important to test only one change at a time. Sometimes that change could incorporate several elements, such as “Will conversions be higher for “Color scheme A” or “Color scheme B?”, because, while it focuses on many elements, it is still testing only one overall aspect, the color scheme.

Some experts will occasionally go for what they call a “Big Win” by making sweeping changes to many elements at once. If the new version is the winner, they will then continue by refining future tests to more specific changes always seeking to improve CR.

What to A/B test

Let’s take a look at several of the common and not-so-common elements you could be testing in your forms.

While other people’s results can inspire what to test on your site, they should never be used as an excuse or “permission” to skip testing. The successes or failures that were discovered in tests conducted by others on their websites could reflect several unknown factors. For this reason you must start from your own hypothesis and test it on your site to your visitors.

Submit Button

This is a biggie, of course, and probably the element you’re seen the most anecdotal evidence about one way or another.

“Never say Submit!” “Red works best,” “Flat instead of shadow,” “Add urgency,” “Blue works best!” “Benefit laced wording,” “Yellow works best!”...

Truth is, all or none of these could be important factors. Each depends heavily on your goals, products, audience and much more. Test them for sure, but do it in a methodical way. Based on what you know about your audience already, test each factor one at a time.

Also test adding icons to your buttons to give users important clues or to generate trust. A lock icon for submitting your email address or an icon indicating that clicking will open a new page could yield unexpected returns for minimal effort.

Privacy Copy

This is the little line you see on many email list signups saying something like “We hate spam…”, “We’ll never sell your email address…” and you might be surprised by the results of some tests related to this text

In recent tests by ContentVerve.com, they compared no privacy statement to the phrase “100% privacy – we will never spam you” on a signup form and the latter received an 18% decrease in signups.

Now before you run over to your site and start removing all of your privacy statements from your forms, in a later experiment they tested the phase “We guarantee 100% privacy. Your information will not be shared” and saw nearly a 20% increase in signups vs. no statement!

The lesson here is that it’s not whether the statement is included or not; it’s that the precise wording will have a significant impact on your forms getting completed.

Total Number of Form Fields

Testing the total number of fields could be as simple as whether you ask for only an email address vs. asking for a first, last name and email address in a simple signup form. Or it could be more complex by using conditional logic to hide and reveal fields based on previous answers.

The amount of work required from the user is an important friction point affecting a user’s decision to complete your form. Reduce the friction = increase responses.

Of course, increasing friction could be of equal value, depending on the purpose of the form. If your form requires more work from a user, it could indicate users who do complete it are more interested in your offer.

If your form’s purpose is to generate new sales leads, you will want to test and perfect this balance between cooler, lower friction and warmer, higher friction leads.

Bonus: Download Formidable A/B Test Ideas

I couldn't fit all my form testing ideas into this article so I threw them into a free bonus PDF download: Formidable A/B Test Ideas. Download it from this page.

How to A/B Split Test Forms in Formidable

To perform an A/B test, you need a way to randomly display the two different versions you are comparing.

While we could code up a solution to do this, most of us will prefer to work with a tool specifically designed for A/B testing.

In the next article in this series, I will give an example of tools and explain a bit better about how to use them.

You can A/B split test forms in Formidable by downloading my A/B Tests add-on for Formidable Forms from the WordPress repository.

The post A/B Split Test Forms in Formidable appeared first on Formidable Forms.

4 Steps to Creating Great End User Documentation

$
0
0

Editor’s Note: We often get rave reviews about our Formidable Forms plugin documentation. People want to know: what’s the secret to creating great end user documentation? We thought we’d let our Documentation Specialist give it to you straight from her keyboard.

4 Steps To Creating Great End User Documentation

Everyone enjoys writing documentation right? No? Well, if you're one of those who does not enjoy writing documentation, then this post is for you. I’m going to show you how easy it is to create great end user documentation every single time.

Why is good documentation important?

There are obviously many reasons to have good documentation, but I’ll point out a few.

  • It’s helpful to your users. Documentation is often the first place users look when they have questions. If they can search the documentation and find an immediate answer to their question rather than waiting for a response, they will be more quickly satisfied.
  • It’s helpful to your support team. Not only is it helpful to the user, but it's helpful for your support team. When features are well-documented, it’s easier for the support team to find the answer to a user's question and quicker for them to point the user to a page rather than to spend time typing steps out.
  • It’s less work for you! Good documentation can answer users' questions before they come to support, so you spend less time answering questions and troubleshooting on users' behalf.

Great end user documentation as customer service

Documentation is the best and quickest way to provide customer service. When it’s done right, documentation becomes great customer service.  If you put the time into making your documentation user friendly and full of helpful information, then it will pay off in the long run. Nothing makes users happier, more likely to return, and—most of all—more likely to refer you to other people than when they receive great customer service.

These four steps will help you create great end user documentation every time.

Step 1: Educate yourself on the product

Creating Great End User Documentation Step 1

Test, test, test!

This step is important if you don’t already know everything that the product is capable of doing. I always begin the process of documentation by picking a specific feature that needs documenting, then test every scenario I can think of. By doing this I’m able to sort out some of the simple things that may not need as much attention. I can also determine which items are more complex so I can give them more attention in the documentation.

Make sure to note anything that is tricky

When I am testing the product, I make sure to take note of anything that may be tricky. If it’s tricky for me, then it’s probably going to be tricky for the user, too. While I’m writing out the documentation, I include notes in the steps that could be helpful to the user. I try to be somewhat generic in the examples. Every situation is different and I do my best to include notes regarding things that could change an outcome.

Step 2: Decide what to include in the docs

Creating Great End User Documentation Step 2
How do you know what to include in the documentation? It can be overwhelming to think about documenting everything there is to know about your product. The good news is that it’s not necessary to document every single thing.

Here are some things I do before I start writing to help me decide what should be included:

Listen actively to your team and users

Before I start writing about a particular feature, I’ll ask my support team, “What questions are being asked the most by our users?” I'll also search support tickets in our help desk. Our help desk is a great resource to learn what our users are having the most issues with. If we’re getting multiple questions about a particular subject, then I know that it should be documented for the sake of our users and our support team.

Research competitors’ documentation

Besides using our help desk I also search our competitors’ documentation. I like to see what they feel is important to document and how they have documented it. This helps me determine what should be included in the docs.

Step 3: Use a good template

Creating Great End User Documentation Step 3

What is the purpose of a good documentation template?

Having a good template is crucial to creating great end user documentation. First, it allows you as the author to have a good sense of direction. Direction will keep you on task with what to write and how to write it. The last thing you want is to end up with a page that is long, boring, and overwhelming for the user to read. A good template helps the documentation integrate with the rest of the docs that have already been written. It also just looks better when there is structure to a page. A good template will help the users get to know your structure. This will make it easier for them to locate answers.

What makes a good template?

Creating a good documentation template for Formidable Forms has come by trial and error. When we find things that work, we stick with it. Things that don’t work, we change up. It’s a work in progress and we’re still perfecting it. One thing that’s not going away, though, is the template itself. We have found that when we stick to a template, it’s much easier for our users and support team to locate answers.

Here are some things that make a good template:

Keep the template “Dummy proof”

When I write documentation, I try to make it what I call “Dummy proof.” Not that I’m calling any of you a dummy! It just means that I’m structuring and writing the documentation so that even a person with little to no experience will be able to navigate the page and understand what I’m writing about. A few ways I do this is:

  • Include a table of contents
  • Write out step-by-step instructions
  • Use short and straightforward sentences
  • Use white space and line breaks liberally to increase readability
  • Break things up into different sections

Structure from least to most complex

I like to write our documentation so that it’s structured from the least to the most complex. This way the "big picture" information is at the top and easier to find.

I also do this because the items that are not as complex tend to appeal to a larger audience. The more complex it gets the more specific it usually is, which appeals to a much smaller audience. Here is an example of a template structure I use:

  1. Introduction
  2. Standard field options
  3. Field-specific options
  4. Examples—Note this is shown in a step-by-step manner so it’s easier for the user to follow.
  5. Displaying the field—I like to put these in tags so the user can copy/paste without any extra formatting leftovers.
  6. Developer hooks

Obviously, this structure is specific to WordPress form builder documentation, but a similar structure can apply to any technical documentation. To see this structure in a live doc, check out our Checkboxes and Radio Buttons documentation.

Creating Great End User Documentation Step 4Step 4: Make it user-friendly and appealing

It’s all in the detail

When writing the documentation, I’ll add a little emphasis here and there. Sometimes it’s as simple as bolding important words like “click the Submit button.” Sometimes I use quotation marks for specific words or phrases. I find it makes the instructions easier for the user to follow if key words are emphasized with bolding or quotes.

Screenshots

There are many different types of learners. This doesn’t have to make it difficult in preparing documentation though, as most can benefit from visual instruction. Having everything laid out in a textual step by step process is helpful, but adding screenshots will go further to eliminate any questions or confusion. I use a lot of screenshots in my documentation. If the screenshots are done right, you can never have too many. The thing to remember with screenshots is that they need to be replaced periodically to keep them accurate.

I use Jing to create the screenshots. Jing is great because it helps me be more precise when capturing a screenshot. It's free and it’s very user friendly.

I make sure to name all the screenshots so they are easy to locate if they need to be changed or deleted. My naming system for screenshots depends on the page that I’m working on. For example, all the screenshots in the Date field’s page begin with “date_” and is followed by a short description of the screenshot. So the first screenshot in this page is titled “date_field-calendar”.

After I have created the screenshot and adjusted it to my liking, I run it through ImageOptim to eliminate any unnecessary bulk.

GIFs

GIFs are probably one of the most intimidating things for most people just starting to create documentation. In reality, it’s not very difficult to create them. When I create a GIF, I make sure to be precise in my movements so there is no question of what I’m trying to accomplish. I move the cursor exactly where it needs to go and move it off the screen if I don’t need it any more.

I use LICEcap for my GIFs. I’ve never researched anything else, but LICEcap has worked perfect for my needs. It’s very user friendly.

Take your time when recording them. It may take only two seconds for you to perform a step. However, it’s more beneficial to turn it into a 5-6 second GIF. This way the user sees exactly what you’re doing and there’s no question or confusion.

Links to other docs

Linking to other online documentation is beneficial for the user, as well as for you the author. It helps the reader see what is possible with your product, sparks new ideas, and sometimes provides a simpler solution to the reader's question. When links are well-placed inside the online instructional text, the user won’t have to back out or open a new browser tab to search for clarification.

For the author, it eliminates duplicate copy. Instead of creating longer documentation with additional steps, just insert a link to the other page. When you have documentation for one particular feature in only one place, you don’t have to worry about finding it and updating it in multiple locations.

Conclusion

It’s tempting to let yourself off the hook by jotting a couple of things down, calling it a doc, and then jumping right back into development. It's more beneficial, however, to understand that documentation becomes more valuable as time goes on and as a project scales. It is as real an investment as any other in your project.

Following four key steps will help you produce great documentation each time. First, knowing and testing your product will get you off on the right foot. Second, researching what to document will ensure you include what is appropriate. Third, using a solid template will keep you on a user-friendly road map while writing. Fourth, making it presentable and appealing will ensure that what you've created will actually be palatable to the user.

I hope this has all helped! What have you found to be helpful when creating documentation? Let us know any tips or tricks you'd like to share below.

The post 4 Steps to Creating Great End User Documentation appeared first on Formidable Forms.

How to Allow User Submitted Posts in WordPress Forms

$
0
0

Do you want to allow user submitted blog posts in WordPress? This post will explain how to set up a WordPress form so guest bloggers can submit posts without access to the admin area of your website. First, let's delve into why user submitted posts from guest bloggers can be important for your marketing.

How to allow user submitted posts in WordPress Forms: perfect for guest blog posts!

Content is king

Content is king, at least when it comes to content marketing. If you’re not familiar with content marketing, here it is in a nutshell. Content marketing is the creation and distribution of valuable online content in your business’ area of expertise. The express purpose of the content is to position your business as an authority in your industry. A solid position of authority is a big trust factor in serving to increase your market share.

The importance of creating valuable content that enhances your position of authority and builds trust with your consumers can't be underestimated.

Every business owner knows that while content may be king when it comes to marketing, producing such content requires investment of time, money, and energy—any or all of which may be in short supply. Enter the uber-efficient guest blog post.

Efficiency of the user submitted guest blog post

Guest blog posts kill two birds with one stone: you save time, money, or energy when a third party produces the content; you establish trust with your online audience utilizing a neutral third party voice. A third party voice can often overcome objections in the mind of a prospect because a third party is seen as more objective. Having multiple voices on your blog platform decreases stagnation, gives your customer the idea that you are a thought leader, and that your website is not just there to sell them something, but to offer them your expertise and guidance along the way. This aligns everything just right so when your prospect is ready to purchase or refer you to someone who is, they’ll want to do business with the industry authority (you)!

Let’s talk about what types of content fall under this umbrella. One such piece of content would be the powerful customer testimonial. Another such piece could be a market analysis by a complimentary or feeder business alliance. Tutorials and how-to’s written by current subscribers to your services as well as topical discussions by industry leaders who aren’t direct competitors to your products can all serve as guest blog content pieces.

Formulate an initial guest blog post strategy

It’s not difficult to initiate a guest blog strategy. Try this for a starting place: come up with a list of the top ten topics that your customers demand content for. (Often you can use your Google Analytics data to find out which pages of your site are the top visited pages. This will give you a solid idea of the topics customers are interested in when it comes to your products or services.) Then, come up with a list of at least five industry leaders, brand ambassadors, delighted customers, and business alliances whom you could invite to write two guest blog posts each for you. Retired professionals who are no longer direct competitors in your industry could very easily be called upon to write one or more guest posts. It may be appealing to them to keep their industry influence even in retirement, so don’t hesitate to ask them. Most would see it as an honor to be invited.

In WordPress, posts are attributed to authors (admins) of your blog. The key here is not to have your guest write a post and shoot it over to you so you can post it under your own name. No, you want the author’s name to show up next to the article instead, so the reader knows this is content written or produced by someone else.

You’ll want your guest blogger to be able to post her posts easily and without hassle. Enter Formidable Forms for the task! Formidable Forms gives you the ability to allow your guest to submit a post to your site without needing to understand WordPress or the backend of your particular website. A professional-looking user submitted post form will reinforce to your guest that their time is valuable to you, and that their investment in this activity is worth it.

How to allow user submitted posts in WordPress forms

An individual user account for each guest blogger is important to the third party credibility factor. This is because you want the post to show up as written by your guest, not you. Authorized users will be able to submit posts using the form and the posts will be attributed to their names, not yours. If your guest bloggers are not already users on your site, start by setting up user accounts for them.

Step 1: Set up user accounts for your guests or have them register themselves.

Set up each of your guest bloggers with their own user account. Set it up under the name you want to show as author of the post.

If your WordPress blog is set up to show Gravatar profile pictures, have your guest upload her profile picture to Gravatar. Gravatar will automatically match her (email address specific) WordPress profile information to her email address registered with Gravatar. (Chances are she already has a Gravatar set up. If not, it's simple for her to create a new Gravatar account.) Once she has a profile picture online with Gravatar, that picture automatically shows for the posts that are attributed to her.

Looking to streamline further? If you have a lot of guest bloggers lined up who are not already users on your site, you may choose instead to set up a form to allow guests to register themselves with your site. This involves the Formidable Forms User Registration Add-On. (The User Registration Add-On will come into play for other user submitted content as well, not just guest blog posts.)

For the form itself, the Formidable Forms solution is simple and straightforward.

Step 2: Create the WordPress form for the user submitted posts

You're going to create a form for the post submissions. This is where you will have the user fill in all the information about her post, just as you would do in the back end admin area of your WordPress website. Create a simple Formidable form asking for such items as:

  • Post Title
  • Post Content
  • Excerpt
  • Slug
  • Category
  • Etc.

Have your form fields ask for the pieces of information that you don't want to have to fill in yourself in the back end.

Step 3: Set up the form with Create Post form action

Now it's time to set up your Create Post form action. In the Form Actions settings of your form, add a Create Post new action by clicking the WordPress Logo icon in the Add New Action bar. See step-by-step instructions on how to do this here.

Match up the fields in the Create Post section to the fields you have set up on the form itself, and Voilà! You now have a form to accept user submitted posts.

Step 4: Finish your Form Settings according to your process preferences

Formidable Forms offers several important features that will help you streamline your process for user submitted posts.

Let me point out first the Post Status setting for your Create Post form action. If you set this to Create Draft, it gives you the ability to proof each post before publishing on your site.

Post status showing create draft checked

Another handy setting is allowing users to save drafts. If you'd like for your user to be able to save their form draft and come back to it later, check Allow logged-in users to save drafts in General Form Settings.

Checked: Allow Logged in Users to Save Drafts

A unique feature of Formidable Forms is the ability to allow your user to edit his published post from the front end. Refer to the "Allow front-end editing of entries" documentation on how to enable this.

Allow front end editing of entries

You may want to further streamline your workflow for user submitted posts according to your administrative needs. Formidable gives you the tools for this; utilize different form actions such as email notifications and Post Status settings to establish your workflow.

Step 5: Publish your form and send the link to the page with your form to your guest bloggers

You may have some initial back and forth with your guests on content topics. When your guest is ready to post, simply email your guest a link to your webpage with the published user submitted post form.

Conclusion

Allowing user submitted posts comes in handy for a lot more than just guest blog posts. Anytime you want to allow user generated content on your site, this process can be used. The possibilities are endless for allowing users to post content on your site from the front end. The User Registration Add-On mentioned above will streamline this process even further.

BONUS tip:

If you're going to entirely geek out on your process for user submitted posts, you'll absolutely love the functionality in Formidable's Form Action Automation Add-On.

The post How to Allow User Submitted Posts in WordPress Forms appeared first on Formidable Forms.

How to Choose the Best Free WordPress Contact Form

$
0
0

Understanding the free versus freemium business models for WP contact form plugins will help you make an informed decision about which contact form plugin is best for you.

Best free WordPress contact form; Free vs. Freemium: understanding plugin business models can help you choose the right plugin

Have you ever installed, activated, deactivated, and deleted a free WordPress plugin all within the timespan of an hour? If you have been working in WordPress for any length of time, you've probably tried out and discarded handfuls of free plugins. We all know there’s the good, the bad, and the downright ugly.

Often it’s not about good versus bad (or ugly). Sometimes the choice is between two well-maintained WP contact form plugins that are both free. Understanding different business models for plugins can translate into an understanding of how plugins will or won’t meet your needs.

Free contact form plugins: Free versus freemium

WordPress (WP) itself is free, open source software that supports a thriving community of both free and freemium (as well as premium-only) plugins. There is an entire developer plugin handbook on WordPress.org dedicated to instructions on developing WordPress plugins. (WordPress is separate from WordPress.com. See this WP Beginner article to understand the difference between the platforms.)

Examples of open source WP contact form plugins are Contact Form 7 (free), Formidable Forms (freemium), and Gravity Forms (premium). In this article we’ll look at the free and freemium models as they relate to contact forms.

Free WP contact form plugins are FREE

In fantasy, developers of free plugins are all independently wealthy. They dedicate their time to a free software out of love. In reality, developers who write free plugins simply have a different paradigm than those with paid plugins. They see their software not as the product, but as a catalyst that paves the way for other streams of revenue. (This is not to say that there isn't a labor-of-love aspect for paid plugin authors. Freemium and premium plugin authors can certainly labor out of love as well!)

Other streams of revenue can be things such as:

  • donations,
  • selling ad placements on the plugin’s website,
  • resume and reputation building,
  • selling add-ons, documentation, or other related services.

Freemium contact form plugins have both a free and an enhanced monetized version

The freemium business model is based on pricing strategy. A basic free version of the software exists and an augmented version is available at a premium (for money).

In this business model, revenue comes from selling the additional features in the augmented version of the plugin. Thus, it's logical to see that premium-only plugins only have a commercialized product.

Free vs freemium plugins: Development

Free contact form plugins are often initially developed to meet the author's need and then given to the community. Extending functionality through further development is not often the highest priority for the author. This is because often the need it was created for has already been met.

In contrast, freemium plugins generate revenue by continuing to meet ongoing needs of users.

I was at a WordPress meetup recently where a user mentioned the responsive development of Formidable Forms. I thought: 'how true that is.' Formidable listens to feedback all day long in the support desk and responds to user feedback through it’s development cycle. Hence: responsive development!

Contact Form 7 downloads per day

Downloads per day of Contact Form 7. The spikes show update releases generating automatic downloads occurring about every two months, indicative of this plugin's update release cycle.

WP contact form plugin development cycles

Free versus freemium could be likened to the difference between a non-profit and a for-profit corporation.

Formidable Forms Downloads per day

Downloads per day of Formidable Forms. The spikes show update releases generating automatic downloads occurring an average of three times per month.

While much can be said about the differences between the two, one difference is the pace. For-profit corporations tend to have tighter deadlines for development of target business objectives. The bottom line depends upon it. The pace of meeting objectives as a nonprofit tends to be based on existing available resources instead.

  • Free plugin development objectives and timelines are influenced by available resources.
  • Freemium plugin development objectives and timelines are influenced by the possibility of generating additional revenue and pleasing the existing customer base. After all, happy customers are the best marketers a company can get.

This similarity between nonprofits and free plugins holds up graphically. Take a look at the WordPress.org screenshots from a free plugin (Contact Form 7) and a freemium plugin (Formidable Forms). We can instantly get a picture of each plugin's update release cycle. It appears that Contact Form 7 tends to put out an update every two months. Formidable Forms, on the other hand, shows an average of three updates per month.

Free vs freemium plugins: Support

Free model plugins have invariably fewer resources to invest in support. There are no funds to invest in a help desk. It’s often just the plugin author and his computer. You can bet that plugin author has other plugins in the fire. And many other support requests beside yours. Contact Form 7's author, Takauki Miyoshi, said this about his philosophy on supporting a free plugin in an interview with WP Tavern:

I receive 20 – 40 support requests every day... I look over them, but I don’t think I have to respond to all of them. I answer only when resolving the issue is surely important for the user and that can also help other users.

Free plugins up-rank support requests that impact the entire user base. Individual support requests are most likely not going to get support from the plugin author. In cases like these, the community can pitch in to help, but this is known to be very time consuming. Users can wait days, weeks or months for a fix from the community.

Freemium models, on the other hand, support users at both the free and the premium levels. Happy free users can translate into happy paid users. Happy paid users stay users, thus generating revenue.

Free vs freemium plugins: Usability

Authors of free plugins don’t have to be as concerned with the plugin usability. They're often concerned with usability for the initial purpose of the original user (the author). Future development of usability features is not a large priority.

Contact Form 7 vs Formidable Forms

In the case of Contact Form 7, for instance, it utilizes simple markup. Simple markup is not “simple” for anyone except developers. I know this because I am not a developer. My first experience with Contact Form 7 was spent studying the patterns of simple markup before I could begin building my first form.

The usability of this free contact form has not changed much in ten years since its inception in 2007. It's still based on simple markup.

Contact Form 7 simple markup

Contact Form 7 uses a simple markup interface.

 
Formidable Forms recognized the need for drag and drop features to enhance usability for a broader user base. My first experience as a non-developer with Formidable was not spent studying anything. I immediately began building my drag and drop form.

Formidable Forms drag and drop

Formidable Forms uses a drag and drop interface.

Free vs freemium plugins: Extensibility

Contact forms: they are the starting place for all forms on your site. Additional forms may be needed beyond a simple free contact form. What happens when your needs outgrow your plugin? When you want to save, export, or manipulate your data? Or when you want to customize a solution that your free contact form plugin doesn't provide?

To extend free plugins, you will need to add additional plugins. Unfortunately, you may end up installing several third party plugins maintained by separate authors. Each additional plugin installed and activated on your site has the potential to be the weak link. Ever had a theme conflict with a particular plugin? The more plugins you have activated, the more potential there is for conflicts or things to break.

With freemium plugins, extensibility is built in with deliberate intentionality. Outgrown the free version? Upgrade without having to create new forms.

The best free WordPress contact form is the one that's extensible

Just because one plugin is highly popular does not mean it is right for your needs. When comparing the value of two WP contact form plugins that cost "nothing", it comes down to extensibility. The best free WordPress contact form for you is going to be the plugin with a business model that meets your needs in features, development, support, usability, and extensibility.

Although a purely free contact form plugin begins as free, it may end up costing you down the road. There is a "cost" when you are unable to get the support you need. It "costs" if you have to install additional free plugins to extend the functionality of the first plugin. The cost is even more painful if you have to re-do all your forms because your free contact form plugin wasn't extensible.

With a freemium plugin, extensibility is built in. As you outgrow the functionality of the free version, it's painless to upgrade and extend the functionality of your current free contact form plugin.

Got a story about how these business models have affected your choice of a WordPress plugin? Let us know.

The post How to Choose the Best Free WordPress Contact Form appeared first on Formidable Forms.

How to Add Reviews without a WordPress Testimonial Plugin

$
0
0

Do you want to show off all the great feedback you've been getting from your customers? Do you find copying and pasting feedback from emails and social media is time consuming? Allow users to submit testimonials directly on your website with no extra work for you.

 How to Add Reviews without a WordPress Testimonial Plugin

You know that feeling you get when you wake up to an amazing testimonial about your business? It's one of my favorite things. Whenever it happens, it really makes my day.

Not only are testimonials good for your mood, they're also good for your online business. Highlight user testimonials and positive feedback on your website to help show visitors that you are genuine and trustworthy. Testimonials also play a big part in boosting online sales and conversions. You don't even need an extra WordPress testimonial plugin. Formidable Forms makes is easy to add a testimonials page to your WordPress website.

But how can a WordPress form builder plugin help? Harness the power of Formidable with an online form for happy customers to directly submit their testimonials.

Step 1: Create a testimonials form

WordPress Testimonial Plugin: WordPress Tesimonials form Make it really easy for your website visitors to add new testimonials, by keeping this form short and simple. I usually include the following three fields: name (text field), photo (file upload), and testimonial (paragraph). A star rating may be worth adding too.

Once your form is built, perhaps modify your forms success message to say "Thank you for the testimonial–you've made our day!" or something similar.

Insert your testimonials form on a page

Next create a new page on your site or choose a spot on an existing page. Insert your form shortcode to display your testimonials form for the world to see. Submit a few example testimonials to help set up the front-end display. These can be deleted later and replaced with new submissions.

Step 2: Create a testimonials page or widget

WordPress Testimonial Plugin: WordPress Testimonials View
You'll need a View to display your testimonials. Go to "Formidable" → "Views" and select "Add New".

I'm going to call my new View "Testimonials View". Select your testimonials submission form in the "Use Entries from Form" box.

In this example, select "All Entries" for the View Format.

Add the content to display your testimonials

Remember that anything in the "Before" content box will be used once before the main content. Anything in the main content box will be repeated for every entry. Anything in the "After" content box will be used once after the repetitions of the main content box are complete. This allows HTML elements like table structure and styling divs to be opened and closed in the before/after sections without unnecessary repetitions in the main content.

The ID of my image field is [499], my name field is [496], and my testimonial field is [498]. So adding this to my content box works perfectly. Just change the field IDs to suit your form.

<div class="[evenodd] single_testimonial">
[if 499]<img src="[499]" class="alignleft">[/if 499] [498]
<span class="right">- <i>[496]</i></span>
<div class="clear"></div>
</div>

Create a testimonials page on your website and insert your new View into the page. Check your page and make any styling or layout adjustments needed. This is where having a few dummy testimonials really helps!

My display keeps the uploaded photo to the left, the testimonial text to the right of the image, and the name below the main text. Depending on your theme and styling preferences, you may wish to modify the HTML slightly to suit your needs.

WordPress Testimonial Plugin: WordPress Testimonials form showing placement of profile picture (left) and text (right) in view

Bonus Option - Create a random testimonial widget

WordPress Testimonial Plugin: Showing view with profile picture (top) and text (bottom)
A page full of testimonials looks great. But not all of your visitors will go out of their way to visit that page. Sometimes testimonials inserted into your main pages have more impact, simply because they are seen more often.

For this example take what you did above and modify it slightly to display a single, randomly selected testimonial in a sidebar widget.

  1. Change your view format. Select "Single Entry — display one entry" instead.
  2. In the Advanced Settings box at the bottom of the View page, click on 'Order' and select the Random option.
  3. Modify your view HTML slightly - I changed the 'alignleft' image class to 'aligncenter'. It looks neater this way when displayed in a narrow sidebar.
  4. Save your changes and copy your view shortcode
  5. Go to Appearance → Widgets, and add a new text widget to your sidebar. Add your View shortcode to this widget and save your changes.

That's it! In just 2 or 3 minutes you've created a testimonials widget that displays a single testimonial. Each time the page is loaded a random testimonial appears. Now your visitors get to see a selection of the great feedback for your business.

Step 3: Ask for new testimonials!

Don't forget the most important step! Let your customers know you value their feedback and would love to have their testimonial displayed proudly on your website.

One of my favorite ways to do this is the simplest. Add a line to your email signature that includes a link to your testimonial form and says "Happy with our service? Show your appreciation by leaving a review HERE". Now I don't even have to think about asking for testimonials, it happens automatically every time I reply to an email!

Easy WordPress testimonials

Adding a testimonial widget or page to your WordPress website has never been easier. All the steps above can be completed in about 20 minutes, so you really don't have an excuse anymore!

If you're not taking advantage of the powerful conversions boost that testimonials can provide, you may be loosing out! Schedule a few minutes TODAY and add this simple feature to your online presence. See the difference it can make!

The post How to Add Reviews without a WordPress Testimonial Plugin appeared first on Formidable Forms.

How to Add reCAPTCHA to WordPress Contact Forms

$
0
0

We're just like you. We only want humans to fill out our forms. Add a Google reCAPTCHA to your WordPress Contact Forms.

How to Add reCAPTCHA to WordPress Contact Forms

Did you get a boost in your form submissions? Are you getting spam messages in your WordPress contact forms? Create an attractive, user-friendly WordPress form and use reCAPTCHA to block spambots without wrecking the user experience.

What is reCAPTCHA?

ReCAPTCHA is a free spam-killing service from Google, designed to protect your site from spam. A captcha is a test to tell if the page viewer is really human, or an evil spambot. It is easy for humans to solve, but hard for bots to figure out. ReCAPTCHA in WordPress contact forms will block automated software but allow real people contact you with ease.

Build your WordPress contact form

reCaptcha WordPress form builder ReCAPTCHA doesn't require any advanced planning or custom code. Build your form as you had originally intended. It doesn't matter if it's a simple contact form or a complex quote calculator. Easily add ReCAPTCHA to all your forms.

So go ahead, build your form, tweak it until it's perfect. Then add reCAPTCHA protection at the end.

Add reCaptcha to WordPress contact forms

Protecting your form couldn't be easier! Formidable includes a reCAPTCHA field that can be added in the same way as a number field or text field. Add it to your form with just one click.

If this is the first time you've added reCAPTCHA to a Formidable form on your website, you'll also need to get Site and Secret Keys from Google.

This is completely free and takes only two minutes to set up. Go to the Formidable Global settings page to enter your keys. Click the link in your settings to sign up for a free ReCAPTCHA key, and signup with your Google account.

reCaptcha WordPress account link

Enter your website URL and pick a title. That's it! Google will give you a Site Key and a Secret Key. Copy and paste these into your Formidable settings and click 'Update Options' and you're set!

How reCAPTCHA works

reCAPTCHA is really quite clever. Plus, a new, completely invisible reCAPTCHA has been announced that will soon make verifying your humanity even easier!

We're already a long way past the frustrating, complex strings of random blurred letters that the old captchas relied on. This method is tedious, complex, and often just as hard for us as they are for the spambots! I imagine one day using them in a story to my grandkids when trying to explain how tough we had it in "the good old days"!

WordPress recaptcha example in action Now captcha spam protection is a simple checkbox. Click the box, and most of the time, you'll see a green checkmark. Congratulations! You've passed the robot test (yes, it's that easy). Your website visitor can submit the form with no hassle and no delay.

WordPress recaptcha image verification Sometimes reCAPTCHA isn't convinced, and will need some extra info to make sure you're human and not a robot. You may be asked to solve a simple picture-based challenge. Even this extra challenge is user-friendly, quick, and has minimal impact on user experience.

reCAPTCHA Accessibility

Protecting your form should never limit who can complete it. You'll be glad to know that reCAPTCHA works with major screen readers such as ChromeVox, JAWS, NVDA and VoiceOver. It will alert screen readers of status changes, such as when the reCAPTCHA verification challenge is complete. The status can also be found by looking for the heading titled "recaptcha status" in the "recaptcha widget". More information on accessibility can be found in the official reCAPTCHA guide.

reCAPTCHA Styling

Enhance your reCAPTCHA visibility with either the light or dark color scheme to best suit your site design.

reCAPTCHA Styling light and dark

Are you working in a widget with a small amount of space? Use the compact option to limit the reCAPTCHA size and you're good to go.

Other ways to stop the spambots

Math captcha WordPress plugin Not a fan of reCAPTCHA? Our Math Captcha Add-On lets you use a simple math problem as an alternative method to verify humanity. You have options to limit the types of math problems and set the complexity to a level that suits your audience.

Looking for a captcha-free alternative? Akismet integration is built right in to Formidable Forms. Or take matters into your own hands and fill your comment blacklist.

WordPress reCAPTCHA for the win

Spambot protection is an essential part of modern WordPress contact forms. The best WordPress form builders should not only include it standard, but also make it really easy to use.

We've made Formidable Forms easy to protect, regardless of whether you're building brand new WordPress contact forms or adding spam protection into existing forms. Keep an eye out for more captchaless spam protection options headed your way.

Not using Formidable Forms on your WordPress site? Check out the free version that includes both Akismet and reCAPTCHA .

The post How to Add reCAPTCHA to WordPress Contact Forms appeared first on Formidable Forms.

How to Create Charts and Graphs from your WordPress Forms

$
0
0

Why hunt for a WordPress graph plugin when Formidable Forms includes charts and graphs? Get a taste of the whole host of customization options.

Easily Display WordPress Charts and Graphs without a WordPress Graph Plugin

Do you want to demonstrate your company growth, show product sales trends, or display a running total for a local fundraiser? A visual representation will always have a greater impact on your audience than numbers. This is especially true online, where attention spans are short, and text is often skimmed.

Text statistics look great when site visitors take time to read them. But you need instant, eye-catching impact. Communicate your data in a way that attracts attention with stylish, sleek and colorful graphs generated directly from your Formidable data.

Straight from your WordPress forms to charts and graphs

Have you been running polls and surveys and need a way to interpret the data? Are you tracking data over time, and need to see the changes at a glance? Formidable Forms offers a wide range of graphing options to choose from.

  • column graphs
  • horizontal bar graphs
  • area graphs
  • scatter graphs
  • pie charts
  • line graphs
  • histograms
  • tables
  • stepped area graphs
  • geographic heat maps
Examples of Formidable charts and graphs without a WordPress graph plugin

A variety of charts and graphs

Step 1: Build your form to collect data

Thousands of types of data can be graphed. So this example should be translatable to as many situations as possible. I'll do a pie chart and a column chart from the same data to show the different setups.
Create Charts and Graphs with a form builder instead of a WordPress Graph Plugin

form entries for building WordPress charts and graphsFirst, add a dropdown to your form with the options: Green, Red, Orange, and Blue.

Next, add a number field for "Number of votes." This is to show how forms can be used to count EITHER the number of submissions, or the sum of those entries.

You can see from my list of entries that:

  • Green has 1 entry, with 40 votes in total
  • Blue has 2 entries, with 30 votes in total
  • Orange has 3 entries, with 20 votes in total
  • Red has 4 entries, with 10 votes in total

Step 2: Add a shortcode to display your charts and graphs

Navigate to the page on which you want to display your graph. Insert your graph shortcode in the WordPress text editor where you would like the graph to appear.

Add graph shortcode on your WordPress page

The graph shortcode in the text editor of your page.

How about a basic column graph? The Field ID for my "Choose a color" dropdown is [484] so I'll start with this shortcode:

WordPress bar chart You must include a field id or key in your graph shortcode.

This is perfect for simple forms where every submission is weighted equally, e.g. users voting for their favorite product. The graph displays the options from the dropdown along the horizontal axis, and the number of submissions on the vertical axis.

Define the x- and y-axis for your WordPress charts and graphs

WordPress chart for total votes But what happens when you don't want each submission to be weighted equally? Perhaps you want to give VIP members double the influence of standard members in a voting scenario? Or show fundraising contributions given to different projects?

That is where defining an x-axis or y-axis comes into play. For this next example, the sum of the "Number of votes" field is used for the vertical axis instead of the number of submissions. Now, the number of votes are counted. This is the shortcode I used to defined the x-axis:

You must include a field id or key in your graph shortcode.

Style your graphs and charts

colorful WordPress charts and graphs The basic graph can be modified with additional shortcode parameters. For example, customize the graph colors with a comma-separated list of 6-digit hex colors.

You must include a field id or key in your graph shortcode.

Types of graphs and charts

Take advantage of the variety of graph types by changing the type=" " part of the shortcode. Options include column (as shown in the shortcode above), hbar, pie, line, area, scatter, histogram, table, stepped_area, and geo. Please note that geo will only work with a Country field (like a dropdown, Lookup field, or Dynamic dropdown).

WordPress charts and graphs examples

The examples below use the same dataset and basic shortcode. Only the 'type' parameter is changed.


Filter graph and chart data

A full set of advanced filtering options make your graphs even more powerful.

  • Display results just for the current user.
  • Include draft entries.
  • Display entries created before or after a specified date.
  • Only include entries where another field in the form contains a specific value.

WordPress charts without a WordPress graph plugin

Beautiful, eye-catching graphs that show the latest data from your form have never been easier. Transform your dry numerical results to instantly catch attention and draw in your website visitors. Once you're done, show off your hard work in our community site showcase and tell the world how you achieved it.

This short tutorial can't cover all of the options. So check out the charts and graphs documentation. You'll find more detail on filtering, graph legends, custom titles, and background colors in the docs.

Bonus Pun: I just watched a movie about a y=x graph. The plot was a bit predictable and a little flat. Good special f(x) though.

The post How to Create Charts and Graphs from your WordPress Forms appeared first on Formidable Forms.


Conditional Form Redirect on Submit: Seize the Moment

$
0
0

Are you waiting for visitors to respond to promotional offers in autoresponder emails? Don't wait any longer. Make the most of the moment of engagement and redirect after form submit.

Conditionally Redirect after Form Submit

One study shows that the average online shopper will visit a website 9 times before completing a purchase. Between visits, shoppers will typically check out your competition. Therefore, maximizing conversions while your visitor is on your site has never been more important.

In addition to utilizing your forms for marketing automation, immediately show your website visitor a product or offer that aligns with their interests. They're already on your website expressing interest, so what better time is there?

Formidable's conditional form redirect will connect visitors who submit your forms to content tailored to them. Deliver a promotion or coupon code customized to your users' interests with a redirect after form submit.

Two ways to implement a form redirect

There are two main ways to redirect visitors to a product, promotion, or special offer.

  1. Simple form redirect to a confirmation page for every form submission. When the form is submitted, your website visitor is sent to a confirmation page that contains a special offer. Freshen this up by updating it weekly or monthly. Customize the confirmation page to give it a more personal feel.
  2. Conditional form redirect to an offer that is tailored to your visitor's query. Visitors will be sent to a different page depending on the options they select in your form. This means you can send them to the promotion that best suits their interests.

This article will show you one idea for adding conditional redirects into your forms. We'll use the scenario of an online clothing store utilizing WooCommerce for the following three-step example. However, this method will work for almost any kind of business.

Step 1: Build/Edit the form to use for your form redirect

Ultimately, we need to know what type of promotion would best suit our visitor. To effect this, add a "My Query Relates To..." dropdown field to the form.

This new dropdown will have six basic options:

  • Baby clothes
  • Boy's clothing
  • Girl's clothing
  • Men's clothing
  • Women's clothing
  • Shoes & Accessories

Separate saved values in this field will allow the simpler form redirect option. Add these values for the "saved value" for each option.

  • baby
  • boys
  • girls
  • mens
  • womens
  • accessories

Add a checkbox to the form labeled "I am an existing customer." This will help personalize our promotion with a free shipping offer for new customers, and discounts on the next order for returning customers. You can customize your offers endlessly.

Conditional Form Redirect after Form Submit example form

Step 2: Set up promotional pages

Now it's time to think about the promotions. We have six query types, and each promotion will be different for existing versus returning customers. A page template will simplify this process.

Easy conditional redirect page template

First, at the top of the page don't forget to thank the visitor for their query, and assure them that it will be handled as soon as possible. We could use the shortcode to customize the thank you message. This way we can use the customer's name to make it more friendly and personal.

Use a WooCommerce Shortcode

Next, show the coupon code. In this example, we'll use a WooCommerce shortcode from our online store. This shortcode displays sale items from a specific category. (You need a third party Woocommerce extension for this).

Add a "call to action" and take care to optimize your page design to maximize conversions. Time-limited coupon codes are also a very effective way to increase immediate conversions.

Once the page template is perfected, copy this template to twelve new promotion pages. In effect, we'll have six for a free shipping code (new customers) and six with a discount code (returning customers).

Then set up the WooCommerce shortcode to display the right product category on each page.

Consider your redirect page slugs carefully

Consider the page slugs carefully before saving these new pages. This will avoid confusion and simplify conditional IF statements. In this case, we'll set up the six pages for non-customers with "contacted-" in the URL. Returning customers redirect pages will have the additional prefix "returning-" in the URL. After the prefix, the two pages for baby clothes should have identical links. Further, the two pages for men's clothes have identical links, etc. etc. So the page URLS will look like this:

mysite.com/contacted-baby/
mysite.com/contacted-boys/
mysite.com/contacted-girls/
mysite.com/contacted-mens/
mysite.com/contacted-womens/
mysite.com/contacted-accessories/
mysite.com/contacted-returning-baby/
mysite.com/contacted-returning-boys/
mysite.com/contacted-returning-girls/
mysite.com/contacted-returning-mens/
mysite.com/contacted-returning-womens/
mysite.com/contacted-returning-accessories/

Step 3: Configure your form to redirect after submit

In this example, the "My Query Relates To..." dropdown is field ID 218, and the "I am an existing customer" checkbox is field ID 262. Make the checkbox conditional with the six conditionals for the dropdown choices. Use inline conditional IF statements in the redirect URL.

The first section of the redirect URL uses the [if 262] tag to conditionally add "returning-" into the URL if the checkbox is selected:
mysite.com/contacted-[if 262 equals="I am an existing customer"]returning-[/if 262]

The second part of the redirect URL contains the six different [if 218] conditionals from the dropdown options:
[if 218 equals="Baby Clothes"]baby/[/if 218][if 218 equals="Boys Clothing"]boys/[/if 218][if 218 equals="Girl's Clothing"]girls/[/if 218][if 218 equals="Men's Clothing"]mens/[/if 218][if 218 equals="Women's Clothing"]womens/[/if 218][if 218 equals="Shoes & Accessories"]accessories/[/if 218]

Combined, the redirect is quite long and bulky. (Read on to see how it can be made shorter):
mysite.com/contacted-[if 262 equals="I am an existing customer"]returning-[/if 262][if 218 equals="Baby Clothes"]baby/[/if 218][if 218 equals="Boys Clothing"]boys/[/if 218][if 218 equals="Girls Clothing"]girls/[/if 218][if 218 equals="Mens Clothing"]mens/[/if 218][if 218 equals="Women's Clothing"]womens/[/if 218][if 218 equals="Shoes & Accessories"]accessories/[/if 218]

A simpler conditional IF statement for the redirect URL

form redirect settings
Long redirects work. However, if you ever make changes to your form, it will take time to adjust the redirect. This is where advance planning with your redirect page slugs and the names of your separate values will help.

In this instance, our URLs are identical to the separate values in our dropdown, so we can use a simpler solution. Note that this ONLY works when your field options match the page slug exactly.

mysite.com/contacted-[if 262 equals="I am an existing customer"]returning-[/if 262][218 show="value"]

Conclusion

There is potential for engagement the moment a website visitor submits your form. A form redirect to a tailored promotional page can increase your site's credibility and generate revenue.

Try out conditional redirects on your website today to see how it benefits your business.

Done something amazing with conditional redirect after form submit? Show off your Formidable Forms masterpiece in our community showcase.

The post Conditional Form Redirect on Submit: Seize the Moment appeared first on Formidable Forms.

How to Display a Custom Post Type from User Generated Content

$
0
0

Don't get left behind. Learn how to build searchable member databases, member directories, business directories and more.

User Generated Content via WordPress Frontend Post: I Did it with Formidable

Want to take on bigger jobs and earn new clients? User generated content is not just a trend. It actually helps define Web 2.0 and isn't going away.

User Generated Content: Google's definition of Web 2.0

Google's definition of Web 2.0

Harness the power of WordPress frontend post publishing, and level up your skills and prospects in no time.

My entry into frontend publishing was a little messy, but ultimately very productive. Here's my story.

I should say at the outset: this is a little more than the "three steps and presto it's done" that I usually write. This is because user generated content from WordPress frontend posts can really achieve a lot! This feature is so powerful, and can be utilized in so many ways. Even in this article, I'm only going to scratch the surface of what it can do.

The flexibility of a WordPress frontend post

Allowing your website users to submit posts is a hugely effective way to build a large, content rich website. The secret? Get others to do all the hard work! WordPress frontend post publishing opens the door for guest blog posts, member databases, community or company resource databases, document libraries, and much more.

Data is added as a normal WordPress blog post or custom post type, so many other plugins can still leave their mark. For example, a mapping plugin can take data from the WordPress frontend post, and add a pin to a map. Such user generated content would be perfect for a business directory.

User Generated Content via frontend publishing to populate business directory maps

One example of user generated content is a business directory map.

For a beginner, all these features can be quite daunting, as I found out myself. With my first-ever project using Formidable Forms a few years back, the ability to allow user generated content drew me in and got me hooked. But I'll admit it took me a while to figure it all out!

My first experience of leveraging user generated content was building the website for Suspended Coffees. (It's a non-profit organisation focused on encouraging random acts of kindness.) I'm going to share my own experiences (and mistakes), so that you can hopefully achieve better, in less time, and with less stress.

The brief for this project was simple: a raft load of features on a tiny budget! We didn't have funds for any custom coding or development. We needed a solution that would work straight out of the box, and Formidable had everything we needed.

How I started with WordPress frontend posting

I wish I could say I got this job because I was super-talented. Or because I'd submitted a design brief that was simply impossible to ignore. But the truth is, I was just nearby. John Sweeney is the founder of the movement, and although I didn't know it at the time, he lived less than half a mile from me. One morning I woke to a Facebook message on my business page from John. We started talking about his ideas and what was possible for a website using frontend publishing. A directory of members would be a big feature. The basic requirements included:

  • new member signups,
  • members to update their own listings
  • the ability to be searchable, and
  • users needed to be displayed on a map.

Allowing users to submit their own stories was also high on the wish list. With all of this user generated content, admin moderation was going to be an essential feature too.

I did some research, and discovered the Create Posts feature in Formidable Forms. This feature (in addition to the Views feature discovered later) covered everything we needed. So after a lot of planning and pre-sale questions, we took the plunge and started building.

In over my head

Before we start, let me just remind you that this was a few years ago. I'd been doing web design work for a while, but I'd been old school HTML for years and had always used Dreamweaver as my tool of choice. WordPress was new to me, and I'd really only started looking at it seriously in the last 12 months. So not only was Formidable new to me, but also the entire system. I'm not ashamed to admit I was in over my head —but I do enjoy a challenge! Basically if "me from 5 years ago" could make it work, anyone can!

Also, looking at the site now, I know I could do it a lot better if I did it today. So I expect to see your examples posted in the community showcase looking much more awesome than mine!

Start simple

Form settings to create a frontend post
To figure out Formidable Forms for the first time, I decided it'd be good to start with the simplest features first. I figured this was the user submitted stories. John already had an active blog, and wanted the option to add guest posts from time to time. Once I'd read all the Formidable documentation on creating posts from a frontend form, I brewed a fresh pot of coffee and set to work. We set up a simple form to allow guest blog/story submissions. It included fields for name, email address, title for the story, the story, category, and an image upload.

Formidable's Post Status feature

Two features immediately struck me as genius. The ability to create a WordPress frontend post in draft mode was the first. I set up an email notification so the site admin would always be aware of new submissions. Then these submissions could be checked before appearing on the site. This prevented any unwanted material from being published. We also loved that we could edit user generated submissions. We could even format them and add images, just the same as with a post created in the back-end of the website.

The second feature that really caught my eye was auto-populating the category choice drop-down. I'd expected the set up to be a bit more involved in the first place. I'd also expected to manually update the form any time new categories were added. Not so with Formidable!

For this form we didn't need to set up a custom post type. These submissions would be appearing in the main blog along with all the other posts. The first cup of coffee was still warm when the form was published. We tested it and tweaked the finer details within the next hour. This part of the project was completed much more quickly than I expected.

Build the members database

Encouraged by my early success, I decided to tackle the membership database next. The plan was simple: create another frontend form that created posts in a custom post type. This time the form would include a lot more detail, allowing people signing up to include social media and website links, contact information, and a full write-up/promo of their café.
WordPress form to submit and display custom post type with frontend posting

Utilize a mapping plugin

I'd found a WordPress mapping plugin that could take address fields from a WordPress custom post type and display them on a map (Codespacing Progress Map). This was so we could not only build a great directory, we could also have a map view and search function to display all participating cafés. This is where a LOT of trial and error came in. I will admit that while the initial build was quick, we soon realized our mapping plugin wouldn't do everything we needed, so we had to re-visit the search function later in the build.

Use a view to display custom post type submissions

The next challenge was to get the submitted data to look good in the created post. For this we chose the "Customize Post Content" option to create a new View. Using some HTML along with the field shortcodes, we we able to display all the submitted details in a simple, custom layout that was easy on the eye. It even included a mini map showing the location of the featured café.

With our custom post type set up, our form created, and the mapping plugin configured to accept the submitted addresses, we uploaded our database of members and made the site live. Frontend publishing, here we go! Then we sat back and watched happily as new signups came in nearly every day.

Pro Tip: Don't make this mistake!

We had initially planned to use the search function in Progress Maps, so our original form used one long address field. After a LOT of work and frustration, we found it didn't work well for global searches. As many people would be searching for locations near holiday destinations or overseas family, we decided to switch things up and use the more powerful search and filter functions of Formidable instead.

At this point we realized that having separate fields for town/city/state/country, etc. would allow us to filter results much more effectively. Our database of nearly 3000 participating businesses was exported as a CSV and because of the nuances of international addresses, it had to be manually edited. To split up these fields before re-importing the data was a nightmare job that took one very patient team member nearly 3 weeks! The lesson? It's easy to combine separate fields, so always start that way!

Make the user-generated directory searchable

By far the most taxing part of the whole process for me was the search function. Not because it's actually hard to do, but because of bad planning (See the Pro Tip above) and simple stubbornness!

I knew you could search Views in Formidable, but I was a newbie. I barely understood what a Post was and I hadn't a clue what Views were. So, I spent a couple of weeks going round in circles trying out 3rd party search plugins and finding issues with every single one I tried. Eventually I admitted defeat and opened a support ticket with Formidable.

A View is the answer to searching submissions

This is when Jamie explained to me that Views are simply ways of displaying the data submitted via a form.

A Dynamic View is what I needed, showing both the Listing Page with ALL my entries, and the Detail Page which showed the specific data for a single entry.  Both the Listing View and the Detail View could be customized to show only the information I needed. (Too much info on the Listing page could look messy.) The [detaillink] shortcode made entries on the Listing page automatically clickable to take users to the individual listing.

Build the search form

The final step was to build the search form. We followed the guide and set ours up to allow filtering by country and state, as well as café name and address. We were amazed at how easy it was to find any entry we needed. Now our users could use the visual interactive map to browse participating locations near them, or use the Formidable search for specific café names or locations. The two perfectly complimented each other.

Search and display custom post type with a WordPress frontend post

A Formidable View: search results for Suspended Coffees

Frontend publishing opens doors

This project is a few years old now and another developer has since taken over maintenance of the site. But I will admit I'm still kinda proud of it. It was a big challenge for someone completely new to Formidable, and this powerful plugin allowed me to achieve things with WordPress frontend posting that I hadn't thought possible. Since then I've gone on to use Formidable on all sorts of projects where frontend publishing was needed. I've even included it on some projects where it wasn't actually necessary, but the site owner simply found the Formidable Forms interface more user friendly than the WordPress interface.

Frontend publishing opens the door to user generated content. It allows your viewers to get involved, while you build communities and the searchable directories to support them. How could WordPress frontend posting change your online presence? Get started today.

The post How to Display a Custom Post Type from User Generated Content appeared first on Formidable Forms.

How to add Real Estate listings to your WordPress site

$
0
0

Searching for a WordPress real estate plugin? Did you know you can display your real estate listings with Formidable views?

Display Real Estate Listings without a special WordPress Real Estate Plugin

Why use a 3rd party WordPress real estate plugin? Today I'll show you how to build a real estate listing system within Formidable itself!

This tutorial is loosely based on Formidable's documentation on how to display real estate listings. (It is worth a read too if you can find a moment.) You can also download our Real Estate Listings example and import it onto your site for an extra quick setup.

WordPress Real estate listings example

Step 1: Load the Real Estate Listing form template

Formidable comes with a real estate listing form template. So this is a great place to start. The form template is fully customizable to suit your own specific needs and it offers the common features an online real estate listings form would have.

Load Formidable's real estate listing form template

Go to your Forms admin dashboard, click the "Add New" button, and select the template in the starting screen. Use the form shortcode to place this form on the page of your choice.

For this example I'll use the vanilla form template without any modifications. However, if you need extra fields or would like to adjust the layout to make your real estate form fit perfectly in your website, now is the time to do it.

Step 2: Create your listings page

To display your real estate listings on your WordPress website you need to create a View. This View will display the submitted properties in a grid and allow site visitors to click on them to see more details. Start by going to 'Formidable' → 'Views' and select 'Add New'.

Give your new View a title. This won't be visible on the site but is handy for reference. A descriptive title also makes it easier to find your View if you have a lot of them.

To begin setting up your new View, first select your Real Estate listings form in the 'Use Entries from Form' drop-down and select 'Both (Dynamic)' for the Display Format.

Select your real estate listings form

In the Advanced Settings box near the bottom of the page, set your 'Detail Page Slug'. The demo uses 'Parameter Name': 'listing' and 'Parameter Value': 'Key'.

real estate listing detail page settings

Add content to the listings view

Next, setup the page and the form data in the grid and detail views. To do this, add HTML into the 'Before Content', 'Content', and 'After Content' boxes on the Listing Page View. This 'Content' section will be repeated for each listing. Also, add HTML to the 'Dynamic Content' box - this displays the detailed individual listing. You can find sample HTML in the Real Estate Listings demo and in the real estate listings doc. All the HTML can be customized to suit your needs and make your Real Estate listings look exactly how you would like. DON'T FORGET: swap out text like 'photo-url' and 'list-price' in the example code for the IDs of your corresponding  fields.

Before Content placement on the listing page for real estate listings

Finally, save your view and insert the view into a page using the

No Entries Found
shortcode. More information is available on publishing views here.

Troubleshooting Tip: If your [detaillink] doesn't work, go into your WordPress Settings and save your Permalinks. This is usually the culprit!

Detailed WordPress real estate listing view This is where the real fun starts. Once you've entered your first 6 or 7 properties you can start to see how the layout & design looks and tweak the code in your view to suit.

The HTML for the listings page begins with <div class="listings_list one-third"> which is the correct class for a three column layout on the Formidable site. You may need to adjust this to suit your theme or maybe use a table layout.

Layout styling depends a lot on your theme so I can't provide specific customizations here. But your theme documentation should provide all the instructions you need.

Or if you are using the Bootstrap styling on your site, the Bootstrap grids would be great.

Once your listing page is perfected, work the same magic on your details page. The details page contains a lot more information about your property, the in depth real estate listing. You can even insert a NextGen image gallery to show off the home properly.

Bonus - Create a 'Featured Real Estate Listings' widget

A sidebar widget is a great way to highlight new or featured properties. This is simple to do as well. You don't need a WordPress real estate plugin to display a widget with listings.

Setting this up starts in a very similar way as the main listings.

  1. Go to 'Formidable' → "Views" and select 'Add New'.
  2. Give the new view a title and a description for reference, if you would like.
  3. Select your Real Estate listings form from the 'Use Entries from Form' drop-down.

featured real estate listing Here is where it changes a little. This time you should select 'All Entries' for the Display Format if you would like to show all featured listings in a long list. OR select 'Single Entry' if you would like to randomly display a single featured listing that is different each time the page loads.

Design Tip: Personally, I prefer to display a random single listing. If you display all the featured properties it can overwhelm your sidebar or footer widget and look messy, especially when viewed on smaller screens.

As before, add HTML into the 'Before Content', 'Content', and 'After Content' boxes as needed. You can also add a link in the 'Before Content' or 'After Content' to view all listings. In the 'Advanced Settings' at the bottom of the view, set the 'Order' to 'Random'.

Only include featured listings

Finally, add a filter in the 'Filter Entries' section. Select your featured check box from the dropdown, 'is not equal to', and leave the last box blank. This is saying if the featured field is blank, then don't show it in the list.

Show the featured listing on your page

Save your view and copy the shortcode for your view, i.e.

No Entries Found
. Go to 'Appearance' → 'Widgets' and drag a 'Text' widget into your sidebar. Insert your view shortcode in the text widget, and save your widget.

Now your widget will display your featured properties!

You don't need a separate WordPress Real Estate Plugin

As you can see, it's simple to create a completely customizable real estate listings page. Formidable Forms Pro is all you need. This tutorial has focused on functionality, so you may need to take some time to tweak your design and make it beautiful. I'm sure you'll produce beautiful real estate listings for your WordPress website.

Download the real estate demo and get your listings up today.

The post How to add Real Estate listings to your WordPress site appeared first on Formidable Forms.

How to Create a Custom T-Shirt Order Form in WordPress

$
0
0

Are you having trouble managing your WooCommerce variable products? Do it the easy way with a custom order form for the products in your t-shirt store.


wordpress-t-shirt-order-form

Why WooCommerce?

Never has there been a bigger fan of WooCommerce than I. Okay, this might not technically be true. I am a huge fan of the product, but stopped short of tattoos expressing my devotion. I love it for the sheer simplicity of setup and use. My own website runs WooCommerce along with their subscriptions add-on and it's been an essential and rock-solid part of my online presence for years.

My First WooCommerce Website

The ability to use eCommerce was one of my biggest motivating factors behind my transition to WordPress. Sure, I'd used standalone scripts in HTML websites. I had tried integrating PayPal buttons and even PayPal carts. But it was all fairly awful, both in appearance and user experience. Considering the amount of time and effort that I'd put into setting it up, the result was very disappointing.

When I heard about WooCommerce I couldn't wait to try it out. For the most part it exceed my expectations whilst remaining very easy to use. From day one I knew this was the right solution for me. With zero experience, I had a working online store setup in just one morning to sell my wife's organic handmade soap products. (Don't get too excited, she doesn't make them anymore.) I recommended WooCommerce to friends, and even helped them build their own online shops.

Limitations of a WooCommerce variable product

It was a few months before I found a challenge that WooCommerce wasn't great with. That happened when I wanted to use complex product variations with price calculations.

Simple products are easy. Add variations for color and size and you're still well within the limits of what WooCommerce can comfortably handle. But any more complex and you start to get stuck. If your product is highly customizable, then a WooCommerce order form plugin might be the right solution for you.

T-shirt store with a WooCommerce variable product

Set up a custom T-shirt store

To follow along with this tutorial, you'll need WooCommerce installed and setup on your site, and the Formidable WooCommerce add-on.

My t-shirts will be available in a range of styles, sizes, and colors. The base price of $6 has additional charges for the largest sizes.

So far all of this can be completed in WooCommerce. But variations can be slow and tedious to setup. So I personally find it quicker and easier to do as much of this as possible via Formidable. I'm going to use WooCommerce just for the color and style variations, to allow a different product image for each variation. But I'll setup the size variation in Formidable. I'm also going to allow the customer to choose custom text, charged at $1.50 per row with a max of 5 rows and no more than 25 characters per row.

Formidable will take care of the calculations and pass on the total price to WooCommerce.

First I'm going to add a new product to my WooCommerce store. My product is titled "Smokin Hot Custom T-Shirt" with a base price of $6. I'll setup my variations for style (Mens, Womens, Kids) and Colors (White, Red, Blue, Green, Black), and make sure that the base price is set for all my variations. Because the style and color variations are identical for all the t-shirts in my online store, WooCommerce handles this perfectly. But if your products have wildly different variations, you may find it easier to include them in your Formidable form too.

Build the t-shirt order form

Formidable t-shirt demo form With the product setup complete, it's time to start work on the form. My form is fairly simple with only 6 fields. The first field is a dropdown to select size, and I've used separate values in this field to define additional costs for the Large and Extra Large sizes.

The next field is a dropdown, this time with options for custom text. Again I've used separate values to define additional costs for these options.

The next 3 fields are single line text fields, which are set to a max 25 character limit. Conditional logic is setup on each of these fields so that only the appropriate number of fields are displayed based on the selection above.

The final field is the important one - this is a hidden field with the price calculation in it. By simply adding the values from the two dropdowns, this field calculates the amount to be added to the order total.

Add the order form on the t-shirt product page

WooCommerce product form builder Now that the t-shirt demo form setup is complete, the next step is to integrate this calculation with the product. Return to the product editing screen, and in the sidebar there is a section titled "Choose Form". If you don't see this immediately, click the "Screen Options" tab at the top right of the editing screen and make sure the "Choose Form" checkbox is selected.

Simply select the form just created, click 'Update' and it's done!

The additional form will appear on the product page, and the product price will be adjusted depending on the options chosen. I set a base price for my t-shirts, so I'm leaving the box unchecked to 'use the total in the form without adding the product price'. But you have the option to allow Formidable to calculate the entire total if you prefer.

Building complex variable products has never been so simple!

If you've been using Formidable a while, you already know just how powerful these calculations can be. This example is short and simple, but Formidable also handles complex calculations like a breeze!
custom WooCommerce t-shirt order form

Run your t-shirt store through Printful

Do you need your online t-shirt store to run without you? Integrate your T-shirt store with Printful for custom-made swag, integrated shipping calculations, and automatic order fulfillment. At Formidable we have used Printful, and love the simplicity of their system and how well it integrates. It almost like a drop shipping service, but for your custom products!

The Printful service allows you to  sell a t-shirt on your online shop to someone who loves your design. That order is automatically sent to Printful where it gets printed, packed and shipped. Your customer receives their shipment with your branding all over it.

If you want your new online t-shirt business to be focused on unique fresh styles, rather than overwhelmed by storage issues and stock management problems, this can be a great way to go. The Printful WooCommerce integration plugin will sync your product variations between Printful and WooCommerce. Printful even creates the t-shirt images for you to use in your store.

Conclusion

Combine a rock solid e-commerce system with the power of Formidable Forms to allow you to sell much more than just t-shirts in your online store. We'd love to know of any unique and creative ways that you've used our WooCommerce add-on to maximize your online sales.

If you've built an online store that uses Formidable, submit your creation to our community showcase, and inspire others with the possibilities!

The post How to Create a Custom T-Shirt Order Form in WordPress appeared first on Formidable Forms.

5 Easy Steps to the Perfect Online Lease Agreement Form

$
0
0

Are you managing and leasing property? Use an online lease agreement form with digital signatures to simplify the process.

Online lease agreement form

Last week I wrote about utilizing the power of Formidable to display real estate listings on your WordPress website. Now all of your listing data is combined in one easy to use system.

But what comes next? If you're showing properties for lease, wouldn't it be handy to accept digital signatures in an online lease agreement form?

Here is a quick tutorial to create a simple, effective lease agreement form in just a few steps.

Step 1 - Plan ahead and research local laws

Just because your agreement is online doesn't mean it's any less legally binding. But in some areas you may be required to display additional statutory information or disclaimers for an online document. Double check, and add any extras to your standard wording.

Remember that you can use HTML elements to display text within your form, and inline styling to highlight the important bits in a bold font or vivid color. Would you like to verify acceptance of your terms and conditions? Add an "I agree" checkbox, and conditionally hide sections of the form until the box is checked.

Step 2 - Build your lease agreement form

No doubt you've already got a paper lease agreement form. Copying this to a digital form shouldn't be a huge deal, but it could be a big time saver!

You can even utilize the information submitted when you uploaded the property details to auto-populate many of the fields on your lease agreement form. Not only does this make the process quicker, it also means it's impossible to enter incorrect details, misspell or mix up property specifications.

Step 3 - The signature

A signature is an essential part of any lease agreement. The Formidable Signature add-on allows your users to sign the agreement directly within the form. They have the option to either draw their signature with a trackpad/mouse or just type it.

Offer your clients the ability to sign forms on the spot, eliminating the need to scan and fax forms, or a trip back to the office to sign paper forms. Simply add a signature field to your form and then sign forms and contracts online.

After the signature is submitted, it is saved as an image and stored in your Formidable uploads folder.

Step 4 - Document delivery

When the lease form is filled out, signed & submitted, there is still more to do. The client needs a copy of the lease agreement. But this can be automated too!

The 3rd party Formidable Pro2PDF add-on allows you to configure a customized PDF copy of the lease agreement to be delivered to the client when the form is submitted. Or send a copy to your office for printing and hard-copy backup if you wish.

Step 5 - Collect a deposit

In the world of property leasing, a security deposit is a high priority when arranging a lease. Again you'll be happy to know that Formidable can handle this automatically with instant online payments.

If you wish your form to collect a deposit, don't forget to modify your form actions to trigger on Payment Success so the lease documents won't be emailed the moment the submit button is clicked.

If you auto-populated the monthly cost of the property back in step 2, you can now add a field to calculate the deposit. In my part of the world it's usually a month deposit plus a month rent in advance. A simple x2 calculation is all that would be required. Want the calculation to include local taxes, service fees, and even utility costs? The final price can be calculated based on your exact requirements for this lease agreement.

Either the Paypal Standard or the Stripe Payments add-on, will take the calculated total and submit it for payment on the spot. Proof of payment is usually emailed to you within moments, and Formidable will automatically trigger the form actions you've setup as soon as payment completes.

Conclusion

It isn't always easy to keep track of paperwork and property details. Looking disorganized in front of potential clients is never a good thing. Not only can Formidable help you be more efficient and organized, it can also make you look good in the process.

An online lease agreement system helps show that you're a real professional, and that you put in the extra effort to make sure everything runs smoothly.

So whats stopping you? Create your online lease agreement system today!

The post 5 Easy Steps to the Perfect Online Lease Agreement Form appeared first on Formidable Forms.

Viewing all 521 articles
Browse latest View live