Merge pull request #93 from uktrade/ED-824-free-text-entry-subscripti…

…on-form

Add free text entry to subscription form

enrolment/forms.py

@@ -13,6 +13,7 @@ class LanguageForm(forms.Form):
 
 
 class InternationalBuyerForm(forms.Form):
+    error_css_class = 'input-field-container has-error'
     PLEASE_SELECT_LABEL = _('Please select an industry')
     TERMS_CONDITIONS_MESSAGE = _(
         'Tick the box to confirm you agree to the terms and conditions.'
@@ -21,6 +22,7 @@ class InternationalBuyerForm(forms.Form):
         'I agree to the great.gov.uk '
         '<a target="_self" href="%(url)s">terms and conditions</a>.'
     )
+
     full_name = forms.CharField(label=_('Your name'))
     email_address = forms.EmailField(label=_('Email address'))
     sector = forms.ChoiceField(
@@ -34,8 +36,16 @@ class InternationalBuyerForm(forms.Form):
     )
     company_name = forms.CharField(label=_('Company name'))
     country = forms.CharField(label=_('Country'))
-
-    error_css_class = 'input-field-container has-error'
+    comment = forms.CharField(
+        label=_(
+            "Couldn't find what you were looking for or would like to give us "
+            "feedback? Let us know:"
+        ),
+        help_text=_('Maximum 1000 characters.'),
+        max_length=1000,
+        widget=forms.Textarea,
+        required=False,
+    )
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
@@ -58,6 +68,9 @@ def serialize_international_buyer_forms(cleaned_data):
         'name': cleaned_data['full_name'],
         'email': cleaned_data['email_address'],
         'sector': cleaned_data['sector'],
+        'company_name': cleaned_data['company_name'],
+        'country': cleaned_data['country'],
+        'comment': cleaned_data.get('comment', ''),
     }
 
 

enrolment/static/sass/main.scss

