Create the contact form

[betahope]

I have just noticed that the lock icon next to the URL is no longer there when Chrome indicates that the URL is secured, because of the SSL.

This is what we are seeing:

We need to solve this asap!

Thanks 👍

[betahope]

Note:

This happens in the deals page, when you go to the Birthday deal or Employees Benefit.

[lcoenen]

That's weird. The SSL certificat is valid:

I'm on it

[betahope]

Note:

Once the site detects that is not fully secure, then it stays as such.

I was able to navigate to the list of pubs and it's showing the same information icon next to the URL:

[betahope]

That's weird. The SSL certificat is valid:

I'm on it

Thanks 👍

[lcoenen]

@RohrerHope you can check the console when reporting an error. Here, the problem is obvious:

[betahope]

@RohrerHope you can check the console when reporting an error. Here, the problem is obvious:

Okay. Please show me next Friday how to check the console and what to look for. :)

In this case, what's the solution?

Thanks.

[lcoenen]

There's none. Either we redirect to an external website or we build a contact page ourself, but if there's a "mailto:" link, it's gonna stay like that.

[lcoenen]

And for the console, please check https://developers.google.com/web/tools/chrome-devtools/console/

For what to look for, well, everything. Most of the time you'll see the error explained there if the page go blank or something's wrong.

[betahope]

There's none. Either we redirect to an external website or we build a contact page ourself, but if there's a "mailto:" link, it's gonna stay like that.

Thanks.

I did a bit of research and actually found a lot of people and articles saying to not put mailto: on websites.

We then need to consider having contact forms on our website to avoid this security trigger.

[buckwierd]

One reason more to create a contact page as suggested in issue #74

[buckwierd]

How come Sharetribe doesn't have this issue although they have a mailto link on the contact page? What are they doing different than us? https://www.sharetribe.com/contact.html

[betahope]

How come Sharetribe doesn't have this issue although they have a mailto link on the contact page? What are they doing different than us? https://www.sharetribe.com/contact.html

I believe it's how the mailto is coded:

[betahope]

I continue to find other websites with mailto: links and no issues with the security lock in Chrome. So there's got to be a way to do that.

[betahope]

In another website, they have it coded like this:

<p class="apply-text">Apply today by sending your CV to: <a href="mailto:careers@theworks.co.uk">careers@theworks.co.uk</a></p> This is the website: https://www.theworks.co.uk/page/careers

You can see that the lock is still there, even when they have the mailto: in the site.

[lcoenen]

They should use some javascript to prevent the error to appear, apparently. So yes, there are ways to hack it, but it's not the point. The warning appears because it IS unsecured - we cannot guarantee that the user's communication will be encrypted.

We will create a contact form.

[lcoenen]

Allow the user to contact us through a form

[betahope]

@buckwierd @lcoenen

If creating a contact form will not a very straightforward task, meaning that we won't have it in a week, then in the meantime we need to fix the security issue caused by the mailto: which we now know has a solution.

So please consider that if we can't have the contact form by this week, then let's please fix that.

Thanks 👍

[buckwierd]

@RohrerHope with the "speed" that we have at the moment, there is no way we can have the contact form within one week. Any solution on this until we create the contact form? I can see you guys did some research on this.

[betahope]

@RohrerHope with the "speed" that we have at the moment, there is no way we can have the contact form within one week. Any solution on this until we create the contact form? I can see you guys did some research on this.

In the previous issue about the security issue, I commented two times with possible solutions + we have the email from Sharetribe with a possible solution.

I thought that we couldn't have the contact form in one week, so that's why I posted the previous comment for us to find a solution.

Please review the original issue where I posted possible solutions, and the email from Sharetribe.

[lcoenen]

Here is a first sketch of the contact form. The work is done on branch create-contact-form that have been splited from creating-static-pages.

Thinks that still needs to be done:

• validation
• captcha
• sending the info
• backend

[buckwierd]

@lcoenen looks good. Add a "Subject" line as a text field and it's perfect from my perspective. Simple and clean.

[lcoenen]

Create the pages

[lcoenen]

We can use Mailgun to send email automatically to us. They have an API that allow that for cheap and that we can throttle if needed.

With the addition of a recapcha, that will provide the adequate amount of protection.

We will need to integrate a snackbar.

[lcoenen]

The state have been lifted and the thunk is ready to be written.

We will have an issue with API keys. We tried to hide it in the .env, but it is not passed to the browser environment.

It is also not great to publicly broadcast our API keys. We will have to consider security breaches here.

We will ask share tribe about how to secure this.

[lcoenen]

[lcoenen]

A dropdown with the reason will be added.

[betahope]

Ideas for the dropdown menu:

Title of the field: Select your contact purpose

• General Inquiry
• Booking a pub
• Listing a space
• Claiming a listing
• Changing the payment information
• Corporate Benefit Inquiry

What happens when they choose each of them?

• General Inquiry
• Booking a pub
• Listing a space

Contact form remains the same. No new field needs to be presented.

• Claiming a listing

Contact form adapts and adds new fields (all mandatory):

