Put your forms on your own website

If your business already has a website that United Pet Club doesn’t host (one on Cloudflare Pages, Netlify, GitHub Pages, or a page someone built for you), you can put your United Pet Club forms on it. Visitors fill them in right on your website, and what they send arrives in your Dashboard like everything else.

It is free for every business, on any plan.

Note

If your website is the one you made on United Pet Club (on upc.pet, petme.vip or a domain you connected there), you don’t need this page: add the Contact, Applications and Request a quote blocks in the website editor instead. See Your website.

Where

Website → Forms on your website (/dashboard/site/embed). The first time, the page asks for the address of your website. After that it shows the switch that turns the forms on, your websites, the code to copy, your form key, the look, your own CSS and a live preview.

What you can put on your website

Form	What your visitor does	Where it arrives	Visitor needs an account
Contact	Writes you a message	Messages, as a conversation	No
Request a quote	Says what they need, then confirms their email with a 6-digit code	Commerce → Quotes → Requests, as a Requested quote	No
Booking request	Picks a service and a free time, or asks you to suggest one	Messages, as a booking request you confirm. Nobody pays in the form	No
Your forms	Fills in one of your applications (a puppy application, an adoption application), a waiver, or a contract they sign on their own	Paperwork → Forms → Responses	Yes, a free United Pet Club account

Your forms lists your active forms. A form that carries a contract signed by the visitor alone works too: after sending the form, the visitor signs the agreement in the same place.

Set it up

1. Open Website → Forms on your website. Under Add your forms to a website you run yourself, type your website’s address (for example mybiz.com) and press Set up forms.
2. Under Your websites, add every address your website opens on, with Add website. The forms only appear on these addresses:
   • mybiz.com and www.mybiz.com are two addresses. Add both if your website opens on both.
   • Put *. in front of your own name to cover preview addresses too, like *.mybiz.pages.dev. You can’t use it right in front of a shared address (*.pages.dev, *.github.io, *.netlify.app) or a country ending such as *.co.uk.
   • Websites must use https://. You can type mybiz.com; it is saved as https://mybiz.com. You can list up to 10.
3. Turn on Show the forms on my websites. You see Forms turned on. Turning them on needs the same checks as publishing a website: your identity, your business address and your payout account. If one is missing, the page lists what is left to do. See Verifying your business.
4. Under Copy the code for your website, choose:
   • Form: Contact, Request a quote, Booking request, or one of Your forms.
   • How it appears: On the page, or As a button that opens it. For a button, type its Button text (for example Contact us).
   • Language: Your profile’s language, or another one.
   • Hide the form’s heading, if your page already has its own.
5. Press Copy code. You see Code copied.
6. Paste the code into your website where the form should appear. If someone else builds your website, send it to them, with the link How to add forms to your website from the page. It takes them to the developer guide.
7. Open your website and check that the form is there.

The code is two lines. The first one is the form. The second one, the line that starts with <script, is needed only once per page, however many forms the page has.

While you build your website

Turn on Let my computer show the forms while I build my site to see the forms on your own computer (localhost) before your website is online. Turn it off when your website is live.

From one of your forms

You can also start from the form itself. In a form’s Embed on a website dialog, Put the whole form on your website opens Forms on your website with that form already picked. See Forms.

What your visitors see

• The form, in your colours, right on your page. It fits its space and works on phones.
• Under the form, a line that says {your business} receives what you send here. United Pet Club delivers it and uses your details only to pass it on., and a small Powered by United Pet Club mark. Both always stay visible.
• After sending, a short confirmation, such as Message sent or Request sent.

A quick spam check runs in the background. Most visitors never notice it; a few are asked to tick a box.

Quote requests. We email the visitor a 6-digit code to confirm their address before the request is sent. One email address can send you 3 quote requests a day.

Booking requests. The visitor picks a service, then a free time from your schedule (two weeks at a time), or No preference: suggest a time. They give their name, an email or phone, and optionally their pet’s name and a note. You confirm the time with them.

Your forms. The visitor needs a free United Pet Club account:

