selfhosted
/
formspree
mirror of https://github.com/formspree/formspree.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

improved on-page SEO (#193) 

* improved on-page SEO
* Better copy for title
This commit is contained in:
Cole 2018-09-01 16:47:51 -04:00 committed by GitHub
parent 5952be119b
commit e46ca2aa4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 1668 additions and 2808 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.gitignore vendored
View File

@ -57,15 +57,17 @@ nosetests.xml
codekit-config.json
.idea/*
.env
aliases.json
.env
.venv
dev.env
sta.env
pro.env
test.env
.vscode
celerybeat-schedule.db
.Python
include

4415
formspree/static/css/main.css
View File

File diff suppressed because it is too large Load Diff

3
formspree/static/scss/main.scss
View File

@ -52,7 +52,7 @@ body#card {
#title {
text-align: center;
margin-bottom: 3em;
h1 {
.h1-seo-hack {
font-size: 1.2em;
}
img {
@ -60,7 +60,6 @@ body#card {
}
}
.row.section {
padding-top: 5em;
padding-bottom: 5em;

26
formspree/static/scss/typography.scss
View File

@ -7,7 +7,8 @@ body {
font-family: $font-primary, $font-local, sans-serif;
}
h1, h2, h3, h4, h5, h6, p {
h1, h2, h3, h4, h5, h6, p,
.h1-seo-hack, .h2-seo-hack, .h3-seo-hack {
font-family: $font-primary, $font-local, sans-serif;
@ -26,7 +27,8 @@ h1, h2, h3, h4, h5, h6, p {
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
h1, h2, h3, h4, h5, h6,
.h1-seo-hack, .h2-seo-hack, .h3-seo-hack {
font-weight: 600;
line-height: 1.3em;
@ -64,3 +66,23 @@ a {
.caps {
text-transform: uppercase;
}
.h1-seo-hack {
font-size: $h1_font_size;
margin: $h1_margin;
display: block;
}
.h2-seo-hack {
font-size: $h2_font_size;
margin: $h2_margin;
display: block;
}
.h3-seo-hack {
font-size: $h3_font_size;
margin: $h3_margin;
display: block;
}

1
formspree/templates/layouts/base.html
View File

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>{% block title %}{{config.SERVICE_NAME}}{% endblock %}</title>
{% block meta %}{% endblock %}
<!-- google optimize and analytics -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;

25
formspree/templates/static_pages/index.html
View File

@ -2,19 +2,22 @@
{% block bodyid %}{% endblock %}
{% block title %}A Contact Form Backend for Static Sites | {{config.SERVICE_NAME}}{% endblock %}
{% block meta %}<meta name="description" content="Formspree is a form backend, API and email service for HTML forms. It’s the simplest way to embed custom contact us forms, order forms, or email capture forms on your static site."/>
{% endblock %}
{% block base %}
<div class="row section" id="header">
<div class="container" id="title">
<div class="col-1-1">
<img src="/static/img/logo.png" alt="" class="center animate dropIn">
<h1 class="center"><span class="caps">{{config.SERVICE_NAME}}</span></h1>
<p class="h1-seo-hack center"><span class="caps">{{config.SERVICE_NAME}}</span></p>
</div>
</div>
<div class="container">
<div class="col-1-2">
<h1 style="font-weight: 900;">Functional HTML forms</h1>
<h3 class="light">Just send your form to our URL and we'll forward it to your email. No PHP, Javascript or sign up required &mdash; <em>perfect for static sites!</em></h3>
<h1 style="font-weight: 900;">Carefree Contact Forms</h1>
<h2 class="h3-seo-hack light">Connect your forms to our endpoint and we’ll email you the submissions. No PHP, Javascript or sign up required &mdash; <em>perfect for static sites!</em></h2>
</div>
<div class="col-1-2">
<p>Example:</p>
@ -34,8 +37,8 @@
<div class="container narrow block">
<div class="col-1-1">
<h2>Setting it up is easy and free. Here's how:</h2>
<h3 class="light">You don't even have to register.</h3>
<p class="h2-seo-hack">Setting it up is easy and free. Here's how:</p>
<p class="h3-seo-hack light">You don't even have to register.</p>
</div>
</div>
@ -75,7 +78,7 @@
<div class="row section grey">
<div class="container block">
<div class="col-1-1"><h2>Some questions you might have:</h2></div>
<div class="col-1-1"><p class="h2-seo-hack">Some questions you might have:</p></div>
</div>
<div class="container block">
@ -114,7 +117,7 @@
<div class="container narrow block">
<div class="col-1-1">
<h2>Advanced features:</h2>
<p class="h2-seo-hack">Advanced features:</p>
<h4 class="light">Form inputs can have specially named <span class="code">name</span>-attributes, which alter functionality. They are all prefixed with an underscore.</h4>
</div>
</div>
@ -225,9 +228,9 @@
<div class="row section" id="plans">
<div class="container narrow block">
<div class="col-1-1">
<h2>For {{ config.SERVICE_NAME }} power users, we present <strong>{{ config.SERVICE_NAME }} {{ config.UPGRADED_PLAN_NAME }}</strong></h2>
<p class="h2-seo-hack">For {{ config.SERVICE_NAME }} power users, we present <strong>{{ config.SERVICE_NAME }} {{ config.UPGRADED_PLAN_NAME }}</strong></p>
<p class="center">{{ config.SERVICE_NAME }} {{ config.UPGRADED_PLAN_NAME }} costs</p>
<h1 class="center"><a class="button emphasis" href="{{ url_for('account') }}">$ 9.99</a></h1>
<p class="h1-seo-hack center"><a class="button emphasis" href="{{ url_for('account') }}">$ 9.99</a></p>
<p class="center">each month</p>
<p>Each {{ config.UPGRADED_PLAN_NAME }} account can have unlimited forms and unlimited verified emails, and all them get the <a href="#features">features listed below</a>.</p>
<a style="display: block" class="button center emphasis" href="{{ url_for('account') }}">Upgrade now</a>
@ -238,7 +241,7 @@
<div class="row section grey" id="features">
<div class="container narrow block">
<div class="col-1-1">
<h2>{{ config.UPGRADED_PLAN_NAME }} features:</h2>
<p class="h2-seo-hack">{{ config.UPGRADED_PLAN_NAME }} features:</p>
<h3 class="light">Extra limits and functionality for power users</h3>
</div>
</div>