HubSpot CMS

Form 1 Module

Form 1 module allows you to implement an attractive header. With options such as background image, text options, headline and form options. It complements the looks of a header with adding the functionality of a form.

Created by: il-hubspot

Tags: Header / Heros, Forms

Unverified
?

After receiving a minimum of 25 recommendations, an entry earns the "Community Approved" badge.

Please keep in mind, all entries are community created and may not be fully supported by HubSpot.

0 Recommendations

View on:

GitHub

HTML + HUBL


{{ require_css("//cdn2.hubspot.net/hubfs/346178/designmodo/ui-kit/ui-kit-header/css/ui-kit-styles.css") }}
<!-- header-14 -->
<section class="header-14-sub header-14-sub-v2" style="background-color: {{ module.background_color }};">
	<div class="background" style="background-image: url('{{ module.background_image.src }}'); opacity: {{ module.background_opacity }};">&nbsp;</div>
	<div class="container">
		<div class="row">
			<div class="col-sm-8 col-sm-offset-2">
				<div class="header-14">
					<span class="{{ module.icon }}" style="color: {{ module.icon_color }};"></span>
					<div style="color: {{ module.preheader_color }};">{{ module.preheader }}</div>
				</div>
				<div class="hero-unit">
                    <h1 style="border-color: {{ module.header_color }}; color: {{ module.header_color }};">{{ module.header }}</h1>
				</div>
				{{ module.text }}
				<div class="row">
					<div class="subscribe-form col-sm-8 col-sm-offset-2">
            {% form
              form_key="5222b5b3-ac05-6393-7dda-ee7963aa5df5"
              form_to_use="{{ module.form_field.form_id }}"
              response_response_type="{{ module.form_field.response_type }}"
              response_message="{{ module.form_field.message }}"
              response_redirect_id="{{ module.form_field.redirect_id }}"
              response_redirect_url="{{module.form_field.redirect_url}}"
            %}
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

          
        
CSS
          
            
          
        
JS
          
            
          
        
Have Questions?

Ask technical questions in Slack.

HubSpot Developer Slack

Not a member yet? - join here
READ ME (VIEW IN GITHUB)

HubSpot

Form 1

This form lets you add a fancy basic submission form. This form has background image control, text control, link control, form destination and menu options.

Form 1 module demo can be visited here:

w.inboundlabs.co/form-1-and-content-2

Form 1 module is FREE and is part of the Startup Framework FREE and PAID packages:

https://marketplace.hubspot.com/products/inboundlabs/startup-framework-marketplace

Have Questions?

If you have questions, please email me at github (at) inboundlabs.co


HubSpot

Not developing on HubSpot CMS yet?

We'd love to have you a part of our developer community!

 
0 Recommendations

Other Open Source Projects

Browse all other open source projects

CrankShaft Framework

A modern framework for accelerating build times on the HubSpot CMS. Based on a modified Bootstrap 4 framework.

Lead developers: Jon McLaren

Developer Chrome Extension

Chrome/Chromium extension for HubSpot CMS Developers that adds a developer menu, dark theme and useful shortcuts to commonly used HubSpot query parameters, resources, and tools for making HubSpot Development easier and more enjoyable.

Lead developers: Jon McLaren , William Spiro , Gonzalo Torreras

VS Code HubL Language Extension

This extension enables super fast local development of CMS pages, and is a great compliment to using the new local HubL server. It contains comprehensive HubL tag, function, filter and expression test auto-complete snippets, as well as their documentation.

Lead developers: William Spiro

Not coding on HubSpot CMS yet?

We invite you to explore why thousands of developers LOVE coding with HubSpot!

Contribute
Made with  by community members: InboundLabs.co