Styling an optin form

I am almost finished styling an optin form at GoRefire.com. However, I have three more things to do:

  1. want to lose the label “Email”
  2. bring the email and button fields up one line where the email label was
  3. and expand the email and button fields to across the form.

Here is an image of how I’d like the form to look.

I tried to make changes to the code, but the email and button fields did not align. I’ll appreciate help getting the code to make the form look right.

I have attached the code.Home Page Optin ActiveCampaign.txt (20.2 KB)

Hi there paulcj2,

you really should not remove form label elements;
they are required for accessibility purposes. :winky:

Unfortunately, “Wordpress”, in it’s infinite wisdom,
sees no reason to code them correctly by linking
them to their relevant elements. :wonky:

Using the “placeholder attribute” as a replacement
instead of an addition is just another example of the
trend to use arty-farty nonsense at the expense of
those that are less fortunate. :wonky:

Some Further Reading:-

            http://webaim.org/techniques/formvalidation/#hiding

coothead

7 Likes

Looking at your code, I think the first thing to do is to rename all illegal ID and CLASS names.

Please check: http://htmlhelp.com/reference/html40/attrs.html

Quote:

The attribute’s value must begin with a letter in the range A-Z or a-z
and may be followed by letters (A-Za-z), digits (0-9), hyphens (“-”),
underscores (“_”), colons (“:”), and periods (“.”). The value is
case-sensitive.

Edit)
The same info is here too:

1 Like

Hi there paulcj2,

notwithstanding all that @Erik_J has pointed out,
with regard to your “id” and “class” names, I have
amended the code, that you attached, to place the
three elements in question on a single line. :winky:

Home-Page-Optin-Active-Campaign.txt (21.3 KB)

coothead

1 Like

Hi there paulcj2,

< offtopic >

I notice that this folder at…

http://gorefire.com/wp-content/uploads/

…is still open to public view. :eek:

Possible solutions to this problem were offered in this thread…

How do you change perspective in Photoshop CC?

< /offtopic >

coothead

1 Like

I hopefully removed all starting underscores from the CSS and HTML and Javascript sections without compromising the code. Don’t worry, there are a total of 355 “legal” bits of them left in the code:

Home-Page-Optin-Active-Campaign-X_.txt (21.0 KB)

1 Like

Hi there Erik_J,

I was wary of doing that because the CSS
may also apply to other parts of his site. :wonky:

We will probably find out in the fullness of time. :winky:

coothead

Yes, but I already checked all css-files linked to at his site. It appeares those underscore-names are only used in the embedded css and scripts and in the html.

As you posted the mended code I could remove the forbidden underscores in all instances in a copy so OP has the choice.

Edit)

I just checked the live page and there are a few more inappropriate underscores in an embedded javascript.

So I imported all code in the page to my editor and made a quick search and remove for all those underscores. Then, when I was about to reformat the code to proper indentation I saw some more forbidden attributes, so I stopped and didn’t finish.

Sorry, I am that lazy.

3 Likes

Thanks. That looks much better. Home Page

 
 
 
            No problem, you’re very welcome. :sunglasses:
 
 
      coothead

Hi Coolhead,

For some reason the form is no longer submitting emails. Can you see why and fix it?
http://gorefire.com/

Here is the original code from ActiveCampaign

