Updating Estimate Request form

Torey Heinz committed Mar 27, 2018

commit 64f63f53c3df150da627daa79586eeac539c709a

Showing 7 changed files with 134 additions and 17 deletions

app/views/pages/confirmations/contact.liquid +26 -0

@@	@@ -0,0 +1,26 @@
+	---
+	title: Thank You!
+	slug: contact
+	listed: false
+	published: true
+	is_layout: false
+	editable_elements:
+	"main/heading": "We'll be contacting you soon!"
+	"main/content": "We know you are excited to get started, while you wait, see what others have said."
+	---
+	{% extends 'layouts/page' %}
+	{% block 'main' %}
+	{% include 'page_header' %}
+	<section class="row page {{ page.slug }}">
+	<div class="column medium-8 small-centered">
+	<div class="callout">
+	<h2 class="text-center">{% editable_text "heading", line_break: false, format: 'raw', rows: 1 %}Heading{% endeditable_text %}</h2>
+	<div class="text-center">
+	{% editable_text content %}Lorem ipsum{% endeditable_text %}
+	</div>
+	<hr class="thin">
+	{% include 'testimonials' %}
+	</div>
+	</div>
+	</section>
+	{% endblock %}

app/views/pages/confirmations/estimate-request.liquid +26 -0

@@	@@ -0,0 +1,26 @@
+	---
+	title: Thank You!
+	slug: estimate-request
+	listed: false
+	published: true
+	is_layout: false
+	editable_elements:
+	"main/heading": "We'll be contacting you soon!"
+	"main/content": "We know you are excited to get started, while you wait, see what others have said."
+	---
+	{% extends 'layouts/page' %}
+	{% block 'main' %}
+	{% include 'page_header' %}
+	<section class="row page {{ page.slug }}">
+	<div class="column medium-8 small-centered">
+	<div class="callout">
+	<h2 class="text-center">{% editable_text "heading", line_break: false, format: 'raw', rows: 1 %}Heading{% endeditable_text %}</h2>
+	<div class="text-center">
+	{% editable_text content %}Lorem ipsum{% endeditable_text %}
+	</div>
+	<hr class="thin">
+	{% include 'testimonials' %}
+	</div>
+	</div>
+	</section>
+	{% endblock %}

app/views/pages/contact.liquid +1 -1

@@	@@ -43,7 +43,7 @@ editable_elements:

	</div>
	<div class="column medium-6">
-	{% model_form 'customer_messages', success: '/thank-you', error: '/contact', id: 'contact-form' %}
+	{% model_form 'customer_messages', success: '/confirmations/contact', error: '/contact', id: 'contact-form' %}
	{% if customer_message.errors %}
	<p>The following errors occured:</p>
	<ul>

app/views/pages/estimate.liquid +1 -1

@@	@@ -26,7 +26,7 @@ editable_elements:
	</div>
	</div>
	<div class="column medium-6">
-	<div id="testimonials-wrapper" class="callout" style="height: 1200px; overflow: hidden;">
+	<div id="testimonials-wrapper" class="callout" style="height: 1200px; overflow: scroll;">
	<p class="lead"><strong>Testimonials</strong></p>
	{% include 'testimonials' %}
	</div>

app/views/snippets/estimate_form.liquid +68 -15

@@	@@ -1,4 +1,4 @@
-	{% model_form 'project_requests', success: '/contact/thank-you', error: '/estimate', id: 'estimate-form' %}
+	{% model_form 'project_requests', success: '/confirmations/estimate-request', error: '/estimate', id: 'estimate-form' %}
	{% if project_request.errors %}
	<p>The following errors occured:</p>
	<ul>
@@	@@ -8,37 +8,90 @@
	</ul>
	{% endif %}
	<label>
-	Full Name:{% include 'required' %}
-	<input name="content[name]" required="true" type="text" value="{{project_request.name}}">
+	<strong>Full Name:</strong>{% include 'required' %}
+	<input name="content[name]" required type="text" value="{{project_request.name}}">
	</label>
	<label>