1. Your name (text field)
2. Your last name (text field)
3. Your email address (text field with validation for proper email address)
4. Listing's name (text field)
5. Are you the owner or manager of the pub? (multiple options question with 2 options: Owner, Manager. Only one option can be selected.)
6. What's the pub's phone number? (text field controlling the number of characters to be entered)
7. Please indicate if the pub has any of the following: (checkbox options with 4 options: Website, Facebook page, Twitter, Instagram. More than one option can be selected.)
8. To claim your listing you must agree to our Terms & Conditions of Service, together with our Privacy Policy. (checkbox with only one checkbox option: I agree. The T&Cs and Privacy Policy must be hyperlinked to their corresponding pages.)

Best case scenario here is that as they are typing the name of the listing, we show results below it, with the listings that match the text they are inputting. Much like what Google does in Google Maps when you start typing an address and it starts to show results that match your text.

• Changing the payment information

Contact form adapts and adds new fields:

1. Account email (text field with validation for proper email address)
2. Listing's name (text field)
3. New listing IBAN (text field with validation for proper IBAN format)

1.1 Note: Best case scenario here is that the account email is already populated if the user is logged in.

2.1 Note: Best case scenario here is that as they are typing the name of the listing, we show results below it, with the listings that match the text they are inputting. Much like what Google does in Google Maps when you start typing an address and it starts to show results that match your text.

3.1 Note: Best case scenario here is that the IBAN field validates the IBAN format. IBANs have an international format and we can validate against it.

• Corporate Benefit Inquiry

Contact form adapts and adds new fields:

