SIA Web Design Library

Call to Action: Newsletter (themed page)

No notes defined.

<section class='c-cta 
            c-cta--newsletter
    '>
    <div class='c-cta__content-wrapper'>

        <h1 class='c-heading c-heading--blocky c-cta__heading'>
            Sign up to Spark
        </h1>

        <p>The only newsletter that truly captures the energy and excitement of social entrepreneurs around the world.</p>

        <div class='c-newsletter-form'>
            <form method="post" action="https://socialimpactaward.us16.list-manage.com/subscribe/post?u=76d31e6c87e88b1483ae9284d&amp;id=1d299537c9&amp;SIGNUP=Int-Website-Footer">
                <div class='form-row'>
                    <div class='form-group'>
                        <label for='EMAIL'>
                            <span class='form-field__label'>Email</span>
                            <input type='text' id='EMAIL' name='EMAIL' class='form-input form-input--email' type='email' placeholder='e.g. you@example.com' required='required' />
                        </label>
                        <input type='submit' name='subscribe' value='Subscribe' />
                    </div>
                </div>
                <div style="position: absolute; left: -5000px;" aria-hidden="true"><input tabindex="-1" name="b_76d31e6c87e88b1483ae9284d_1d299537c9" type="text" value=""></div>
            </form>
        </div>
    </div>
</section>
 
<section class='{{ get_component_class( 'cta', display ) }} 
    {% if type %}
        c-cta--{{ type }}
    {% endif %}'>
    <div class='c-cta__content-wrapper'>
        {% if notice %}
            {% include get_template( 'notice', 'unit' ) with notice %}
            {% set notice = NULL %}
        {% endif %}

        {% if icon %}
            {% include '@unit/icon/icon.twig' with icon|merge( { display: { component: 'cta', modifiers: [ 'double' ] } } ) %}
        {% endif %}

        {% if heading %}
            {% include '@unit/heading/heading.twig' with heading|merge( { display: { component: 'cta', modifiers: [ 'blocky' ] } } ) %}
        {% endif %}

        {% if text %}
            <p>{{ text|raw }}</p>
        {% endif %}

        {% if socialLinks %}
            {% include get_template( 'social-links', 'unit' ) with socialLinks %}
        {% elseif formTemplate %}
            {% include '@unit/forms/' ~ formTemplate ~ '.twig' %}
        {% elseif rendered %}
            {{ rendered|raw }}
        {% elseif button %}
            <p class='c-cta__action'>
                {% include get_template( 'button', 'base' ) with button|merge( { display: { theme: NULL } } ) %}
            </p>
        {% elseif link %}
            <p class='c-cta__action'>
                {% include get_template( 'link', 'base' ) with link|merge( { display: { modifiers: [ 'forward', 'with-icon', 'with-icon--reversed' ] } } ) %}
            </p>
        {% endif %}
    </div>
</section>
 
{
  "supraheading": "SIA Summit 2020",
  "heading": {
    "text": "Sign up to Spark"
  },
  "text": "The only newsletter that truly captures the energy and excitement of social entrepreneurs around the world.",
  "button": {
    "text": "Click here!",
    "url": "#"
  },
  "theme": "community",
  "type": "newsletter",
  "formTemplate": "newsletter-form",
  "action": "https://socialimpactaward.us16.list-manage.com/subscribe/post?u=76d31e6c87e88b1483ae9284d&amp;id=1d299537c9&amp;SIGNUP=Int-Website-Footer",
  "policyLink": {
    "text": "privacy policy page",
    "href": "https://socialimpactaward.net/privacy-policy/"
  }
}