# How to Add Contact Form to Your Page ?

<span style="color: rgb(0, 0, 0);">**Through this document , you will uncover the 'Contact Form' feature properties in site editor page through these key elements:  
  
<span style="color: rgb(0, 0, 0);">[1. Adding a Contact Form](https://kb.salerise.com/link/60#bkmrk-adding-a-slideshow)</span>  
<span style="color: rgb(0, 0, 0);">[2. Feature Settings Window](https://kb.salerise.com/link/60#bkmrk-feature-settings)</span>  
<span style="color: rgb(0, 0, 0);">[3. Style Settings Window](https://kb.salerise.com/link/60#bkmrk-style-settings)</span>**</span>

### <span style="color: rgb(0, 0, 0);"><span style="color: rgb(186, 55, 42);">**Adding a Contact Form**</span>  
</span>

- <span style="color: rgb(0, 0, 0);">Drag the contact form icon from the available features</span>

[![image.png](https://kb.salerise.com/uploads/images/gallery/2023-12/scaled-1680-/HEcimage.png)](https://kb.salerise.com/uploads/images/gallery/2023-12/HEcimage.png)

- <span style="color: rgb(0, 0, 0);">Drop the contact form icon into the desired location on your website page</span>

[![image.png](https://kb.salerise.com/uploads/images/gallery/2023-12/scaled-1680-/9XJimage.png)](https://kb.salerise.com/uploads/images/gallery/2023-12/9XJimage.png)

### <span style="color: rgb(186, 55, 42);">**Feature Settings**</span>

<span style="color: rgb(0, 0, 0);">Upon dropping the subscribe icon, a settings window will appear, offering three main features:</span>

- <span style="color: rgb(0, 0, 0);">**Records**</span>
    
    
    - <span style="color: rgb(0, 0, 0);">You will be able to see entries from dashboard which allows you to manage contact form conveniently.</span>
- <span style="color: rgb(0, 0, 0);">**Settings**</span>
    
    
    - <span style="color: rgb(0, 0, 0);">Determine how your contact form is visible on devices (Mobile , Tablet , Desktop , Large desktop).</span>
- <span style="color: rgb(0, 0, 0);">**Animations**</span>  
    
    - <span style="color: rgb(0, 0, 0);">Add animation to your contact form from a long list of animation options.</span>
    - <span class="ui-provider ef ayj ayk ayl aym ayn ayo ayp ayq ayr ays ayt ayu ayv ayw ayx ayy ayz aza azb azc azd aze azf azg azh azi azj azk azl azm azn azo azp azq" dir="ltr" style="color: rgb(0, 0, 0);">Enhance your animated <span style="color: rgb(0, 0, 0);">contact form</span> by incorporating timing in seconds.</span>

<span class="ui-provider ef ayj ayk ayl aym ayn ayo ayp ayq ayr ays ayt ayu ayv ayw ayx ayy ayz aza azb azc azd aze azf azg azh azi azj azk azl azm azn azo azp azq" dir="ltr" style="color: rgb(0, 0, 0);"><iframe allowfullscreen="allowfullscreen" height="435" src="https://www.youtube.com/embed/C7GAS1tapWI?feature=shared" width="776"></iframe>

</span>

### <span style="color: rgb(186, 55, 42);">**Style Settings**</span>

<span style="color: rgb(0, 0, 0);">**Design Features**</span>

- <span style="color: rgb(0, 0, 0);">Access the "Design" feature to customize your contact form appearance. Within this feature, you can determine the following properties:</span>
    
    
    - <span style="color: rgb(0, 0, 0);">**Margin**: Set the spacing around your contact form to control its placement on the page.</span>
    - <span style="color: rgb(0, 0, 0);">**Border**: Define a border for your contact form to add a distinct visual element.</span>
    - <span style="color: rgb(0, 0, 0);">**Color**: Choose the color that best complements your website's theme or design.</span>
    - <span style="color: rgb(0, 0, 0);">**Style**: Apply different styles to your contact form, enhancing its visual appeal.</span>
    - <span style="color: rgb(0, 0, 0);">**Gradient**: Add gradient effects to your contact form for a more dynamic and modern look.</span>

<span style="color: rgb(0, 0, 0);">**Background Features**</span>

- <span style="color: rgb(0, 0, 0);">Navigate to the "Background" feature to enhance the backdrop of your contact form.</span>  
      
    
    - <span style="color: rgb(0, 0, 0);">**Upload Images**: Insert images as a background for your contact form, providing visual interest.</span>
    - <span style="color: rgb(0, 0, 0);">**Sample Images**: Explore pre-loaded image samples for quick and easy background selection.</span>
    - <span style="color: rgb(0, 0, 0);">**Background Styling**: Customize the contact form background further with options like:</span>
        
        <span style="color: rgb(0, 0, 0);">- Background Repeat: Control how the background image repeats.</span>  
        <span style="color: rgb(0, 0, 0);">- Background Fill: Adjust how the background fills the space around the contact form.</span>  
        <span style="color: rgb(0, 0, 0);">- Background Position: Define the positioning of the background image for optimal display.</span>

<span style="color: rgb(0, 0, 0);">**Style Customization**</span>

- <span style="color: rgb(0, 0, 0);">Within the "Style" section, further refine your contact form presentation by adding classes from a dropdown list with a plethora of options.</span>
- <span style="color: rgb(0, 0, 0);">Determine how your contact form are visible on devices (Mobile , Tablet , Desktop , Large desktop).</span>

<span style="color: rgb(0, 0, 0);"><iframe allowfullscreen="allowfullscreen" height="435" src="https://www.youtube.com/embed/kYpFRWujbdg?feature=shared" width="776"></iframe>

</span>