<style>
 #_form_5_ { font-size:14px; line-height:1.6; font-family:arial, helvetica, sans-serif; margin:0; }
 #_form_5_ * { outline:0; }
 ._form_hide { display:none; visibility:hidden; }
 ._form_show { display:block; visibility:visible; }
 #_form_5_._form-top { top:0; }
 #_form_5_._form-bottom { bottom:0; }
 #_form_5_._form-left { left:0; }
 #_form_5_._form-right { right:0; }
 #_form_5_ input[type="text"],#_form_5_ input[type="date"],#_form_5_ textarea { padding:6px; height:auto; border:#979797 1px solid; border-radius:4px; color:#000 !important; font-size:13px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
 #_form_5_ textarea { resize:none; }
 #_form_5_ ._submit { -webkit-appearance:none; cursor:pointer; font-family:arial, sans-serif; font-size:14px; text-align:center; background:#d12e22 !important; border:0 !important; -moz-border-radius:4px !important; -webkit-border-radius:4px !important; border-radius:4px !important; color:#fff !important; padding:10px !important; }
 #_form_5_ ._close-icon { cursor:pointer; background-image:url('https://d226aj4ao1t61q.cloudfront.net/esfkyjh1u_forms-close-dark.png'); background-repeat:no-repeat; background-size:14.2px 14.2px; position:absolute; display:block; top:11px; right:9px; overflow:hidden; width:16.2px; height:16.2px; }
 #_form_5_ ._close-icon:before { position:relative; }
 #_form_5_ ._form-body { margin-bottom:30px; }
 #_form_5_ ._form-image-left { width:150px; float:left; }
 #_form_5_ ._form-content-right { margin-left:164px; }
 #_form_5_ ._form-branding { color:#fff; font-size:10px; clear:both; text-align:left; margin-top:30px; font-weight:100; }
 #_form_5_ ._form-branding ._logo { display:block; width:130px; height:14px; margin-top:6px; background-image:url('https://d226aj4ao1t61q.cloudfront.net/hh9ujqgv5_aclogo_li.png'); background-size:130px auto; background-repeat:no-repeat; }
 #_form_5_ ._form-label,#_form_5_ ._form_element ._form-label { font-weight:bold; margin-bottom:5px; display:block; }
 #_form_5_._dark ._form-branding { color:#333; }
 #_form_5_._dark ._form-branding ._logo { background-image:url('https://d226aj4ao1t61q.cloudfront.net/jftq2c8s_aclogo_dk.png'); }
 #_form_5_ ._form_element { position:relative; margin-bottom:10px; font-size:0; max-width:100%; }
 #_form_5_ ._form_element * { font-size:14px; }
 #_form_5_ ._form_element._clear { clear:both; width:100%; float:none; }
 #_form_5_ ._form_element._clear:after { clear:left; }
 #_form_5_ ._form_element input[type="text"],#_form_5_ ._form_element input[type="date"],#_form_5_ ._form_element select,#_form_5_ ._form_element textarea:not(.g-recaptcha-response) { display:block; width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
 #_form_5_ ._field-wrapper { position:relative; }
 #_form_5_ ._inline-style { float:left; }
 #_form_5_ ._inline-style input[type="text"] { width:150px; }
 #_form_5_ ._inline-style:not(._clear) + ._inline-style:not(._clear) { margin-left:20px; }
 #_form_5_ ._form_element img._form-image { max-width:100%; }
 #_form_5_ ._clear-element { clear:left; }
 #_form_5_ ._full_width { width:100%; }
 #_form_5_ ._form_full_field { display:block; width:100%; margin-bottom:10px; }
 #_form_5_ input[type="text"]._has_error,#_form_5_ textarea._has_error { border:#f37c7b 1px solid; }
 #_form_5_ input[type="checkbox"]._has_error { outline:#f37c7b 1px solid; }
 #_form_5_ ._error { display:block; position:absolute; font-size:13px; z-index:10000001; }
 #_form_5_ ._error._above { padding-bottom:4px; top:-41px; right:0; }
 #_form_5_ ._error._below { padding-top:4px; top:100%; right:0; }
 #_form_5_ ._error._above ._error-arrow { bottom:0; right:15px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #f37c7b; }
 #_form_5_ ._error._below ._error-arrow { top:0; right:15px; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:5px solid #f37c7b; }
 #_form_5_ ._error-inner { padding:8px 12px; background-color:#f37c7b; font-size:13px; font-family:arial, sans-serif; color:#fff; text-align:center; text-decoration:none; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; }
 #_form_5_ ._error-inner._form_error { margin-bottom:5px; text-align:left; }
 #_form_5_ ._button-wrapper ._error-inner._form_error { position:static; }
 #_form_5_ ._error-inner._no_arrow { margin-bottom:10px; }
 #_form_5_ ._error-arrow { position:absolute; width:0; height:0; }
 #_form_5_ ._error-html { margin-bottom:10px; }
 .pika-single { z-index:10000001 !important; }
 @media all and (min-width:320px) and (max-width:667px) { ::-webkit-scrollbar { display:none; }
 #_form_5_ { margin:0; width:100%; min-width:100%; max-width:100%; box-sizing:border-box; }
 #_form_5_ * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-size:1em; }
 #_form_5_ ._form-content { margin:0; width:100%; }
 #_form_5_ ._form-inner { display:block; min-width:100%; }
 #_form_5_ ._form-title,#_form_5_ ._inline-style { margin-top:0; margin-right:0; margin-left:0; }
 #_form_5_ ._form-title { font-size:1.2em; }
 #_form_5_ ._form_element { margin:0 0 20px; padding:0; width:100%; }
 #_form_5_ ._form-element,#_form_5_ ._inline-style,#_form_5_ input[type="text"],#_form_5_ label,#_form_5_ p,#_form_5_ textarea:not(.g-recaptcha-response) { float:none; display:block; width:100%; }
 #_form_5_ ._row,#_form_5_ p,#_form_5_ label { margin-bottom:0.7em; width:100%; }
 #_form_5_ ._row input[type="checkbox"],#_form_5_ ._row input[type="radio"] { margin:0 !important; vertical-align:middle !important; }
 #_form_5_ ._row input[type="checkbox"] + span label { display:inline; }
 #_form_5_ ._row span label { margin:0 !important; width:initial !important; vertical-align:middle !important; }
 #_form_5_ ._form-image { max-width:100%; height:auto !important; }
 #_form_5_ input[type="text"] { padding-left:10px; padding-right:10px; font-size:16px; line-height:1.3em; -webkit-appearance:none; }
 #_form_5_ input[type="radio"],#_form_5_ input[type="checkbox"] { display:inline-block; width:1.3em; height:1.3em; font-size:1em; margin:0 0.3em 0 0; vertical-align:baseline; }
 #_form_5_ button[type="submit"] { padding:20px; font-size:1.5em; }
 #_form_5_ ._inline-style { margin:20px 0 0 !important; }
 }
 #_form_5_ { position:relative; text-align:left; margin:25px auto 0; padding:20px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; *zoom:1; background:#fff !important; border:2px solid #b0b0b0 !important; -moz-border-radius:12px !important; -webkit-border-radius:12px !important; border-radius:12px !important; color:#575252 !important; }
 #_form_5_ ._form-title { font-size:22px; line-height:22px; font-weight:600; margin-bottom:0; }
 #_form_5_:before,#_form_5_:after { content:" "; display:table; }
 #_form_5_:after { clear:both; }
 #_form_5_._inline-style { width:auto; display:inline-block; }
 #_form_5_._inline-style input[type="text"],#_form_5_._inline-style input[type="date"] { padding:10px 12px; }
 #_form_5_._inline-style button._inline-style { position:relative; top:27px; }
 #_form_5_._inline-style p { margin:0; }
 #_form_5_._inline-style ._button-wrapper { position:relative; margin:27px 12.5px 0 20px; }
 #_form_5_ ._form-thank-you { position:relative; left:0; right:0; text-align:center; font-size:18px; }
 @media all and (min-width:320px) and (max-width:667px) { #_form_5_._inline-form._inline-style ._inline-style._button-wrapper { margin-top:20px !important; margin-left:0 !important; }
 }
