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:
So to achieve this follow these steps.
- 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.
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.
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.
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.
5. On the right, click 1 Column.
6. Now drag your form into the new row that you just created.
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.
8. Enter some name for it so you can recognize it in the next steps. Then click Save row.
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.
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.
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.
12. Now you can delete the now empty row you created before. This is what your form should look like.
