# Online Form iFrame

If you have a website not hosted by RescueGroups.org, you can build an online form into your website. Your RescueGroups.org **Website Service** includes the **Online Forms** service.


:::success
**Where do I find it?**

You can get the iframe HTML by going to **Features > Online Forms.**

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/72c93395-348b-41d2-89ec-7d451a6c3673/online%20forms.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=2eb58c58df8d61747d792a02b99973d578a76d604804494c6ee266089632fbdd&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =215.5x217.5")  

**Click the name of a form**, and then click the **Get iFrame HTML** button.

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/1ba0da7f-ecf3-4272-b7d1-6b49205fa6d4/get-iframe-html.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=d5c064f0771f34ea12e3aa13ef94c07ad0ba007f440acde9c4628bbe2eb6d4ca&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =105x57")

:::


:::tip
The **Online Forms iFrame** is designed for use on your non-RescueGroups.org website only. You may have already had a website, or you may be allowed to post your adoptable animals on a third-party site. The **Website Service** includes the **Online Forms** service built-in.

:::


With the online forms iframe, you can take your forms and create HTML code so that you can post them on any website. The instructions below will walk you through the steps.

# How to generate the iframe Code for your form


1. Click the name of your form. In this example, we will use *Adoption Application*.  
   ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/71778bde-c216-4133-8739-1da51358a13a/form-name.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=9fc1ec15184ecef693b68b70859dcd191e816232b01527a10c1e3c8cd3763624&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =355x263")
2. Click **Get iFrame HTML**.  
   ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/4e9ab39f-1592-49a8-82d4-984381dea3e9/get-iframe-html.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=3d1e61e58ca8134ffc15abddb6a2aae6bcc51f6506ea634610eab718da241088&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =105x57")
3. Click **Create New Code**. You can add any custom CSS for your form now, or return to this later.  
     
   ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/ff6a705b-41d7-47ff-a5c2-7b59fdb5188d/form-new-code.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=d711c86143b96f271c093812211b739634139f941451fbb07f7ccbdbeec4504e&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =442x129")
4. Click **Get iFrame**.   
   ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/e50c7e9e-17b9-4385-a4a4-f34da7fa1f6b/form-css-get-iframe.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=8a42c4c8a55f36ed88d92df1984528d1ba2bdc043013f9744f6d93451c699a1f&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =935x256")
5. Copy and paste the HTML code from the text box into the web page on your website where you would like the online form to appear.  
   ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/97bb69a2-54c9-495b-982b-9f77b41f2b4a/form-copy-code.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=8c29b5b17dbae55f23d1688a9f087cb7a0574a2d16a83cc4b5346bf867761d82&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =941x396")


:::info
You can provide custom styles (CSS) to change the way the online form appears to the visitor.

:::

# Customize the iframe cascading style sheet (CSS)

You can add your own CSS code to the iframe style sheet to add or overwrite styles on the Online Form page.


1. Click the name of the **Online Form**.
2. Click **Get iFrame HTML**.
3. Click **Edit** next to the existing iframe code if you are updating an existing iframe code

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/1fa7c629-1358-4b6e-ac8d-38f9288e8621/form-edit-get-html.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=a4f276eb9aa79bce9c49b31ea40c39000739bf56f0afbcf9a6051e0b5fc4a704&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =444x219")

**OR**


1. Click **Create New Code** to create a new iframe code.
2. Enter your custom CSS in the **Custom CSS** box
3. Click **Get iFrame**.

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/eb54bac8-ac70-42ac-bb50-d3639b8764e3/form-new-code.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=69d230bea217b4e704f7fe582c3c1c4f16dd21f4080bc4d493e9e38a437a1bae&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =442x129")