</style>
<div style="text-align: center;">
  <form method="POST" action="https://gorefire.activehosted.com/proc.php" id="_form_5_" class="_form _form_5 _inline-form _inline-style _dark" novalidate>
    <input type="hidden" name="u" value="5" />
    <input type="hidden" name="f" value="5" />
    <input type="hidden" name="s" />
    <input type="hidden" name="c" value="0" />
    <input type="hidden" name="m" value="0" />
    <input type="hidden" name="act" value="sub" />
    <input type="hidden" name="v" value="2" />
    <div class="_form-content">
      <div class="_form_element _x61674164 _inline-style _clear" >
        <div class="_form-title">
          Join Paul&#039;s online reFirement community now...
        </div>
      </div>
      <div class="_form_element _x74231117 _inline-style _clear" >
        <div class="_html-code">
          <p>
            and get your free reFirement Map  eBook.
          </p>
        </div>
      </div>
      <div class="_form_element _x33192599 _inline-style " >
        <label class="_form-label">
          Email*
        </label>
        <div class="_field-wrapper">
          <input type="text" name="email" placeholder="Type your email" required/>
        </div>
      </div>
      <div class="_button-wrapper _inline-style">
        <button id="_form_5_submit" class="_submit" type="submit">
          Submit
        </button>
      </div>
      <div class="_clear-element">
      </div>
    </div>
    <div class="_form-thank-you" style="display:none;">
    </div>
    <div class="_form-branding">
      <div class="_marketing-by">
        Marketing by
      </div>
      <a href="http://www.activecampaign.com" class="_logo"></a>
    </div>
  </form>
