Create a purchase form in Carrd

Add Foxy Code Snippet

To display the sidecart when a customer adds a product to cart and to store customer sessions, Foxy's code snippet must be added to a hidden embed element in your Carrd website.

1. 1

   In the Foxy dashboard, go to the Sample Code page.

2. 2

   On the Sample Code page, copy the snippet of code from Step 1.

3. 3

   In Carrd, click on the "Add an element" icon.

4. 4

   From the elements menu, click on the "Embed" option.

5. 5

   In the Embed panel, set the "Style" to "Hidden".

6. 6

   Paste the snippet of code you just copied into the "Code" field.

7. 7

   Click on the "Done" button to save your changes.

Create Form

1. 1

   In Carrd, click on the "Add an element" icon.

2. 2

   From the elements menu, click on the "Form" option to add a new form.

3. 3

   In the Form panel, change the "Type" to "Custom".

4. 4

   Change "Send Email" to "Send to URL".

5. 5

   Go to the Foxy Sample Code page to get your form action url.

6. 6

   From the Step 2 section, copy the form example action value.

7. 7

   In Carrd, paste the url you just copied into the "URL" field.

8. 8

   Change the "Method" to "Post".

9. 9

   Scroll up and click on the "Fields" tab. (This is where you can add your form's visible and hidden fields. Your purchase form must contain at minimum the product name and price .)

10. 10

    Add product parameters that aren't customizable by the customer to the "Hidden Values" section. (ex: name and price)

11. 11

    Create visible fields for product parameters that are customizable by the customer.

12. 12

    Scroll up and click on the "Button" tab. (This is where you can change your form button's label.)

13. 13

    Modify your button label as desired.

14. 14

    Click on the "Done" button to save your changes.

15. 15

    Test your purchase form to ensure it works as expected.