If you'd like to create a simple sign up form with just an email address capture, here's the settings and code to do this.

This is how it will look

(Desktop)

(Mobile)

Form Settings

CSS

You'll want to customise the colors to your own branding, but here is the basic code to copy and paste into the CSS tab in the form editor. N.B. This will replace what is in the CSS tab currently. 

.rf-subscription-form-container {
  display: block;
  float: none;
}

.rf-form {
  margin-top: 15px;
  width: 100%;
}

.rf-header h3 {
  display:none;
}

.rf-preamble {
  display:none;
}

.rf-form label {
  width: 100%;
}
.rf-input {
  margin-bottom:10px;
  width: 100%;
  padding:11px;
  border:1px solid #000;
  border-radius:0;
}
.rf-btn {
 width:100%;
}

.rf-form button {
  float: left;
  background: #6a9d26;
  color: #fff;
  border: 0;
  padding: 12px 28px;
  font-size: 1em;
  font-weight:normal;
  width:100%;
}

.rf-form button:hover {
  background-color:#000;
  color:#fff;
}

.rf-invalid {
  border-radius: 5px;
  margin: 10px 0px 0px;
  padding: 5px 10px;
  background-color: #ffe0e0;
}

.rf-subscribed {
  padding:10px 0;
  color:#000;
}

::-webkit-input-placeholder {
  color: #000;
  font-weight:normal;
}

::-webkit-input-placeholder {
  color: #000;
  font-weight:normal;
}

::-moz-placeholder {
  color: #000;
  font-weight:normal;
}

:-ms-input-placeholder {
  color: #000;
  font-weight:normal;
}

@media screen and (min-width: 480px) {

.rf-form label {
  width: 65% !important;
  float:left !important;
}

.rf-form button {
  margin-left:8px;
  width:auto !important;
}

.rf-input {
  margin-bottom:0 !important;
}

Tips

Installation instructions can be found here.

Adding your signup form to a Shopify store?

  1. The file to edit usually begins with "newsletter".
  2. To replace the Shopify signup form remove from the start of {% form 'customer' %} and the end of   {% endform %}
  3. If you then want to add a signup header and message, you can do that in Shopify when you click on Customize (for your theme).

Preventing CSS clashes with other Conversio forms

  1. Wrap your {% include 'conversiowidget' with 'my-cool-form-0' %} in a div with an ID attribute, e.g.
    <div id="footersignup">
        {% include 'conversiowidget' with 'my-cool-form-0' %}
    </div>

    when adding it to your site.
  2. Then add the ID prefix to all your css in Conversio's signup form editor, e.g.
    .rf-subscription-form-container {
      display: block;
      float: none;
    }

    will now become
    #footersignup .rf-subscription-form-container {
      display: block;
      float: none;
    }

Don't forget 

You may also want to select "Subscribed" from the email form state and change the subscription message, especially if you've disabled opt-in confirmation, plus the "Invalid Address" state to customise the message there too.

Did this answer your question?