stripe-express doc logo
Launch Stripe Express

Contact Form 7 integration

How to use stripe-express elements in Contact form 7.


Prerequisites

why we need some customized fields for payment?

For all the build-in elements, they are fixed once it is created, including the fields like name, email, phone. However people always want to attach more fields or information along with the payment, no matter if these fields are static or collected by customers.

For example, you have a travel plan sale which includes some dates, fee, people, view point and so forth information, or you want to collect some additional fields from customers like pick up places, family members...

You wish once it is purchased, you can see all of this information along with this order so you can prepare or send a customer confirmation email.

Why choose Contact Form 7?

Contact Form 7, As top 1 form builder plugin with over 5 million installations, we do like Contact Form 7, not because of popular, but simple, flexible, etc...

Create CF7 form

After installing the CF7 plugin, there is a default form, so we use it to do our guide. Click the form to edit it.

if you are a premium version user, you should see there is an new tag called stripe express submit

cf7form with stripe express

Then click the stripe express submit tag to insert, a configuration dialog will be shown. The key is we have to give it a id which is required and exactly the same as the element id. Here we use #4 element which is a one-time button.

cf7form tag dialog with stripe express

You can also manually type tag code instead of click tag to insert.

<label> Your name
    [text* your-name] </label>

<label> Your email
    [email* your-email] </label>

<label> Subject
    [text* your-subject] </label>

[stripe_express_submit id:4]

Now save it and you are done!

Test your form

In any of your pages or posts, insert your contact form 7 which you just created and you should see below!

cf7form preview with stripe express

The validation is coming from contact form 7 self and if you fill all required values, click the pay button, contact form 7 will send your customer an email if you config the email during your creating form. Once the sending success(you can also turn the send email off), your customer will be redirected to the stripe checkout page and this behavior is the same as a standalone one-time button does.

Check the fields information

Three options you can touch these data:

  1. The form fields are sent to your customer with email already.
  2. Contact form 7 recommends to use Flamingo – With Flamingo, you can save submitted messages via contact forms in the database.
  3. Go to stripe dashboard => find the payment => check its metadata

Tips: you can also attach any read-only or hidden fields to help you to track payment like below contactFormId.

cf7-stripe-metadata

Submission flow

Continue to above, All of our widgets support inserting into any form from CF7 as its submission button. When customers submit the form, the CF7 original sending email submission does its own job(you can also turn it off), once its success, the payment workflow will be triggered then. After the payment, you should see these fields information in your payment details's metadata, never miss them.

Payment workflow might be different based on which widget you are using, if one-time payment or alipay, your customer will be redirected to the stripe checkout page. Otherwise, your customer will be always on current page.

Customize your form

I bet you can find many customize contact form style as your wish. But if you not, a simple way is to use our build-in tyle classes. You just need to insert the class itstripe-elements in form tag by following two steps.

  1. Add class how to add class to cf7 form

    <div class="wp-block-contact-form-7-contact-form-selector">[contact-form-7 id="104" title="Contact form 1" html_class="itstripe-elements"]</div>
  2. Modify form content

    <div class="row mb-3">
    <label class="col-sm-4 col-form-label">Your name</label>
    <div class="col-sm-8">
      [text* your-name class:form-control]
    </div>
    </div>
    <div class="row mb-3">
    <label class="col-sm-4 col-form-label">Your email</label>
    <div class="col-sm-8">
      [email* your-email class:form-control]
    </div>
    </div>
    <div class="row mb-3">
    <label class="col-sm-4 col-form-label">Subject</label>
    <div class="col-sm-8">
      [text* your-subject class:form-control]
    </div>
    </div>
    [stripe_express_submit id:4]

    Refresh the page and you got: cf7form preview with stripe express