Create Contact Us page

[ashleydraper]

Create a Contact Us page for the state template and track copy edits in this google doc.

Figma links: Contact us | Contact us error messages

[extinah]

Looks good to me. @artuoma

[kkoryaka]

@ashleydraper what roles option should we include in the select box?

[kkoryaka]

@carterm could you add azure post service to this one?

[ashleydraper]

@kkoryaka Let use this list:

• Analytics
• Content
• Design
• Development
• Product
• Program
• Research
• Other

[yesenia-gtz]

@carterm I have invited you to the OET research Airtable account for testing and configuration. Please let me know if you need further access or if you run into issues with your research.

https://airtable.com/appu01tGlmTTMm5uX/tblN7oCcLMOSPvbM6/viwBA9aiJfgaPQzga?blocks=hide

cc @artuoma @kkoryaka @ashleydraper

[yesenia-gtz]

@carterm See below for form setup in airtable. I added the field values to the table for you and a link to review Design System feedback form configuration here: https://airtable.com/app4B5KqaCTSHAdCS/tbliV5kSgz7jBnIyT/viwDkwTUo3wZOqYhF?blocks=hide

State Template contact form responses

Review Design System feedback form configuration

cc @kkoryaka @artuoma @extinah

[carterm]

@yesenia-gtz The link above does not work for me.

Sorry, the page you were looking for was not found

[yesenia-gtz]

@carterm bummer, it is a link to the screenshot I attached for Review Design System feedback form configuration. just wanted to show you what was done in the Automations area of airtable.. you should be able to do that in our database.

[yesenia-gtz]

@extinah @sharon-rabang is there a design for the contact page ? are we using a generic form layout for this?

[ashleydraper]

@yesenia-gtz It existed on the last board, I just copied it to our new environment. Here's the contact us design from Courtney. Sharon may want to redesign.

[sharon-rabang]

@yesenia-gtz @ashleydraper @extinah @carterm Here is the redesigned form in Figma: Contact us | Contact us error messages Please let me know if we'll need to make any changes. Thanks!

[yesenia-gtz]

@hamiltonryan @artuoma @kkoryaka @extinah should we include a section for Department in the contact form? Would be great to know who is reaching out to keep track of interested persons.

[kkoryaka]

@yesenia-gtz Carter asked to move this item to production release date instead of Nov 4, because a lot of research involved.

[yesenia-gtz]

Moved to production release

[extinah]

Updated the word doc to include a section for department.... then saw this was moved to production release. Heads up.

https://docs.google.com/document/d/1pGl4gHz1IX8Kn94GQXWUzbHGInjf5f-c08TejsBlquc/edit

[extinah]

@hamiltonryan @artuoma @kkoryaka @extinah should we include a section for Department in the contact form? Would be great to know who is reaching out to keep track of interested persons.

I think we should do this.

[carterm]

Meeting with DevSecOps to set up Azure environment to run the Contact Us service.

The plan is to create a Azure FaaS endpoint in Node.JS that will act as a middle tier between the public website and the AirTable Base. The endpoint will only allow requests from specific origins, and only add new records to AirTable. The code for the endpoint will be created in a way that encourages users of the State Template to set up their own endpoints.

[carterm]

This is the service created to support the data flow.

https://github.com/Office-of-Digital-Services/cagov-form-post-service

[carterm]

Working with DevSecOps to set up the environment. It's a first time setting up an Azure Function with the current pipelines. Working through it, we got the service running, but they will need to recreate some Azure components for the final setup that won't be done until after Thanksgiving.

[carterm]

PR for working release... https://github.com/Office-of-Digital-Services/California-State-Web-Template-Website/pull/878

[carterm]

deployed to staging.

https://as-cdt-pub-migr-betaws-ww-p-001-stage.azurewebsites.net/contact-us-form.html

[yesenia-gtz]

@carterm OK to move to UX design review?

[carterm]

Added cosmetic updates to better match Figma design... https://github.com/Office-of-Digital-Services/California-State-Web-Template-Website/pull/879

[carterm]

@yesenia-gtz - deploying one more update. I'll let you know.

[carterm]

Ok staging is ready for UX review.

[yesenia-gtz]

@extinah ready for ya!

https://as-cdt-pub-migr-betaws-ww-p-001-stage.azurewebsites.net/contact-us-form.html

[carterm]

Do we have CSS styling for HTML5 "required" fields? The Figma design has glyphs etc, but that sort of convention should probably be included in the global CSS.

<style type="text/css">

  input:required:invalid, input:focus:invalid {
    background-image: url(/images/invalid.png);
    background-position: right top;
    background-repeat: no-repeat;
  }
  input:required:valid {
    background-image: url(/images/valid.png);
    background-position: right top;
    background-repeat: no-repeat;
  }

</style>

[carterm]

Also, our convention has required "*" in front of the label, and a "This field is required" label warning below, without entry instructions. In keeping with the convention, I went with what was on our form elements page.

https://beta.template.webstandards.ca.gov/components/form-elements.html

