Content w/Contact Widget

This article will provide details on how to add/edit the Content w/Contact widget on a web page in your Hive.

​

Before we begin, let’s cover a couple of key terms to help you better understand what they’re in reference to as you navigate your way through this article. 

1. Section(s): the total area, or section, for each widget. 
   
   
2. Container(s): blocks that organize and group content together within a section. Think of them like boxes that hold different parts of a webpage, such as text, images, or videos, keeping everything neat and orderly. For example, the Split Content/Image widget has a block designated for text and a block designated for an image/video; these separate blocks are containers, since they contain the content within the section. 

To add this widget to a page, open up the page in your Hive and click +Add Section >> select Content w/Contact >> then use the settings in the left-hand menu to make your edits, which we’ll cover in more detail below. 

CONTENT W/CONTACT

What’s Included/Available: section is split with blocks for content/text and a contact form, option to embed video, option to add header text to top of contact form, option to require phone number, background, tags, connect to drip campaign, and submission redirects.

Common Uses: same as Contact Form but gives you the option to add additional content, such as contact info/address, additional directions/information for lead captures, etc.

How to Edit/Settings

1. Content: this is the main content of the section; to edit, click Edit Content >> add your desired content >> then Set Content.
   
   Add Icon Content: this gives you the option to add icons with content to the section; to edit, click Add Icon Content >> click the magnifying glass from the Icon field and select the desired icon >> then add your text/content to the Text field.
   
   
2. Heading Text: the text added here will be displayed at the top of the contact form
   
   Heading Text BG Color: this allows you to change the text background color at the top of the contact form, which you can do by clicking into the box and select the desired color; if you’re familiar with color hex codes you can also paste those into the Heading Text BG Color setting
   
   Heading Text Color: to change the heading text color, click into the box and select the desired color; if you’re familiar with color hex codes you can also paste those into the Heading Text Color setting.
   
   Heading Use Background: this allows you to keep or remove the Heading Text BG Color; by default, this is set to include a background color for the heading text at the top of the contact form, but you can remove it by selecting No from the dropdown
   
   
3. Include Phone: by default, the form will include a field for a phone number but you can remove this by selecting No from its dropdown menu
   
   Require Phone: option to choose whether a phone number is required or not on the contact form, which you can select from its dropdown
   
   
4. Video Embed URL: gives you the option to add a video to this section, which will be displayed underneath the main content; to edit, paste the embed URL of the video you’d like to add to this section
   
   
   Video Size: use the dropdown to select your desired video size; available options are Small, Med, Large, and Full (please note that Full refers to the entire size of the container designated to the video and not full size of the entire section)
   
   Video Ratio: controls the cinematic display type of the video; the available video ratio options for this widget are: 
1. HD - 16:9: for 1080p definition videos
2. Non HD - 4:3: standard definition
   
   
5. Brand/Logo Image URL: optional setting that allows you to add a brand/logo to the top of the section; click the magnifying glass and select the image you’d like to use, or upload one from your device. You also have the option to select a stock image from the Unsplash Image Library.
   
   
   Brand/Logo Image Position: option to position the logo top left, center, or right of the section
   
   
6. Button BG Color: to change the button background color, click into the box and select the desired color; if you’re familiar with color hex codes you can also paste those into the Button BG Color setting
   
   Button Text Color: to change the button text color, click into the box and select the desired color; if you’re familiar with color hex codes you can also paste those into the Text Color setting
   
   
7. Bottom Text: the text here will be displayed at the bottom of the contact form underneath the Submit button
   
   
8. Use Box Around Form: this setting adds a box  background) around the contact form, which is enabled by default; to remove, click No from the dropdown
   
   
9. Background Image URL: will be displayed behind the content/form of the section; click the magnifying glass and select the image you’d like to use, or upload one from your device. You also have the option to select a stock image from the Unsplash Image Library. 
   
   
10. Background Color: edit the contact form’s background color by clicking into the box >> then select the desired color. If you’re familiar with color hex codes you can also paste those into the Background Color setting.
    
    If you have a background image, you can use the background color setting to overlay a color on top of it; you can also use this setting to make the background more/less transparent.
    
    
    
11. Text Color: to change the text color, click into the box and select the desired color; if you’re familiar with color hex codes you can also paste those into the Text Color setting.
    
    
12. Apply Tags: gives you the option to select which tag(s) will be automatically added to users when they fill out the contact form; click +Add Tag, then select the desired tags; the Quick Add Tag option gives you the ability to create a new tag if needed.
    
    
13. Add to Drip Campaign: gives you the option to select which drip campaign users will automatically be added to when they fill out the contact form; click magnifying glass, then select the desired drip campaign
    
    
14. Redirect URL: gives you the option to select which page/file you’d like to redirect users to once they have filled out the form; click the magnifying glass >> then select the desired page/file, which are broken down into the following sections/tabs: 
    
    
    
1. Content: includes all custom web pages available in your Hive
2. Built In: includes all built-in pages in your Hive, such as member account, class schedule, blog, home page, etc. 
3. Signup: includes all memberships types that have self signup enabled
4. Files: includes all files/images uploaded to your Hive
   
   *Note: if you're redirecting to a web page that is managed outside of your Hive, you'll need to paste its URL in its entirety. 
   
   
15. Once you’ve finished making your edits to the Content w/Contact section, click Set Content >> then Save the page to complete the process.
    

We hope this helps but please feel free to reach out to success@myfithive.com with any additional questions you may have. 

• Related Articles

• Contact Form Widget

  This article will provide details on how to add/edit the Contact Form widget on a web page. Before we begin, let’s cover a couple of key terms to help you better understand what they’re in reference to as you navigate your way through this article. ...

• Form Widget

  This article will provide details on how to add/edit the Form widget on a web page. Before we begin, let’s cover a couple of key terms to help you better understand what they’re in reference to as you navigate your way through this article. ...

• Map Content Widget

  This article will provide details on how to add/edit the Map Content widget on a web page. Before we begin, let’s cover a couple of key terms to help you better understand what they’re in reference to as you navigate your way through this article. ...

• How to Create/Edit Web Pages

  This article will show you how to create/edit web pages in your Hive. To begin, go to Website >> Manage Web Pages >> Add Page. Before we start adding content, let’s go over the page's primary settings in the left hand menu. Name: add the name of the ...

• Content Hero Widget

  This article will provide details on how to add/edit the Content Hero widget on a web page in your Hive. Before we begin, let’s cover a couple of key terms to help you better understand what they’re in reference to as you navigate your way through ...