</div><script type="text/javascript">
window.cfields = [];
window._show_thank_you = function(id, message, trackcmp_url) {
  var form = document.getElementById('_form_' + id + '_'), thank_you = form.querySelector('._form-thank-you');
  form.querySelector('._form-content').style.display = 'none';
  thank_you.innerHTML = message;
  thank_you.style.display = 'block';
  if (typeof(trackcmp_url) != 'undefined' && trackcmp_url) {
    // Site tracking URL to use after inline form submission.
    _load_script(trackcmp_url);
  }
  if (typeof window._form_callback !== 'undefined') window._form_callback(id);
};
window._show_error = function(id, message, html) {
  var form = document.getElementById('_form_' + id + '_'), err = document.createElement('div'), button = form.querySelector('button'), old_error = form.querySelector('._form_error');
  if (old_error) old_error.parentNode.removeChild(old_error);
  err.innerHTML = message;
  err.className = '_error-inner _form_error _no_arrow';
  var wrapper = document.createElement('div');
  wrapper.className = '_form-inner';
  wrapper.appendChild(err);
  button.parentNode.insertBefore(wrapper, button);
  if (html) {
    var div = document.createElement('div');
    div.className = '_error-html';
    div.innerHTML = html;
    err.appendChild(div);
  }
};
window._load_script = function(url, callback) {
    var head = document.querySelector('head'), script = document.createElement('script'), r = false;
    script.type = 'text/javascript';
    script.charset = 'utf-8';
    script.src = url;
    if (callback) {
      script.onload = script.onreadystatechange = function() {
      if (!r && (!this.readyState || this.readyState == 'complete')) {
        r = true;
        callback();
        }
      };
    }
    head.appendChild(script);
};
(function() {
  if (window.location.search.search("excludeform") !== -1) return false;
  var getCookie = function(name) {
    var match = document.cookie.match(new RegExp('(^|; )' + name + '=([^;]+)'));
    return match ? match[2] : null;
  }
  var setCookie = function(name, value) {
    var now = new Date();
    var time = now.getTime();
    var expireTime = time + 1000 * 60 * 60 * 24 * 365;
    now.setTime(expireTime);
    document.cookie = name + '=' + value + '; expires=' + now + ';path=/';
  }
      var addEvent = function(element, event, func) {
    if (element.addEventListener) {
      element.addEventListener(event, func);
    } else {
      var oldFunc = element['on' + event];
      element['on' + event] = function() {
        oldFunc.apply(this, arguments);
        func.apply(this, arguments);
      };
    }
  }
  var _removed = false;
  var form_to_submit = document.getElementById('_form_5_');
  var allInputs = form_to_submit.querySelectorAll('input, select, textarea'), tooltips = [], submitted = false;

  var getUrlParam = function(name) {
    var regexStr = '[\?&]' + name + '=([^&#]*)';
    var results = new RegExp(regexStr, 'i').exec(window.location.href);
    return results != undefined ? decodeURIComponent(results[1]) : false;
  };

  for (var i = 0; i < allInputs.length; i++) {
    var regexStr = "field\\[(\\d+)\\]";
    var results = new RegExp(regexStr).exec(allInputs[i].name);
    if (results != undefined) {
      allInputs[i].dataset.name = window.cfields[results[1]];
    } else {
      allInputs[i].dataset.name = allInputs[i].name;
    }
    var fieldVal = getUrlParam(allInputs[i].dataset.name);

    if (fieldVal) {
      if (allInputs[i].type == "radio" || allInputs[i].type == "checkbox") {
        if (allInputs[i].value == fieldVal) {
          allInputs[i].checked = true;
        }
      } else {
        allInputs[i].value = fieldVal;
      }
    }
  }

  var remove_tooltips = function() {
    for (var i = 0; i < tooltips.length; i++) {
      tooltips[i].tip.parentNode.removeChild(tooltips[i].tip);
    }
      tooltips = [];
  };
  var remove_tooltip = function(elem) {
    for (var i = 0; i < tooltips.length; i++) {
      if (tooltips[i].elem === elem) {
        tooltips[i].tip.parentNode.removeChild(tooltips[i].tip);
        tooltips.splice(i, 1);
        return;
      }
    }
  };
  var create_tooltip = function(elem, text) {
    var tooltip = document.createElement('div'), arrow = document.createElement('div'), inner = document.createElement('div'), new_tooltip = {};
    if (elem.type != 'radio' && elem.type != 'checkbox') {
      tooltip.className = '_error';
      arrow.className = '_error-arrow';
      inner.className = '_error-inner';
      inner.innerHTML = text;
      tooltip.appendChild(arrow);
      tooltip.appendChild(inner);
      elem.parentNode.appendChild(tooltip);
    } else {
      tooltip.className = '_error-inner _no_arrow';
      tooltip.innerHTML = text;
      elem.parentNode.insertBefore(tooltip, elem);
      new_tooltip.no_arrow = true;
    }
    new_tooltip.tip = tooltip;
    new_tooltip.elem = elem;
    tooltips.push(new_tooltip);
    return new_tooltip;
  };
  var resize_tooltip = function(tooltip) {
    var rect = tooltip.elem.getBoundingClientRect();
    var doc = document.documentElement, scrollPosition = rect.top - ((window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0));
    if (scrollPosition < 40) {
      tooltip.tip.className = tooltip.tip.className.replace(/ ?(_above|_below) ?/g, '') + ' _below';
    } else {
      tooltip.tip.className = tooltip.tip.className.replace(/ ?(_above|_below) ?/g, '') + ' _above';
    }
  };
  var resize_tooltips = function() {
    if (_removed) return;
    for (var i = 0; i < tooltips.length; i++) {
      if (!tooltips[i].no_arrow) resize_tooltip(tooltips[i]);
    }
  };
  var validate_field = function(elem, remove) {
    var tooltip = null, value = elem.value, no_error = true;
    remove ? remove_tooltip(elem) : false;
    if (elem.type != 'checkbox') elem.className = elem.className.replace(/ ?_has_error ?/g, '');
    if (elem.getAttribute('required') !== null) {
      if (elem.type == 'radio' || (elem.type == 'checkbox' && /any/.test(elem.className))) {
        var elems = form_to_submit.elements[elem.name];
        no_error = false;
        for (var i = 0; i < elems.length; i++) {
          if (elems[i].checked) no_error = true;
        }
        if (!no_error) {
          tooltip = create_tooltip(elem, "Please select an option.");
        }
      } else if (elem.type =='checkbox') {
        var elems = form_to_submit.elements[elem.name], found = false, err = [];
        no_error = true;
        for (var i = 0; i < elems.length; i++) {
          if (elems[i].getAttribute('required') === null) continue;
          if (!found && elems[i] !== elem) return true;
          found = true;
          elems[i].className = elems[i].className.replace(/ ?_has_error ?/g, '');
          if (!elems[i].checked) {
            no_error = false;
            elems[i].className = elems[i].className + ' _has_error';
            err.push("Checking %s is required".replace("%s", elems[i].value));
          }
        }
        if (!no_error) {
          tooltip = create_tooltip(elem, err.join('<br/>'));
        }
      } else if (elem.tagName == 'SELECT') {
        var selected = true;
        if (elem.multiple) {
          selected = false;
          for (var i = 0; i < elem.options.length; i++) {
            if (elem.options[i].selected) {
              selected = true;
              break;
            }
          }
        } else {
          for (var i = 0; i < elem.options.length; i++) {
            if (elem.options[i].selected && !elem.options[i].value) {
              selected = false;
            }
          }
        }
        if (!selected) {
          no_error = false;
          tooltip = create_tooltip(elem, "Please select an option.");
        }
      } else if (value === undefined || value === null || value === '') {
        elem.className = elem.className + ' _has_error';
        no_error = false;
        tooltip = create_tooltip(elem, "This field is required.");
      }
    }
    if (no_error && elem.name == 'email') {
      if (!value.match(/^[\+_a-z0-9-'&=]+(\.[\+_a-z0-9-']+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/i)) {
        elem.className = elem.className + ' _has_error';
        no_error = false;
        tooltip = create_tooltip(elem, "Enter a valid email address.");
      }
    }
    if (no_error && /date_field/.test(elem.className)) {
      if (!value.match(/^\d\d\d\d-\d\d-\d\d$/)) {
        elem.className = elem.className + ' _has_error';
        no_error = false;
        tooltip = create_tooltip(elem, "Enter a valid date.");
      }
    }
    tooltip ? resize_tooltip(tooltip) : false;
    return no_error;
  };
  var needs_validate = function(el) {
    return el.name == 'email' || el.getAttribute('required') !== null;
  };
  var validate_form = function(e) {
    var err = form_to_submit.querySelector('._form_error'), no_error = true;
    if (!submitted) {
      submitted = true;
      for (var i = 0, len = allInputs.length; i < len; i++) {
        var input = allInputs[i];
        if (needs_validate(input)) {
          if (input.type == 'text') {
            addEvent(input, 'blur', function() {
              this.value = this.value.trim();
              validate_field(this, true);
            });
            addEvent(input, 'input', function() {
              validate_field(this, true);
            });
          } else if (input.type == 'radio' || input.type == 'checkbox') {
            (function(el) {
              var radios = form_to_submit.elements[el.name];
              for (var i = 0; i < radios.length; i++) {
                addEvent(radios[i], 'click', function() {
                  validate_field(el, true);
                });
              }
            })(input);
          } else if (input.tagName == 'SELECT') {
            addEvent(input, 'change', function() {
              validate_field(input, true);
            });
          }
        }
      }
    }
    remove_tooltips();
    for (var i = 0, len = allInputs.length; i < len; i++) {
      var elem = allInputs[i];
      if (needs_validate(elem)) {
        elem.value = elem.value.trim();
        validate_field(elem) ? true : no_error = false;
      }
    }
    if (!no_error && e) {
      e.preventDefault();
    }
    resize_tooltips();
    return no_error;
  };
  addEvent(window, 'resize', resize_tooltips);
  addEvent(window, 'scroll', resize_tooltips);
  window._old_serialize = null;
  if (typeof serialize !== 'undefined') window._old_serialize = window.serialize;
  _load_script("//d3rxaij56vjege.cloudfront.net/form-serialize/0.3/serialize.min.js", function() {
    window._form_serialize = window.serialize;
    if (window._old_serialize) window.serialize = window._old_serialize;
  });
  var form_submit = function(e) {
    e.preventDefault();
    if (validate_form()) {
      // use this trick to get the submit button & disable it using plain javascript
      document.querySelector('[id^="_form"][id$="_submit"]').disabled = true;
            var serialized = _form_serialize(document.getElementById('_form_5_'));
      var err = form_to_submit.querySelector('._form_error');
      err ? err.parentNode.removeChild(err) : false;
      _load_script('https://gorefire.activehosted.com/proc.php?' + serialized + '&jsonp=true');
    }
    return false;
  };
  addEvent(form_to_submit, 'submit', form_submit);
})();