"Instructional, error messages, and placeholder text should not provide the same message as the label."

[extinah]

We should specs for interactions here. We'll try to get that to you sooner than later.

[carterm]

Adding accessibility update... https://github.com/Office-of-Digital-Services/California-State-Web-Template-Website/pull/880

[carterm]

Validators don't display until first submit attempt. https://github.com/Office-of-Digital-Services/California-State-Web-Template-Website/pull/883

[extinah]

@carterm here's some initial QA. NICELY DONE by the way. Yay :)

@sharon-rabang @ashleydraper can you both help finalize QA next week?

QA Only these two fields are required (name and email) per the design. I'm suggesting we make "How can we help" required, too.

• [ ] 1. Your name
• [ ] 2. Email
• [ ] 3. How can we help?

Error messages if not submitting a required field:

• [ ] Name: Enter your name.
• [ ] Email: Enter your email
• [ ] How can we help?: Provide information about why you're contacting us.

Main role

• [ ] This needs the drop down carrot to display when not selected.
• [ ] The drop down interaction should look more like the design.
• [ ] Add "Other" as the last drop down item

Design

In dev: unselected: Selected:

[carterm]

I can certainly change the required fields.

I'm not sure I understand the problem with the "Main role" selection. It has a dropdown of suggested items, with the ability to type anything instead of selecting other (like a combo box). Also, the screen reader support correctly describes the field as allowing in-line or list entry.

The AirTable data design only has one field for "Role", no "Other" catch field.

I could limit the "Main role" selection to the list and then have a secondary field in for a "other" type in, but that appears confusing and redundant in my opinion.

[carterm]

Changing required fields and visual 2/3 formatting... https://github.com/Office-of-Digital-Services/California-State-Web-Template-Website/pull/891

[carterm]

Changing field width to less that 100% https://github.com/Office-of-Digital-Services/California-State-Web-Template-Website/pull/896

[sharon-rabang]

@carterm Thanks for making the field adjustments! To help you follow @extinah's initial QA comments above, here are the related design specs and callouts. Please make these design fixes to match the Figma prototype: Contact us error messages Let us know if we can help with any questions and when the updates are ready for UX review, thanks!

[carterm]

@kkoryaka Any idea on what css classes to change to make this work?

[carterm]

https://github.com/Office-of-Digital-Services/California-State-Web-Template-Website/pull/901

[carterm]

https://github.com/Office-of-Digital-Services/California-State-Web-Template-Website/pull/911

[carterm]

Adding captcha support...https://github.com/Office-of-Digital-Services/California-State-Web-Template-Website/pull/920

[extinah]

@sharon-rabang: The design is a little wrong - only 3 fields are required. The other ones (main role, department) shouldn't have error messages. The only one is maybe for department if they put in something into the field they shouldn't or there's too many characters. We can chat more about the specs later today (I'll call you). cc: @carterm PS: Sorry so late - it's taken me 2 days to get through all my git notifications :)

[extinah]

Per our team sync this morning: @ashleydraper will work on:

• the confirmation page text. When drafted, send to Kon, Art, Koji, and myself for review. When approved, I'll add it to figma and then let carter/devs know.
• Looking to see if the form can be on the main contact us page. Set up a meeting with the UX team after an initial draft/recommendation.

I (@extinah) will work on the form details (error messages, field details, etc). Will work with UX team for input, and then @carterm and @kkoryaka for initial dev feedback. Then a quick review with Kon, @artuoma, and @rkojik .

cc: @yesenia-gtz

[ashleydraper]

Looking like a meeting is not necessary. Team agreed to use main contact us page to house the form.

[ashleydraper]

@carterm Here is the content for the submitted feedback form.

[ashleydraper]

We are deleting the current contact page (pictured) and replacing with content in this contact us doc. See edits in the document.

[carterm]

• Adding min/max length to fields. https://github.com/Office-of-Digital-Services/California-State-Web-Template-Website/pull/1020
• Adding server validation for fields https://github.com/Office-of-Digital-Services/cagov-form-post-service/pull/1

[extinah]

Per our team sync this morning: @ashleydraper will work on:

• the confirmation page text. When drafted, send to Kon, Art, Koji, and myself for review. When approved, I'll add it to figma and then let carter/devs know.
• Looking to see if the form can be on the main contact us page. Set up a meeting with the UX team after an initial draft/recommendation.

I (@extinah) will work on the form details (error messages, field details, etc). Will work with UX team for input, and then @carterm and @kkoryaka for initial dev feedback. Then a quick review with Kon, @artuoma, and @rkojik .

cc: @yesenia-gtz

@carterm Let's wait to make the changes until it's reviewed (or not close the ticket until then). Or feel free to make the content changes, but know there could be some edits. Thanks!

[ashleydraper]

The contact us page is ready for review. Sending to leads.

Also sharing the feedback page for review.

[extinah]

I made one small comment. Approved by me, thanks.

[yesenia-gtz]

@ashleydraper @extinah my review is complete, no additional feedback. Thank you!