Contact Panel

The Contact Panel provides your visitors quick and easy access to a contact form, and a google map to show your business or location. The Google Map can be replaced with an image, or any HTML content.

Tips

  • Deleting a Library Component from your page Learn More

Instructions

Contact Panel

In this tutorial, we’ll demonstrate how to update the Contact Panel Form and Google Map. We’ll also demonstrate how to remove the Contact Panel, replace the Google map with an image or regular HTML. You can also replace the form with HTML code or your choosing.

NEW! Quick Edits!

Something new we’ve added to our Bootstrap themed templates is the ‘Design View’ Quick Edits option. As you’re working in your page, you’ll now see a Component ‘Quick Edit’ placeholder image. To quickly open the Accordion Panel Library page for editing, just right click on the placeholder image, and select Open file:/// .. your Library page will open, and you can quickly edit the content.

Video Demonstration: Contact panel quick edit

http://youtu.be/z77Al5kAAXg

  1. First, locate the component placeholder in your page.
  2. Right click on the placeholder and select ‘Open file:///…’
  3. You components Library page will open in a new window, ready for editing.

Remove the Contact Panel

The Contact Panel is a Global Library Component included in all pages by default. You can remove the Contact Panel in one of three ways.

  1. through CSS ( good for temporarily removing )
  2. from specific pages
  3. from all pages

To remove via CSS:

Video Demonstration: Contact panel remove via css

http://youtu.be/wo4wK3YoLiw

  1. Expand the Library / component / contact-panel / css (folder).
  2. Double click on the ‘contact-panel.css’ stylesheet to open it.
  3. copy the following style:
  4. #topcontact-panel{ visibility: hidden; display: none;}
  5. into the top of your ‘contact-panel.css’ stylesheet.

To remove from Specific pages: Video Demonstration: Contact panel remove from a single page http://youtu.be/HLqOAoe_IHs

  1. open the page you want to remove the ‘contact-panel’ from
  2. Click on the visible part of the component in the page.
  3. Click on the [ <div.contact-panel> ] tag, on the Quick Tag Selector toolbar to make sure ‘contact-panel’ component is selected.
  4. press Delete on the keyboard

For details on removing Library components from your page, check this tutorial out. To remove from all pages: Video Demonstration: Contact panel remove all pages http://youtu.be/f1gswaWFo1U

  1. Expand the Library / component / contact-panel (folder).
  2. Double click on the ‘contact-panel.htm’ page to open it.
  3. Switch to Code view.
  4. Scroll down to the <form method=”post” role=”form” class=”form-horizontal”> section.
  5. Right click on the <form.. > tag, then click on the ‘Select Tag’.
  6. You’ll notice the code for the <form…> tag highlighted in ‘green’.
  7. Press ‘Delete’ on the keyboard, to remove the contact form panel from the page.

For details on removing Library components globally, check this tutorial out.

Update the Form

Contact form with Re-Captcha

Video Walkthrough:

Step1: open the Library / components / contact-panel / css / contact-panel.css

Step2: ADD the following style into the very top of the contact-panel.css

.ss-recaptcha {
clear: both;
}

 

Step 3: locate the following style:

div.contact-google iframe {
border: 0;
margin: 0px;
padding: 0px;
width: 100%;
height: 305px;
}

and increaze the by 88 pixels, in this example we have a height of  ( height: 305px; ) we’re going to change this to

div.contact-google iframe {
border: 0;
margin: 0px;
padding: 0px;
width: 100%;
height: 393px;
}

 

Step 4: locate the following 2 styles and change the heights to auto
Step3: You’ll need to change the height properties of the following 2styles from a pixel height to auto:

.contact-google {
/* Size and position */

height: 365px;

}
.form-2 {
/* Size and position */

height: 365px;

}

change both height properties to

.contact-google {
/* Size and position */

height: auto;

}
.form-2 {
/* Size and position */

height: auto;

}

 

