Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Credit Card

Last Updated: September 4, 2021

Knowledge Base → Forms → Form Building → Field Types → Credit Card

— Premium Feature —

You can use a Credit Card field in your forms to collect payments from users. We don't recommend collecting credit card information without an add-on to handle it securely. As a result, you won't normally see the credit card field listed with your other fields. The Credit Card field will only appear if you have the Stripe or Authorize.net AIM add-on active.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

Credit Card Frontend

Security best-practices

Whenever you are collecting sensitive information, you should use SSL on your site. Depending on your web host, you may be able to get free and easy SSL through Let's Encrypt. Please contact your web host for information on how to set up SSL forms on your site.

Standard field options

Credit Card Field OptionsCredit Card Field Options

  • Field Type
  • Required
  • Field Key
  • CSS layout classes
  • Label Position
  • Visibility
  • Conditional Logic

Field-specific options

Credit Card Security

Note: This option does not appear when the form includes a Stripe form action. Stripe uses the most secure option, and no card values will ever hit your server.

When allowing a user to enter their credit card information, you have four different options for storing the credit card information. When collecting credit card information, the CVC code (3-digit code on the back of VISA and MasterCard, and 4-digit code on the front of AMEX) will never be stored.

  • Save only the last 4 digits - This will only save the last four digits of the card number, and the card's expiration date.
  • Do not store the card number - This will only store the card's expiration date.
  • Store the whole card number (not recommended) - This will store the whole card number, and the card's expiration date. Storing credit card numbers on your own site is not recommended, and comes with extra liability.
  • Do not store or POST card values - This will only store the card's expiration. In addition to not storing the card's number or CVC, this option will also prevent those values from being sent to your server. This is the most secure option, but is not supported by every payment processor. This option is recommended when using Stripe, but it not supported with Authorize.net.

Insert placeholders

Note: If the form includes a Stripe form action, the placeholders will be set automatically by Stripe Elements.

If you would like to add a placeholder text to the credit card field inputs, follow the steps below.

  1. Go to your form Build page.
  2. Select the credit card field where you would like to insert a placeholder. In the field options, go to the Advanced section and insert your desired placeholder text in the credit card fields.
    Address fields Placeholder
  3. Save the form and click Preview. Now when the user opens the form, the credit card fields will show the placeholder text. When they start typing in the credit card fields, the placeholder text will be cleared.

Displaying credit card information

Based on how you choose to handle the security of your credit card field, you can display your data differently. Here are examples for how your credit card information can be displayed.

  • Save only the last 4 digits

    xxxxxxxxxxxx1111 01/2017
  • Do not store the card number.

    01/2017
  • Store the whole card number (not recommended)

    4111111111111111 01/2017
  • Do not store or POST card values

    01/2017

Using the Credit Card field

Collecting Payment

If you would like to find out more about collecting payment, click on the add-on you are using to find out more about creating a form action to collect payment.

  • Stripe
  • Authorize.net AIM

Enable Google Autofill

If you would like to enable Google Autofill to the credit card field in your form, add the autocomplete="cc-number" attribute to the credit card number input field.

  1. Go to your form Settings → Customize HTML.
  2. Look for the Credit Card box and replace [input] with [input autocomplete="cc-number"]
    Credit Card Google Autofill

Note: This will also enable the autocomplete options for CVC fields.

Related developer hooks

  • Change the labels in a Credit Card field with the frm_combo_dropdown_label hook.
  • If you have another way of processing payments, you can enable the credit card field by adding this line to your code:

    add_filter( 'frm_include_credit_card', '__return_true' );
  • Security best-practices
  • Standard field options
  • Field-specific options
    • Credit Card Security
  • Insert placeholders
  • Displaying credit card information
  • Using the Credit Card field
    • Collecting Payment
  • Enable Google Autofill
  • Related developer hooks
Categories
×

Categories

  • Installation & Getting Started
  • Account Management
  • Forms
  • Entries
  • Views
  • Styles
  • Importing & Exporting
  • Add-Ons
  • Extend Formidable Forms

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

You do not have permission to view this form. Maybe you need to log in?

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews