Create a professional looking checkout page within your pre-existing website with just a few clicks. If you already have a website that clients are visiting, sending them to an outside page to purchase form you can be an annoying extra step that’s costing you sales. Thankfully, with Google Form and Payable, there’s a simple option to host a checkout page on your own pre-existing website without a costly subscription or a new software to master.
First, create your Google Form and make your Form Payable using the Payable Add-On.
We suggest taking some time to make your Form match your website style in terms of font, color selection and header image, which you can change by clicking on the palette icon int he top right of your Form. (Learn more about customizing your Form here.)
To get your embed code, click the SEND button in your Google Form. Then, Navigate to the < > section. Choose your size (you can always edit this later) and copy the embed code.
Next, on your website (hosted by Wix, WordPress, or any other website provider), create a page for your product or service. This is where you can add things like explanations for pricing, image galleries, and any extra information that a customer or client might want.
Now, embed your HTML code. This may involve selection “HTML code” as your block option in the newer versions of WordPress, or navigating to the Text/HTML view of your post in older versions of WordPress and pasting it in there. Wix also has a button to insert a snippet of code.
Make sure you preview your page before publishing it, since you want to make sure that the Form embedded properly, and that it’s the right size for your site. We recommend making the height tall enough that the entire Form can be viewed without an additional scroll bar on the page, and suggest trying to make it as full-width as your page will allow. This may take some trial and error, but it’s easy to change by just looking at the embed code, which will include width=”1000″ height=”2310″. You can edit directly in the embed code to change the width and height rather than toggling back to the Form itself and regenerating the code.