Site Header

<!-- COCONSTRUCT LEADS INTAKE FORM -->

<!-- Do not modify the code below. This form will automatically inherit the styling of your website. -->

<!-- CSS - This provides styling for the layout of the fields, validation and the confirmation message -->

<link rel="stylesheet" type="text/css" href="https://coconstruct.com/app/public/LeadIntake/LeadIntakeForm.css?409153464">

<div>

<div id="divCoCoForm">

<div class="coco-form-wrapper">

<!-- NAME FIELDS -->

<div class="cocon-row">

<div><label class="coco-label">Name</label></div>

<div class="cocon-name-inputs">

<input id="txtCoCoFirstName" name="txtFirstName" type="text" class="coco-text-input" placeholder="First Name">

<input id="txtCoCoLastName" name="txtLastName" type="text" class="coco-text-input" placeholder="Last Name">

</div>

<div id="divNameErrorBanner" class="coco-error-banner" style="display: none"><div>Please enter your name</div></div>

</div>

<!-- EMAIL FIELD -->

<div class="cocon-row">

<div><label class="coco-label">Email</label></div>

<div><input id="txtCoCoEmail" type="text" class="coco-text-input"></div>

<div id="divEmailErrorBanner" class="coco-error-banner" style="display: none"><div id="spnEmailError"></div></div>

</div>

<!-- PHONE FIELD -->

<div class="cocon-row">

<div><label class="coco-label">Phone</label></div>

<div>

<input type="text" id="txtCoCoPhone" class="coco-text-input">

</div>

</div>

<!-- MESSAGE FIELD -->

<div class="cocon-row">

<div><label class="coco-label">Message</label></div>

<div>

<textarea id="txtCoCoMessage" type="text" class="coco-text-input" maxlength="1000"></textarea>

</div>

</div>

<!-- This input is used to prevent spam, however it is not visible in the form. Do not remove it. -->

<div class="cocon-row">

<input id="txtHPData" type="text" class="coco-h-p" autocomplete="off" />

</div>

<!-- SUBMIT BUTTON -->

<div class="cocon-row">

<input type="button" id="btnLeadIntakeSubmit" class="cocon-button" value="Submit">

<div id="divGenericErrorBanner" class="coco-error-banner" style="display: none"><span>This form can't be submitted. Try again later.</span></div>

</div>

</div>

</div>

<!-- CONFIRMATION MESSAGE -->

<div id="divCoCoConfirmation" style="display:none">

<div class="coco-confirmation-icon">

<svg width="132" height="132" xmlns="http://www.w3.org/2000/svg">

<path d="M66 132A66 66 0 1 1 66 0a66 66 0 0 1 0 132zm0-2A64 64 0 1 0 66 2a64 64 0 0 0 0 128zm-9.9-45.5l39-38.9 1.3 1.5-40.3 40.3-19.5-19.6 1.4-1.4L56 84.5z" fill="currentColor" fill-rule="nonzero" />

</svg>

</div>

<span>Your message has been sent.</span>

</div>

</div>

<!-- JAVASCRIPT - This performs the validation and processes the submission -->

<script type="text/javascript" src="https://coconstruct.com/app/api/LeadsIntakeForm/GetLeadsIntakeFormSubmissionJs?AuthKey=ZkhY0jMzK2WXARK03VSJj3Dnc4kJ%2bT0Y1JHz4Rpea1g%3d">

</script>

Padding – Control the amount of space on the top, bottom, left, & right of the header area.

Site Title Font – Control the font options for the site title.

Site Title Color – Set the site title font color.

Site Title Container Width – Set the width of the site title.

Logo Width – Set the width of the logo.

Cart Button Background Color – Set the background color of the view cart button.

Cart Button Font Color – Set the font color of the vew cart button.

Transparent Header – Set the header background color to transparent whenever it would be over an image.

Site Navigation

Link Font – Control the font options for the main navigation links.

Link Color – Set the color of the main navigation links.

Link Active Color – Set the color for the active page in the main navigation

Always Use Overlay Nav – Always use the overlay style navigation.

Index Scroll Nav – Turn the on-page navigation for a homepage Index collection on or off.

Page Banner