</script>

Hi there paulcj2,

form non-submission is definitely not a CSS problem. :unhappy:

A quick click of one of my special “buttons” namely -

            "Disable All JavaScript"

…immediately allowed the form submission to proceed. :winky:

You will have to find out which of the document’s 24 script
files is causing the problem. :wonky:

coothead

2 Likes

Hi there paulcj2,

I am not in a cantankerous mood this evening, so I thought that
I would track down the offending"JavaScript" for your reference,
and also for anyone who might be willing to correct it. :winky:

The cause of the form submission problem may be found lurking
somewhere between lines #287 to #574 of the document. :shifty:

coothead

Thanks coothead. I’m glad you are not in a cantankerous mood this evening.

However, I guess I will have to wait for someone to help me further track the issue, as I am not a JavaHead.

By the way, I’m using the original code, and the submit button works fine. It’s just that the layout sucks, which is what I was trying to fix in the first place.

Hi there paulj2,

try adding this…

<base href="http://gorefire.com/">

…here…

<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" lang="en-US" prefix="og: http://ogp.me/ns#">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="en-US" prefix="og: http://ogp.me/ns#">
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<!--<![endif]-->
<head>
<base href="http://gorefire.com/">
<style type="text/css"> .ttfm1{font-family: 'Lato';font-size:0em;line-height:1.6em;color:;}  .ttfm2{font-family: 'Poppins';font-size:1.6em;line-height:1.6em;color:;} </style>	
<meta charset="UTF-8"/>

coothead

Thanks, coothead. I’ll need to contact the makers of the theme to figure out how to add this.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.