@@ -260,7 +260,7 @@ label, input, button, select, textarea {
 }
 
 .input-field-container {
-  margin-bottom: 30px;
+  margin-bottom: 15px;
   label {
     font-size: 18px;
     font-weight: 300;
@@ -273,6 +273,7 @@ label, input, button, select, textarea {
   }
 
   input, select, textarea {
+    background-color: white!important;
     border-radius: 0;
     font-size: 20px;
     height: 50px;
@@ -892,7 +893,13 @@ a.ed-filled-button-primary {
   .ed-landing-page-register-button-container {
     margin-bottom: 0;
     margin-top: 0;
-    text-align: right;
+    text-align: left;
+  }
+  .ed-checkbox-container {
+    margin-left: 0;
+  }
+  textarea {
+    min-height: 100px;
   }
 }
 
@@ -904,12 +911,6 @@ a.ed-filled-button-primary {
   }
   li {
     margin-bottom: 20px;
-    > span {
-      font-size: 15px;
-      font-weight: 300;
-      line-height: 1.4;
-      color: #4a4a4a;
-    }
   }
   .btn-container .button {
     padding: inherit;
@@ -918,3 +919,10 @@ a.ed-filled-button-primary {
     border-radius: 3px;
   }
 }
+
+.helptext {
+  font-size: 15px;
+  font-weight: 300;
+  line-height: 1.4;
+  color: #4a4a4a;
+}

enrolment/templates/landing-page-international-form.html

@@ -1,9 +1,9 @@
 {% load trans from i18n %}
 <div class="ed-landing-page-form-container">
 	<div class="ed-landing-page-form-inner">
-		<h2 style="font-weight: 300; margin-top: 0;">{% trans "Register to see the latest UK companies" %}</h2>
+		<h2 style="font-weight: 300; margin-top: 0;">{% trans "Stay up to date" %}</h2>
 		<p>
-			{% trans "We have hundreds of companies that may meet your needs and new ones are being added frequently. Register to receive a weekly mail with a summary of new companies in your industry." %}
+			{% trans "New companies in your sector join every day. Register to receive updates or let us know if your needs were not currently met and we will be in touch." %}
 		</p>
 
 		<div class="row-fluid">
@@ -60,24 +60,35 @@ <h2 style="font-weight: 300; margin-top: 0;">{% trans "Register to see the lates
 							</label>
 						</div>
 					</div>
-
 					<div class="span4"></div>
 				</div>
 
 				<div class="row-fluid">
-					<div class="span10 checkbox-tc {{ form.terms.css_classes|default:'input-field-container' }}" style="text-align: right;">
-						{{ form.terms.errors }}
-						<label for="{{ form.terms.id_for_label }}" style="margin-top: 15px; font-weight: 300;">
-							{{ form.terms.label }}
-							<input id="{{ form.terms.id_for_label }}" name="{{ form.terms.html_name }}" type="checkbox" style="vertical-align: top; margin-top: 7px;">
-						</label>
+					<div class="span12">
+						<div class="{{ form.comment.css_classes|default:'input-field-container' }}">
+							<label for="{{ form.comment.id_for_label }}">
+								<span>{{ form.comment.label }}</span>
+								{{ form.comment.errors }}
+								{{ form.comment }}
+								<p class="helptext">{{ form.comment.help_text }}</p>
+							</label>
+						</div>
 					</div>
+				</div>
 
+				<div class="row-fluid">
 					<div class="span2 btn-container ed-landing-page-register-button-container">
 						<button class="button" style="border-radius: 4px;">
-							{% trans "Register" %}
+							{% trans "Send" %}
 						</button>
 					</div>
+					<div class="span10 ed-checkbox-container {{ form.terms.css_classes|default:'input-field-container' }}">
+						{{ form.terms.errors }}
+						<label for="{{ form.terms.id_for_label }}" style="margin-top: 15px; font-weight: 300;">
+							<input id="{{ form.terms.id_for_label }}" name="{{ form.terms.html_name }}" type="checkbox" style="vertical-align: top; margin-top: 7px;">
+							{{ form.terms.label }}
+						</label>
+					</div>
 				</div>
 			</form>
 

enrolment/tests/test_forms.py

@@ -8,15 +8,24 @@
     forms.InternationalBuyerForm.TERMS_CONDITIONS_MESSAGE
 
 
-def test_international_form_missing_data():
-    form = forms.InternationalBuyerForm(data={})
+def test_international_form_required():
+    form = forms.InternationalBuyerForm()
 
     assert form.is_valid() is False
-    assert form.errors['full_name'] == [REQUIRED_MESSAGE]
-    assert form.errors['email_address'] == [REQUIRED_MESSAGE]
-    assert form.errors['sector'] == [REQUIRED_MESSAGE]
-    assert form.errors['company_name'] == [REQUIRED_MESSAGE]
-    assert form.errors['country'] == [REQUIRED_MESSAGE]
+    assert form.fields['full_name'].required is True
+    assert form.fields['email_address'].required is True
+    assert form.fields['sector'].required is True
+    assert form.fields['company_name'].required is True
+    assert form.fields['country'].required is True
+    assert form.fields['terms'].required is True
+    assert form.fields['comment'].required is False
+
+
+def test_international_form_terms_custom_message():
+    form = forms.InternationalBuyerForm(data={})
+
+    form.is_valid()
+
     assert form.errors['terms'] == [TERMS_CONDITIONS_MESSAGE]
 
 
@@ -30,3 +39,25 @@ def test_international_form_accepts_valid_data():
         'terms': True
     })
     assert form.is_valid()
+
+
+def test_serialize_international_buyer_forms():
+    data = {
+        'full_name': 'Jim Example',
+        'email_address': 'jim@example.com',
+        'sector': 'AEROSPACE',
+        'company_name': 'Example corp',
+        'country': 'UK',
+        'comment': 'sup, bro',
+    }
+    expected = {
+        'name': 'Jim Example',
+        'email': 'jim@example.com',
+        'sector': 'AEROSPACE',
+        'company_name': 'Example corp',
+        'country': 'UK',
+        'comment': 'sup, bro',
+    }
+    actual = forms.serialize_international_buyer_forms(data)
+
+    assert actual == expected