Overlay Color – Set the color & opacity of the color over the banner image.

Padding – Control the top & bottom padding in the banner area.

Page Title Font – Control the font options for the page title.

Title Font Color – Set the color for the page title.

Page Description Font – Control the font options for the page description.

Description Font Color – Set the color for the page description.

Main Content

Background Color – Set the background color for the main content area.

Text Font – Control the font options for the body font.

Text Color – Set the color for the body font.

Link Color – Set the color of links in the main content area.

Meta Font – Control the font options for the meta info font.

Meta Color – Set the color for the meta info font.

Heading 1/2/3 Font – Control the font options for the 3 levels of headings. 

Heading 1/2/3 Color –  Set the colors for the 3 levels of headings.

Quote Font – Control the font options for the quote block.

Quote Color – Set the color for the text in the quote block.

Index

Alternating Background Color – Set the alternate background color for sections in an index collection.

Large/Medium/Small Button Color – Set the background color for the 3 sizes of buttons when they're over an image on an index collection.

Large/Medium/Small Button Text Color – Set the text color for the 3 sizes of buttons when they're over an image on and index collection.

Index Overlay

Color – Set the color and opacity of the overlay color on index collections.

Padding – Control the top & bottom padding on overlay sections in index collections.

Text Color – Set the text color on overlays in index collections.

Link Color – Set the link color on overlays in index collections.

Heading 1/2/3 Size – Set the font size for the 3 levels of headings on overlays in index collections.

Heading 1/2/3 Color – Set the colors for the 3 levels of headings on overlays in index collections.

Quote Size – Set the size of quote block text on overlays in index collections.

Quote Color – Set the text color for quote blocks on overlays in index collections.

Index Gallery

Design – Choose Grid or Slideshow for index galleries.

Grid Aspect Ratio – Choose the aspect ratio of the thumbnails in grid style index galleries.

Grid Max Columns – Set the max number of columns in grid style index galleries.

Slideshow Aspect Ratio – Set the aspect ratio of the images in slideshow style index galleries.

Slideshow Transition – Set the transition between images in slideshow style index galleries.

Gallery Overlay Color – Set the color & opacity of the overlay on index galleries.

Gallery Title Font – Control the font options for the image title.

Gallery Title Color – Set the color for the image title.

Gallery Description Font – Control the font options for the image description text.

Gallery Description Color – Set the color for the image description text.

Gallery Controls – Choose the style of controls for the index galleries.

Gallery Controls Color – Set the color for the controls on index galleries.

Gallery Overlay Toggle – Enable/disable the toggle for the overlay color and text on images on index galleries.

Blog

Meta Priority – Choose what meta info has priority on blog posts.

Hide Entry Author – Hide the author's name on blog posts.

Hide List Entry Footer – Hide the share icons, categories, tags, & comments link in the blog list view.

Summary Block

Summary Block styles unique to this template

Title Font – Control the font options for the summary block item titles.

Title Color – Set the color for the summary block item titles.

Overlay Title Color – Set the color for summary block item titles that appear over images.

Pre Footer

Content – Choose what to display in the pre footer area.

Background Color – Set the background color for the pre footer area.

Heading Color – Set the color for the headings in the pre footer area.

Text Color – Set the color for the text in the pre footer area.

Footer

Background Color – Set the background color of the footer area.

Heading Color – Set the color for headings in the footer area.

Text Color – Set the color for text in the footer area.

Text Size – Set the size of the text in the footer area, as a percentage of the regular font size.

Nav Font – Control the font options for the secondary navigation.

Nav Color – Set the color for links in the secondary navigation.

Nav Active Color – Set the active link color in the secondary navigation.

Hide Site Info – Hide the site info/address in the footer.

Site Info Font – Control the font options for the site info/address in the footer.

Site Info Color – Set the color for the site info/address in the footer.

Products

Product styles unique to this template

Hide Product Category Nav – Hide the product category navigation.

Category Nav Title Font – Control the font options for title of the product category navigation.

Category Nav Title Color – Set the color for title of the product category navigation.

Category Nav Link Font – Control the font options for the product category navigation.

Category Nav Link Color – Set the color of the links in the product category navigation.

Category Nav Link (Active) – Set the color of the active category.