Video Demonstration: Contact panel update form http://youtu.be/KVZdmxnBvX8 The contact form is automatically updated for you when your package is assembled. The email address used for your member account, is embedded and encrypted into the contact form so it’s all set to go. If you want to change the email address the form information is sent to you will need to create a new form tag for your component. The only part of the contact form that you ‘need’ to update is the phone number. The form itself, is updated with your encrypted email address when the package was downloaded. If you want to change the email address to which the contact form information is sent, read on. By default, the email address used for your i3dthemes account, will be used for the contact form as well. Only if you need to send the contact form information to a different email address will this need to be updated. To update the Phone Number:

  1. Expand the Library / component / contact-panel  (folder).
  2. Double click on the ‘contact-panel.htm’ page to open it
  3. Switch to ‘Design’ view.
  4. Right click on the ( 250-744-7357 ) phone number, and select ‘Hyperlink Properties’.
  5. Change the ‘display’ number in the ‘Text to display:’ field .. this is the number your visitors see in the contact form.
  6. Change the phone number in the ‘Address’ field, to your phone number, and leave out any spaces, hypens or periods.. just a single number including your area code.
  7. Make sure to keep the ‘tel://’ portion before the number.
  8. This is the telephone link field used by mobile devices, and computer to computer communications software ( skype? ).

Updating the contact form email address. Check out our tutorial on updating your contact form, if you need to do this for the contact panel, you’ll also need to do it for the ‘contact.htm’ web page if that page was included in your template package.

Update Google Map

Video Demonstration: Contact panel update Google map http://youtu.be/4caDW_FCwyo UPDATED VIDEO http://youtu.be/Rln1XKIj_3c You can assign a new location for the Google map, a specific address, city, state, province or country. To update the Google Map location:

  1. Expand the Library / component / contact-panel  (folder).
  2. Double click on the ‘google-map.htm’ page to open it.
  3. Switch to ‘Code’ view.
  4. You’ll see the ‘iframe’ loading in the Google map location.
  5. Check this tutorial out on how to create a new Google Map location, then return to your ‘google-map.htm’ page, and paste the new iframe here:
  6. here’s an updated google map video for the latest Map updates:
  7. http://youtu.be/Rln1XKIj_3c

Replace Google Map / Contact Form with HTML or Image

Video Demonstration: Contact panel replace with html content http://youtu.be/ie1zRtN2HKM Both the Google Map and Contact Form can be replaced with regular HTML. Here’s a video demonstrating how to do this.

Contact Panel

In this tutorial, we’ll demonstrate how to update the Contact Panel Form and Google Map. We’ll also demonstrate how to remove the Contact Panel, replace the Google map with an image or regular HTML. You can also replace the form with HTML code or your choosing.

NEW! Quick Edits!

Something new we’ve added to our Bootstrap themed templates is the ‘Design View’ Quick Edits option. As you’re working in your page, you’ll now see a Component ‘Quick Edit’ placeholder image. To quickly open the Accordion Panel Library page for editing, press and hold the ( Alt ) key on your keyboard, while you click on the ‘pladeholder’ image, then click on ( contact-panel.lbi ) .. your Library page will open, and you can quickly edit the content. Video Demonstration: Contact panel quick edit http://youtu.be/45T6ow-HmRQ

Remove the Contact Panel

The Contact Panel is a Global Library Component included in all pages by default. You can remove the Contact Panel in one of three ways.

  1. through CSS ( good for temporarily removing )
  2. from specific pages
  3. from all pages

To remove via CSS: Video Demonstration: Contact panel remove via css http://youtu.be/Yzk3DtdFTqw

  1. Expand the Library / component / contact-panel / css (folder).
  2. Double click on the ‘contact-panel.css’ stylesheet to open it.
  3. copy the following style:
  4. #topcontact-panel{ visibility: hidden; display: none;}
  5. into the top of your ‘contact-panel.css’ stylesheet.

To remove from Specific pages: Video Demonstration: Contact panel remove from single page and site wide http://youtu.be/GY1savcu16M

  1. Open the page you want to remove the ‘contact-panel’ from.
  2. Switch to ‘Code’ view.
  3. Scroll down the page and locate the <div class=”contact-panel”>.
  4. Click on the word ‘contact’.
  5. Then click on the [ <div.contact-panel> ] link in the Quick Tag Selector toolbar.
  6. press Delete on the keyboard