-	Best Email:{% include 'required' %}
-	<input name="content[email]" required="true" type="email" value="{{project_request.email}}">
+	<strong>Best Email:</strong>{% include 'required' %}
+	<input name="content[email]" required type="email" value="{{project_request.email}}">
	</label>
	<label>
-	Your Phone:{% include 'required' %}
-	<input name="content[phone]" required="true" type="tel" value="{{project_request.phone}}">
+	<strong>Your Phone:</strong>{% include 'required' %}
+	<input name="content[phone]" required type="tel" value="{{project_request.phone}}">
	</label>
	<label>
-	Project Address:{% include 'required' %}
-	<p class="help-text thin">Please enter complete address</p>
-	<textarea name="content[address]" rows="2" required="true" placeholder="11276 E. Lakewood Blvd.
-	Holland, MI 49424 ">{{project_request.address}}</textarea>
+	<strong>Project Address:</strong>{% include 'required' %}
+	<input class="thin" name="content[address]" required type="text" value="{{project_request.address}}">
+	<fieldset class="row collapse">
+	<div class="column small-6">
+	<label>
+	City:
+	<input name="content[city]" required type="text" value="{{project_request.address}}">
+	</label>
+	</div>
+	<div class="column small-2">
+	<label>
+	State:
+	<input name="content[state]" required type="text" value="{{project_request.address}}">
+	</label>
+	</div>
+	<div class="column small-4">
+	<label>
+	Zip:
+	<input name="content[zip]" required type="text" value="{{project_request.address}}">
+	</label>
+	</div>
+	</fieldset>
	</label>
	<label>
-	Project Location:
+	<strong>Project Location:</strong>
	<p class="help-text thin">When applicable include: Marina, Dock/Slip number, location on property, etc.</p>
	<textarea name="content[location]" rows="2">{{project_request.location}}</textarea>
	</label>
	<label>
-	Work to be Completed:{% include 'required' %}
-	<textarea class="autosize" name="content[project_description]" rows="6" required="true" >{{project_request.project_description}}</textarea>
+	<strong>Services Required:</strong>{% include 'required' %}
+	<fieldset class="service-checkboxes row medium-up-2">
+	{% for service in contents.services %}
+	<div class="column">
+	<input id="{{ service._id }}" type="checkbox"><label for="checkbox1">{{ service.title }}</label>
+	</div>
+	{% endfor %}
+	</fieldset>
+	</label>
+	<label>
+	<strong> Work to be Completed:</strong>{% include 'required' %}
+	<textarea class="autosize" name="content[project_description]" rows="6" required >{{project_request.project_description}}</textarea>
	</label>
	<label>
	When would you like your project completed by?
	<input name="content[completion_date]" type="date" >
	</label>
-	</tr>
+	<fieldset class="row medium-up-2">
+	<div class="column">
+	<label for="exampleFileUpload">
+	<strong>First Attachment:</strong>
+	<input type="file" id="exampleFileUpload">
+	</label>
+	</div>
+	<div class="column">
+	<label for="exampleFileUpload">
+	<strong>Second Attachment:</strong>
+	<input type="file" id="exampleFileUpload">
+	</label>
+	</div>
+	<div class="column">
+	<label for="exampleFileUpload">
+	<strong>Third Attachment:</strong>
+	<input type="file" id="exampleFileUpload">
+	</label>
+	</div>
+	<div class="column">
+	<label for="exampleFileUpload">
+	<strong>Forth Attachment:</strong>
+	<input type="file" id="exampleFileUpload">
+	</label>
+	</div>
+	</fieldset>
	<div class="robot-warning hide callout text-center warning">
	Are you robot?
	</div>

public/stylesheets/_forms.scss +11 -0

@@	@@ -0,0 +1,11 @@
+	form {
+	.service-checkboxes {
+	[type='checkbox'] {
+	margin: 0;
+	}
+	}
+
+	.thin {
+	margin: 0;
+	}
+	}

public/stylesheets/app.scss +1 -0

@@	@@ -51,6 +51,7 @@

	@import "vendor/trumbowyg";
	@import "footer";
+	@import "forms";
	@import "services";
	@import "header";