Contact Form 7 integration
How to use stripe-express elements in Contact form 7.
- A created element (if no, check create element)
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 sport event registration form which includes events detail, athlates information, registration fees, tickets purchase, customer questions and so forth...
What you expect is as long as your customer registered, you can not only collect the registration information but also let customer pay these fees. At the same time, you can even send a customer confirmation email once it's done. Sounds good?
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...
This type button will eventually redirect to stripe hosted checkout-page.
stripe-express plugin and choose
CF7 Redirect type to create a payment button.
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 have installed
stripe-expressplugin, you should see there is an new tag called
stripe express element
Then click the
stripe express element tag to insert, a configuration dialog will be shown. The key is we have to select an element which is required, if there is no one list here, then we have to create them first in
In this dialog, there are three fields we can configurate:
- Element ID: it's required to select one element created from our
stripe-expressplugin, if no, please go to previous step to create one.
- Amount field(optional): we can specify a field name from the current cf7 fields. If leave it empty, then the payment
amountwill be same as the value when you create the element button. But if specified, the payment
amountwill be used this field value(might be from customer typing or a hidden fixed field)
- Quantity field(optional): Similar with amount field, the value will used to calculate the total payment amount which is equal to
don't worry this inserted tag [stripeexpresselement], this will be invisiable for end users and just used to link to our plugin's element button.
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_element elementId:19] [submit "Submit & Pay"]
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!
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.
Three options you can touch these data:
- The form fields are sent to your customer with email already.
- Contact form 7 recommends to use Flamingo – With Flamingo, you can save submitted messages via contact forms in the database.
- 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.
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.