Clickfunnels: How To Make CC Exp Date Fields Into Drop-downs Instead Of Text Fields

When you add an order form element onto the page in Clickfunnels, the credit card expiration date fields are for some reason text fields. This was a problem with a project I was working on when the order gets exported out into a 3rd party CMS and additional subscription actions take place. The expiration date is not explicit so some people entered a double digit year instead of 4 digits. The 3rd party service expects a 4-digit year, so it generated errors on those that were not 4 digits.

If you have a similar problem or if you just want to streamline your form, here is a walk-through on how to turn the ClickFunnels order form credit card expiration date text fields into select drop-downs.

Here is what the credit card element looks like when added to a page, and what we want it to look like:

Clickfunnels order form credit card expiration date field

So to achieve this follow these steps.

  1. Start by creating a new step in your funnel. This will be just a temporary step you will use to make a template from the correct credit card form element.

Clickfunnels order form credit card expiration date field to select - step 1

2. Click on Sales tab in the top and select Order Form. Then find a template that has a form on it with the correct expiration date fields. Select that template.

Clickfunnels order form credit card expiration date field to select - step 2b

3. Confirm that the form on the page has the select fields and not the text ones for the credit card expiration date. You can do this by clicking on the form element and in the right settings pane, click Step #2 tab to switch the form to step 2.

Clickfunnels order form credit card expiration date field to select - step 3b

4. Now we need to create a new row that we can save as a template. To add a new row, click the blue plus icon below your order form.

 

Clickfunnels order form credit card expiration date field to select - step 3

5. On the right, click 1 Column.

Clickfunnels order form credit card expiration date field to select - step 4

6. Now drag your form into the new row that you just created.

Clickfunnels order form credit card expiration date field to select - step 5

7. The new row that you just dragged the form into has a blue border. Not orange. Hover your mouse on the edge of your form until you get the blue border and controls. Click on the floppy-disk icon to save this row as a template.

Clickfunnels order form credit card expiration date field to select - step 7

8. Enter some name for it so you can recognize it in the next steps. Then click Save row.

Clickfunnels order form credit card expiration date field to select - step 8

9. Now go back to your funnel step where you want to add this form to. Add a new row under the row where you want to add the form.

Clickfunnels order form credit card expiration date field to select - step 9

10. Clicking the plus to add a new row will open a control box on the right. Select My Rows on the right and then locate the name of the form template you saved in step 8.

Clickfunnels order form credit card expiration date field to select - step 10

11. The form will appear in the new row you created. Now you just need to drag it into place. Hover your mouse over the corner of the form until you get the orange border and controls. Click on the move icon to drag the form where you want it to live.

Clickfunnels order form credit card expiration date field to select - step 11

12. Now you can delete the now empty row you created before. This is what your form should look like.

Clickfunnels order form credit card expiration date field to select - step 12

Leave A Comment

Your email address will not be published. Required fields are marked *

Timber Web Design
2600A E. Seltice #274
Post Falls, ID 83854

509-954-0795

Timber Web Design © 2024. All Rights Reserved.