Saved: 2018-03-13 09:37

Torey Heinz committed Mar 14, 2018

commit 3dad83e106839ce8095d64f4f90336bf968de6c7

Showing 5 changed files with 138 additions and 4 deletions

app/content_types/customer_messages.yml +74 -0

@@	@@ -0,0 +1,74 @@
+	# Human readable name of this type
+	name: Customer messages
+
+	# Lowercase, underscored handle used to access this type
+	slug: customer_messages
+
+	# Explanatory text displayed in the back-office
+	description: A description of the content type for the editors
+
+	# Slug of field used to identify entries by default, such as the title
+	label_field_name: name
+
+	# Valid values: manually, created_at, updated_at, or the slug of any field
+	order_by: manually
+
+	# Valid values: asc (ascending) and desc (descending). Set to asc by default.
+	# order_direction: asc
+
+	# Specify a field slug to group entries by that field in the back-office.
+	# group_by: <your field>
+
+	# Activate public 'create' API (e.g for a contact form)
+	public_submission_enabled: true
+
+	# Array of emails to be notified of new entries made with the public API
+	public_submission_accounts: ['torey@teagles.io']
+
+	# Control the display of the content type in the back-office.
+	# display_settings:
+	# seo: false # display the SEO tab for the content entries
+	# advanced: false # display the Advanced tab for the content entries
+	# position: 1 # position in the sidebar menu
+	# hidden: false # hidden for authors?
+
+	# By default, the back-office displays the _label property (see label_field_name) of the content entry. This can be modified by writing your own Liquid template below:
+	# entry_template: '<a href="{{ link }}">{{ entry._label }}</a>' # The default template
+
+	# A list describing each field
+	fields:
+	- name: # The lowercase, underscored name of the field
+	label: Name # Human readable name of the field
+	type: string
+	required: true
+	hint: Explanatory text displayed in the back office
+	localized: false
+
+	- email: # The lowercase, underscored name of the field
+	label: Email # Human readable name of the field
+	type: string
+	required: true
+	hint: Explanatory text displayed in the back office
+	localized: false
+
+	- phone: # The lowercase, underscored name of the field
+	label: Phone # Human readable name of the field
+	type: string
+	required: true
+	hint: Explanatory text displayed in the back office
+	localized: false
+
+	- address: # The lowercase, underscored name of the field
+	label: Address # Human readable name of the field
+	type: string
+	required: true
+	hint: Explanatory text displayed in the back office
+	localized: false
+
+	- message: # The lowercase, underscored name of the field
+	label: Message # Human readable name of the field
+	type: text
+	required: true
+	hint: Explanatory text displayed in the back office
+	localized: false
+	# text_formatting: html # html (uses rich text editor), markdown or text (uses plain text editor)

app/views/pages/contact.liquid +59 -4

@@	@@ -13,7 +13,7 @@ editable_elements:
	{% block 'main' %}
	{% include 'page_header' %}
	<section class="row page {{ page.slug }}">
-	<div class="column medium-8 small-centered">
+	<div class="column medium-10 large-8 small-centered">
	<div class="callout">
	<h2 class="text-center">{% editable_text "heading", line_break: false, format: 'raw', rows: 1 %}Heading{% endeditable_text %}</h2>
	{% editable_text content %}Lorem ipsum{% endeditable_text %}
@@	@@ -33,20 +33,75 @@ editable_elements:
	<p>
	{% include 'hours' %}
	</p>
-	<div class="responsive-embed">
-	<iframe width="600" height="450" frameborder="0" style="border:0"
+
+	<p class="thin"><strong>Come visit our Showroom</strong></p>
+	<div class="responsive-embed square">
+	<iframe width="600" height="600" frameborder="0" style="border:0"
	src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ9ydA7dCSGYgR9gOaaCWfa1k&key=AIzaSyA0ffMEjozfU9dLu6LV1okQqylnrGHCSok" allowfullscreen>
	</iframe>
	</div>

	</div>
	<div class="column medium-6">
+	{% model_form 'customer_messages', success: '/contact-thank-you', error: '/contact', id: 'contact-form' %}
+	{% if customer_message.errors %}
+	<p>The following errors occured:</p>
+	<ul>
+	{% for error in customer_message.errors %}
+	<li>{{error[0] \| capitalize}} - {{error[1]}}</li>
+	{% endfor %}
+	</ul>
+	{% endif %}
+	<label>
+	Full Name:
+	<input name="content[name]" required="true" type="text" value="{{customer_message.name}}">
+	</label>
+	<label>
+	Best Email:
+	<input name="content[email]" required="true" type="email" value="{{customer_message.email}}">
+	</label>
+	<label>
+	Your Phone:
+	<input name="content[phone]" required="true" type="tel" value="{{customer_message.phone}}">
+	</label>
+	<label>
+	Full Address:
+	<textarea name="content[address]" rows="2" required="true" >{{customer_message.address}}</textarea>
+	</label>
+	<label>
+	Message:
+	<textarea name="content[message]" rows="4" required="true" >{{customer_message.message}}</textarea>
+	</label>
+	</tr>
+	</table>
+	<div class="robot-warning hide callout text-center warning">
+	Are you robot?
+	</div>
+	<div class="callout g-recaptcha text-center" data-sitekey="6LdbaUwUAAAAAFPucKMnLxCnYvIPBr3UQNOLYCE2"></div>
+	<input type="submit" class="button expanded">
+	{% endmodel_form %}
	</div>
	<hr>
	</div>
-	{% include 'random_testimonial' %}
+	<strong>Testimonial: </strong>
+	{% include 'random_testimonial' %}
	</div>
	</div>
	</div>
	</section>
	{% endblock %}
+	{% block body_bottom %}
+	<script type="text/javascript">
+	$(function() {
+	$('#contact-form').on('submit', function(e) {
+	var form = $(this);
+	$('.robot-warning').addClass('hide')
+
+	if (grecaptcha.getResponse() == "") {
+	e.preventDefault();
+	$('.robot-warning').removeClass('hide')
+	}
+	});
+	});
+	</script>
+	{% endblock %}

app/views/pages/layouts/application.liquid +1 -0

@@	@@ -22,6 +22,7 @@ is_layout: true
	</script>
	{% block head %}
	{% endblock %}
+	<script src='https://www.google.com/recaptcha/api.js'></script>
	</head>
	<body class="{{ page.slug }}">
	<!-- Start Top Bar -->

public/stylesheets/_settings.scss +1 -0

@@	@@ -734,6 +734,7 @@ $responsive-embed-margin-bottom: rem-calc(16);
	$responsive-embed-ratios: (
	default: 4 by 3,
	widescreen: 16 by 9,
+	square: 1 by 1,
	);

	// 47. Reveal

public/stylesheets/app.scss +3 -0

@@	@@ -86,6 +86,9 @@ p.thin {
	hr.thin {
	margin: 0.5rem auto;
	}
+	.g-recaptcha > div {
+	margin:auto;
+	}

	// .content {
	// background-color: $light-gray;