For details on removing Library components from your page, check this tutorial out. To remove from all pages: Video Demonstration: Contact panel remove from single page and site wide http://youtu.be/GY1savcu16M

  1. Expand the Library / component / contact-panel-wrapper  (folder).
  2. Double click on the ‘contact-panel-wrapper.lbi’ page to open it.
  3. Press CTRL+A to select all, then press the Delete key on your keyboard.
  4. Switch to ‘Code’ view, and remove the link to the stylesheet ( if there is a link ), as well as any left over <div> containers.

For details on removing Library components globally, check this tutorial out.

Update the Form

Contact form with Re-Captcha

Video Walkthrough:

Step1: open the Library / components / contact-panel / css / contact-panel.css

Step2: ADD the following style into the very top of the contact-panel.css

.ss-recaptcha {
clear: both;
}

 

Step 3: locate the following style:

div.contact-google iframe {
border: 0;
margin: 0px;
padding: 0px;
width: 100%;
height: 305px;
}

and increaze the by 88 pixels, in this example we have a height of  ( height: 305px; ) we’re going to change this to

div.contact-google iframe {
border: 0;
margin: 0px;
padding: 0px;
width: 100%;
height: 393px;
}

 

Step 4: locate the following 2 styles and change the heights to auto
Step3: You’ll need to change the height properties of the following 2styles from a pixel height to auto:

.contact-google {
/* Size and position */

height: 365px;

}
.form-2 {
/* Size and position */

height: 365px;

}

change both height properties to

.contact-google {
/* Size and position */

height: auto;

}
.form-2 {
/* Size and position */

height: auto;

}

 

Video Demonstration: Contact panel update form telephone and twitter link http://youtu.be/hS5U7X19jkM The contact form is automatically updated for you when your package is assembled. The email address used for your member account, is embedded and encrypted into the contact form so it’s all set to go. If you want to change the email address the form information is sent to you will need to create a new form tag for your component. The only part of the contact form that you ‘need’ to update is the phone number. The form itself, is updated with your encrypted email address when the package was downloaded. If you want to change the email address to which the contact form information is sent, read on. By default, the email address used for your i3dthemes account, will be used for the contact form as well. Only if you need to send the contact form information to a different email address will this need to be updated. To update the Phone Number:

  1. Expand the Library / component / contact-panel  (folder).
  2. Double click on the ‘contact-form.lbi’ page to open it.
  3. Switch to ‘Design’ view.
  4. Select the ( 250-744-7357 ) phone number, and type in your own phone number, or just delete it.
  5. Make sure your Properties panel is open ( Ctrl+F3 ), and locate the ‘Link’ field, with the [ tel://2507444357 ].
  6. Change the phone number in the ‘Link’ field, to your phone number, and leave out any spaces, hypens or periods.. just a single number including your area code.
  7. Make sure to keep the ‘tel://’ portion before the number.
  8. This is the telephone link field used by mobile devices, and computer to computer communications software ( skype? ).

Updating the contact form email address. Check out our tutorial on updating your contact form, if you need to do this for the contact panel, you’ll also need to do it for the ‘contact.htm’ web page if that page was included in your template package.

Update Google Map

Video Demonstration: Contact panel update Google map http://youtu.be/btj9T7myN_c UPDATED VIDEO http://youtu.be/Rln1XKIj_3c Here’s a quick update video showing the updated Google Map page here’s an updated google map video for the latest Map updates http://youtu.be/Rln1XKIj_3c You can assign a new location for the Google map, a specific address, city, state, province or country. To update the Google Map location:

  1. Expand the Library / component / contact-panel  (folder).
  2. Double click on the ‘google-map.lbi’ page to open it.
  3. Switch to ‘Code’ view.
  4. You’ll see the ‘iframe’ loading in the Google map location.
  5. Check this tutorial out on how to create a new Google Map location, then return to your ‘google-map.lbi’ page, and paste the new iframe here:

Replace Google Map / Contact Form with HTML or Image

Video Demonstration: Contact panel replace with html content http://youtu.be/Ae-PN-qMoDo Both the Google Map and Contact Form can be replaced with regular HTML. Here’s a video demonstrating how to do this.