1. They press Sign in or create an account in the form. United Pet Club opens in a window of its own (a new tab on a phone), so their password is never typed on your website.
2. They see Continue to {your business} and press Continue.
3. The window closes and the form shows Signed in as {their name}, with Sign out.

A form that asks for files or for one of the visitor’s pets opens on United Pet Club in a new tab instead, with Continue on United Pet Club.

Where things arrive

• Messages and booking requests are conversations in Messages. Each one says it came from your website: Sent from https://… and the page’s address. Reply as you would to any message.
• Quote requests are on the Requests tab of Commerce → Quotes, with the status Requested. See Quotes.
• Answers to your forms are in Paperwork → Forms → Responses, from the visitor’s United Pet Club profile.

Messages from your own website always reach you, even if you turned off Let visitors who aren’t signed in message this profile in Settings → Privacy. That switch is about your page on United Pet Club; your website is your own. See Messages from visitors.

Change the look

Under Look, set the colours and shape of every form:

Setting	Choices
Button colour	Any colour
Corner rounding	From square to round
Font	System, Serif, Rounded, Monospace
Colour scheme	Match the visitor’s device, Light, Dark

Press Save look. You see Look saved. The person who builds your website can change these for one form in the code.

Your own CSS

If you or your web designer know CSS, you can restyle the forms under Your own CSS. Class names you can style lists the names to use. Press Save CSS; you see CSS saved, and the change shows on your website and in the preview within about a minute.

Some CSS isn’t allowed, because it could load things from other websites or break the form. If your CSS has any, it is not saved and you see Not saved. with the line and the reason, for example Line 3: …. Fix that line and save again. The rules:

• No @import, @font-face, @namespace or @charset.
• No pictures or files from other addresses: url() only with a data:image/… value.
• No <, and nothing left open (a {, a quote or a comment).
• At most 20,000 characters.

Outside fonts and images never load in a form, so use one of the four fonts above. Your CSS can’t hide the privacy line or the Powered by United Pet Club mark.

Preview

Preview shows the real form exactly as visitors see it, inside a browser bar with your first website’s address. Switch between Desktop and Phone. The preview works even while the forms are off.

Your form key

Your form key starts with upc_emb_. It is in the code you paste and is safe to show on your website: the forms only appear on the websites you listed, whoever copies it.

Replace key gives you a new key. Use it if you want every copy of the old code to stop at once, for example when you stop working with a web designer.

Caution

After Replace key, forms using the old key stop showing. You see Replace your form key? first: Forms using the old key stop showing straight away. You’ll need to paste the new code on every page that has a form. Press Replace key to confirm, then copy the new code and paste it everywhere.

Turn the forms off

Turn off Show the forms on my websites. You see Forms turned off, and the forms stop showing on your websites within about a minute. Your websites, the look and your CSS are kept; turn the switch on again to bring the forms back.

If you’re a designer on the business

A designer can change Look and Your own CSS, copy the code and use the preview. The switch, Your websites and Replace key aren’t shown. The note on the page says: You can change the look. The business manages its websites, the key and whether the forms are on. See Working as a designer.

Questions

Do I need a server or a special website builder? No. The code works on any website you can paste HTML into, including static websites with no server.

Does it cost anything? No. It is free for every business, on any plan.

Do my visitors need a United Pet Club account? Not for the contact form, quote requests or booking requests. Your own forms (applications, waivers, contracts) need a free account, which they can create from the form.

Can someone copy my code onto their website? The forms only show on the websites you listed, so a copy elsewhere shows nothing. To be sure, use Replace key.

The form shows on my website but not on a preview address. Preview addresses are different websites. Add them with *. in front of your own name, like *.mybiz.pages.dev.

A visitor says the sign-in window didn’t open. Their browser blocked it. The form tells them: Your browser blocked the sign-in window. Allow pop-ups for this site, then try again.

Where do I see what was sent from my website? In Messages (marked Sent from https://…), Commerce → Quotes → Requests, and Paperwork → Forms → Responses.