1. Your name (text field, mandatory)
2. Organisation (text field, mandatory)
3. Number of employees (dropdown field: options here: https://developer.linkedin.com/docs/reference/company-size-codes#, mandatory)
4. Website (URL field, mandatory)

Thank you 👍

[betahope]

Previous comment is incomplete. Apologies.

I will edit now.

Edited.

[lcoenen]

What have been done: Creating the contact form. Plugging it to the microservice. Validating with reCatpcha.

Pushed to: create-contact-form What's left to be done: Validation of the button.

I set the floating dynos to this branch (https://whichost-frontend-float.herokuapp.com/help/contact-us). It should work, just wait half an hour to let the domains on the reCaptcha key to update.

[buckwierd]

@lcoenen tested and here is the feedback.

• I've updated the .env file locally but compiling failed with this error: ./src/app.js Module not found: Can't resolve 'react-recaptcha-google' in '/Users/sighencea/Documents/GitHub/Whichost/frontend/src'

• Tested on https://whichost-frontend-float.herokuapp.com/help/contact-us and there was no recapcha. Sending the email took a while and ended with the error "An error occurred: Error: Error while trying to contact the server"

[lcoenen]

@buckwierd

• For the local, type yarn install react-recaptcha-google --ignore-engines (generally speaking, it works like this: the file package.json contains all the required package, so when you have this type of error, try installing them by typing yarn install --ignore-engines).

• For the float, I just tested and it works. As I said, it may have taken time to update the domain on reCaptcha.

Also, please note that there is no 'real' captcha (you don't have to click on anything), it's a widget in the background that compute the probability that the user is actually human. You can see this widget on the bottom right side.

[lcoenen]

What have been done: created the contact us page Pushed to: create-contact-form Tag somebody: @buckwierd PR: #151

Asking for validation:

• Check on mobile and on desktop if the issue have been correctly fixed.
• If everything is correct, move the card to accepted column.
• If the issue isn't fixed, re-open the comment clearly what the problem is and what is the desired result.
• Move the card to have issues column.
• Merge (or express approval in) the corresponding PR if needed. Move the card to the launch column.

[buckwierd]

@lcoenen On localhost I still have the issue: Failed to compile ./src/app.js Module not found: Can't resolve 'react-recaptcha-google' in '/Users/sighencea/Documents/GitHub/Whichost/frontend/src'

[buckwierd]

@lcoenen yarn install react-recaptcha-google --ignore-engines didn't work. yarn add react-recaptcha-google --ignore-engines worked fine.

This time I could see the recapcha logo on the bottom right side of the screen. Tried to send a message and landed on a page with the message "An error occured: Error: Error while trying to contact the server".

[betahope]

Thanks for the work done with this guys. However, I tested this on mobile and it does not look good. It's messy.

Also, please remove the phone number question from the contact form. We don't need that information is the basic version of the form. For some other purposes, we will need a phone number, but a basic contact form never asks for phone numbers.

We'll talk about it during the meeting.

Thanks 👍

[betahope]

In most of the pages in this new section we have that message at the bottom.

I understand the intention, but that does not improve the UX. These are web pages, not emails.

Please let's clean that from the pages in which they were added to.

[betahope]

It will come the day in which we will be working with other types of businesses. Until then, we are working with publicans, so let's continue to use publicans and not confuse anyone.

Thanks.

[betahope]

These fees are incorrect. My bad for not updating the Squarespace page. It's updated now.

You can view the fees here: https://docs.google.com/spreadsheets/d/1vYB1vH87QR-89XWQjPYQwRQFgGR0hG8LPIpZ-CoVjDo/edit#gid=0

Thanks.

[betahope]

Question: What happened to the "Request a Callback" option?

"Contact us" is a different CTA than "Request a Callback" and we have a tool that allows our customers and publicans to schedule when they would like to be contacted.

Thanks.

[lcoenen]

@RohrerHope this options was on Squarespace, and given that you guys have been anxious to get rid of Squarespace, I had to find a solution. For now, this is redirecting to the contact form, which will allow to prompt this kind of information.

[lcoenen]

The tabs title have been updated, it's now saying "Guidebook for publicans".

[lcoenen]

The greetings have been removed from HelpCenter pages.

[betahope]

Ideas for the dropdown menu:

Title of the field: Select your contact purpose

• General Inquiry
• Booking a pub
• Listing a space
• Claiming a listing
• Changing the payment information

What happens when they choose each of them?

• General Inquiry
• Booking a pub
• Listing a space

Contact form remains the same. No new field needs to be presented.

• Claiming a listing

Contact form adapts and adds new fields (all mandatory):

1. Your name (text field)
2. Your last name (text field)
3. Your email address (text field with validation for proper email address)
4. Listing's name (text field)
5. Are you the owner or manager of the pub? (multiple options question with 2 options: Owner, Manager. Only one option can be selected.)
6. What's the pub's phone number? (text field controlling the number of characters to be entered)
7. Please indicate if the pub has any of the following: (checkbox options with 4 options: Website, Facebook page, Twitter, Instagram. More than one option can be selected.)
8. To claim your listing you must agree to our Terms & Conditions of Service, together with our Privacy Policy. (checkbox with only one checkbox option: I agree. The T&Cs and Privacy Policy must be hyperlinked to their corresponding pages.)

Best case scenario here is that as they are typing the name of the listing, we show results below it, with the listings that match the text they are inputting. Much like what Google does in Google Maps when you start typing an address and it starts to show results that match your text.

• Changing the payment information

Contact form adapts and adds new fields:

1. Account email (text field with validation for proper email address)
2. Listing's name (text field)
3. New listing IBAN (text field with validation for proper IBAN format)

1.1 Note: Best case scenario here is that the account email is already populated if the user is logged in.

2.1 Note: Best case scenario here is that as they are typing the name of the listing, we show results below it, with the listings that match the text they are inputting. Much like what Google does in Google Maps when you start typing an address and it starts to show results that match your text.

3.1 Note: Best case scenario here is that the IBAN field validates the IBAN format. IBANs have an international format and we can validate against it.

I'm editing this comment to add a new purpose when organisations are contacting us to inquire about the Corporate Benefit.

Thanks 👍

[betahope]

Ideas for the dropdown menu:

Title of the field: Select your contact purpose

• General Inquiry
• Booking a pub
• Listing a space
• Claiming a listing
• Changing the payment information
• Corporate Benefit Inquiry

What happens when they choose each of them?

• General Inquiry
• Booking a pub
• Listing a space

Contact form remains the same. No new field needs to be presented.

• Claiming a listing

Contact form adapts and adds new fields (all mandatory):

1. Your name (text field)
2. Your last name (text field)
3. Your email address (text field with validation for proper email address)
4. Listing's name (text field)
5. Are you the owner or manager of the pub? (multiple options question with 2 options: Owner, Manager. Only one option can be selected.)
6. What's the pub's phone number? (text field controlling the number of characters to be entered)
7. Please indicate if the pub has any of the following: (checkbox options with 4 options: Website, Facebook page, Twitter, Instagram. More than one option can be selected.)
8. To claim your listing you must agree to our Terms & Conditions of Service, together with our Privacy Policy. (checkbox with only one checkbox option: I agree. The T&Cs and Privacy Policy must be hyperlinked to their corresponding pages.)

Best case scenario here is that as they are typing the name of the listing, we show results below it, with the listings that match the text they are inputting. Much like what Google does in Google Maps when you start typing an address and it starts to show results that match your text.

• Changing the payment information

Contact form adapts and adds new fields:

1. Account email (text field with validation for proper email address)
2. Listing's name (text field)
3. New listing IBAN (text field with validation for proper IBAN format)

1.1 Note: Best case scenario here is that the account email is already populated if the user is logged in.

2.1 Note: Best case scenario here is that as they are typing the name of the listing, we show results below it, with the listings that match the text they are inputting. Much like what Google does in Google Maps when you start typing an address and it starts to show results that match your text.

3.1 Note: Best case scenario here is that the IBAN field validates the IBAN format. IBANs have an international format and we can validate against it.

• Corporate Benefit Inquiry

Contact form adapts and adds new fields:

1. Your name (text field, mandatory)
2. Organisation (text field, mandatory)
3. Number of employees (dropdown field: options here: https://developer.linkedin.com/docs/reference/company-size-codes#, mandatory)
4. Website (URL field, mandatory)

Thank you 👍

Purposes edited, including Corporate Benefit.

[buckwierd]

The issue has been implemented/fixed correctly.