WordPress Quote Forms with Stripe Payments: Setup Guide

The AI wizard is optional. You can create the same steps manually and review the pricing before connecting Stripe.

Start in the plugin forms screen and open the AI wizard. Describe the business model, the packages, the fields you need, and the payment intent. For this example, the prompt asks for a website project quote form that sells online website packages.

The goal is not to publish the AI result blindly. Use it to get a structured first draft faster: package selection, optional services, contact fields, a final summary, and a payment step.

After generation, review the builder before touching payment settings. The first pass should already contain the main steps of the buyer journey: package choice, project details, options, contact details, and checkout.

Rename labels, remove unnecessary questions and make the form describe one clear offer. Review what the visitor is reserving or paying for.

Return to the forms list and confirm that the new form is saved with a recognizable name. This matters when the site has multiple quote forms, demos, or client-specific calculators.

For the article example, the form is named Website Project Quote & Deposit so the payment purpose remains clear in the admin.

Open the builder again and confirm the customer journey is logical. A good quote-to-payment form should not ask for payment before the visitor understands the offer and total.

In this example, package and option choices come first, then the payment method step appears after the quote total is calculated, and the final summary appears before the Stripe modal opens.

In the inspected settings, the Payment section contains Stripe controls including Use Stripe payment, Stripe publishable key, Stripe secret key, Currency and Amount to pay. Enter the matched publishable and secret TEST keys from your authorised Stripe test environment. Keep the secret key in the plugin’s server-side setting and out of screenshots or public fields.

The inspected Amount to pay selector offers Full amount, Percentage of the total price and Fixed amount. For the illustrated deposit, select Percentage of the total price and enter 30. Verify the resulting amount rather than relying on the quote display.

Create or edit the WordPress page that will host the quote form. For a focused quote funnel, embed the form in fullscreen mode so the buyer experience is not visually competing with the surrounding theme.

Use the form shortcode and add the fullscreen attribute.

Open the public page and start as a normal visitor. The first screen should make the offer obvious and should not feel like a generic contact form.

For a website quote form, package names and prices should be visible before optional questions. That gives the visitor enough context to continue.

Choose a package and confirm that the live total updates immediately. This is the core advantage of a quote form over a normal contact form: the buyer sees the pricing consequence of each choice.

If the total does not match expectations, fix the form item prices before testing Stripe. Payment settings should be the last layer, not a workaround for incorrect quote logic.

Continue to the payment method step and confirm that the secure card payment option appears after the quote is calculated. In this example, the form still displays the full quote total of $2,400 on the step.

The 30% rule is applied when the Stripe modal opens, where the deposit due is $720. That separation is important: the form total remains the quote total, while Stripe receives the configured Amount to pay.

Before opening the Stripe modal, review the final summary. A good summary helps the customer understand what they chose and gives the business a cleaner lead or order record.

Make sure required contact fields are filled and that the summary rows reflect the same choices and prices shown earlier in the form.

The existing illustration shows a 720 deposit for a 2,400 quote. Confirm that your modal displays the expected amount and currency before submitting. Stripe Elements handles the card field in the inspected code; never add ordinary form fields to collect card details.

On your separate test site, use Stripe’s official test payment details only after confirming the account is in its test environment. Opening the modal is a UI check, not a successful payment. No payment was submitted for this article.

For the inspected card-payment path, the server retrieves the PaymentIntent and requires status succeeded before marking the corresponding plugin log paid with payment method Stripe. A failed verification returns a payment error. This is a code observation for 10.6.4, not proof of an executed payment or a webhook configuration.

For your test, inspect the Stripe test payment and the matching plugin order record. Compare amount, currency and reference, then check the intended confirmation message and notifications. A redirect, email or amount on screen is insufficient by itself.

If Stripe rejects the request, first check that both keys belong to the same account and test environment, that Stripe payment is enabled for this form and that the currency and payable amount are valid. Never paste a secret into a support screenshot.

If the amount is wrong, check item prices, optional selections and Amount to pay before retrying. If Stripe shows succeeded but the plugin remains unpaid, compare the PaymentIntent reference with the plugin record and inspect the verification error. Do not declare payment confirmed from the thank-you page.