The home page Request Information section...

On the home page for this template... there is a Request Information section just under the main slider... you can see it on the demo (I can't post my link as the site isn't done but no need - you can see it on the demo... the code you guys have on the demo is below... my question is where does the email go when the person hits the Request Information button? I have my email in every section I know in the backend and I never got it...

Here is the code for that you guys had for the widget position:

<form class="gk-information" action="#">
<div><strong>Have Questions?<br /> we're here for you</strong> <input name="full-name" type="text" placeholder="Full name" /> <input name="education-level" type="text" placeholder="Your education level" /> <input name="email" type="email" placeholder="Your e-mail" /> <input type="submit" value="Request information" /></div>
</form>

Hello,

It is only an empty form without any back-end functionality - you can cannot this form with your scripts using the action attribute in the <form> tag.

I would assume that since it came with the Quickstart install that it would work... I have been with you guys for years and never seen a template not have its functions work. This is strange. Also, your reply says, "you can cannot this form"... I am not sure what you mean... anyways - how can I make this form send the email like it's supposed to? Thanks

Hello,

It is only an empty form without any back-end functionality - you can cannot this form with your scripts using the action attribute in the <form> tag.

Sorry for mistake in my reply - there should be "can send" - most probably due editing the post I've removed and wrote the proper word.

This form is non-standard newsletter form and we decided to not connect it with newsletter plugins, because somebody can need to use it in other way.

If you want I can try to connect this form with i.e. contact form 7 plugin which will send you a formatted e-mail with details of the form.

Thanks for the fast response. I do have Contact 7 ("free version") on my install... as I use that plugin too... how do I connect that form with that styling and such to contact 7? PS - I am not allowed to give out backend access so if you could explain it to me here, that would be awesome.

In this case I'll send you at the evening the configuration of the form and widget - I'll need to reproduce it on my localhost.

ok - thanks a bunch!

Ok, please do the following things:

in the stuff.css file please replace the block starting with:

Code: Select all

/* Information form */

to:

Code: Select all

/* Information form */
.gk-information { padding: 28px 0; }
.gk-information { overflow: hidden; }
.gk-information > span,
.gk-information > input {
   float: left;
   margin: 0 0 0 2%;
   width: 19%;
}
.gk-information strong {
   color: #0f1725;
   float: left;
   font-size: 12px;
   font-weight: bold;
   line-height: 1.2;
   padding: 5px 20px 5px 70px;
   position: relative;
   width: 16%;
}
.gk-information strong:before {
   color: #d1d1d1;
   content: 'f';
   font-family: university-pixellove;
   font-size: 40px;
   font-weight: 300;
   left: 0;
   position: absolute;
   top: -5px;
}
.gk-information input[type="submit"] {
   background: #52b5fa;
   border: none;
}
.gk-information input[type="submit"]:active,
.gk-information input[type="submit"]:focus,
.gk-information input[type="submit"]:hover { background: #fa7252; }

The above code will adjust for the Contact Form 7 output.

Then please create a new form with the following structure:

Code: Select all

<div class="gk-information">
<strong>Get info based on<br /> your study lavel</strong> [text* your-name placeholder "Full name"][text* text-796 placeholder "Your education level"][email* your-email placeholder="Your e-mail"][submit "Request information"]
</div>

Value text-796 will probably change to other value - you have to create a new field for the education level - please look at the attachment new-field.

Then please modify the e-mails like in the attachment emails.

When you save your form you have to copy the form shortcode to the header bottom text widget. In my case it was:

Code: Select all

[contact-form-7 id="2336" title="Contact form 1"]

The last step are small changes in the mobile CSS.

desktop.small.css - please replace the following code:

Code: Select all

.gk-information > div > strong {
   width: 20%;
}
.gk-information > div > input {
   width: 18%;
}

to:

Code: Select all

.gk-information strong {
   width: 20%;
}
.gk-information span {
   width: 18%;
}

tablet.css please replace:

Code: Select all

.gk-information {
   padding: 12px 0;
}
.gk-information > div > strong {
   font-size: 11px;
   padding: 5px 10px 5px 50px;
}
.gk-information > div > input {
   margin-left: 0.5%;
}
.gk-information > div > input {
   width: 18%;
}
.gk-information > div > input[type="submit"] {
   width: 22.5%;
}

to:

Code: Select all

.gk-information {
   padding: 12px 0;
}
.gk-information strong {
   font-size: 11px;
   padding: 5px 10px 5px 50px;
}
.gk-information span {
   margin-left: 0.5%;
}
.gk-information span {
   width: 18%;
}
.gk-information input[type="submit"] {
   width: 22.5%;
}

small.tablet.css - please replace:

Code: Select all

.gk-information > div > strong {
   padding: 30px 0 30px 50px;
   width: 33.333333%;
}
.gk-information > div > strong:before {
   top: 20px;
}
.gk-information > div input {
   margin-bottom: 1%;
   margin-left: 1%;
   width: 32.333333%!important;
}

to:

Code: Select all

.gk-information strong {
   padding: 30px 0 30px 50px;
   width: 33.333333%;
}
.gk-information strong:before {
   top: 20px;
}
.gk-information span,
.gk-information > input {
   margin-bottom: 1%;
   margin-left: 1%;
   width: 32.333333%!important;
}

mobile.css please replace:

Code: Select all

.gk-information > div > strong {
   width: 100%;
}
.gk-information > div input {
   width: 99%!important;
}

to:

Code: Select all

.gk-information strong {
   width: 100%;
}
.gk-information input,
.gk-information span {
   width: 99%!important;
}

WOW, thanks for this... awesome service! Can you check out this other post I did on something else - they guy never came back: https://www.gavick.com/forums/game/meny ... 37999.html

Ok, please do the following things:

in the stuff.css file please replace the block starting with:

Code: Select all

/* Information form */

to:

Code: Select all

/* Information form */
.gk-information { padding: 28px 0; }
.gk-information { overflow: hidden; }
.gk-information > span,
.gk-information > input {
   float: left;
   margin: 0 0 0 2%;
   width: 19%;
}
.gk-information strong {
   color: #0f1725;
   float: left;
   font-size: 12px;
   font-weight: bold;
   line-height: 1.2;
   padding: 5px 20px 5px 70px;
   position: relative;
   width: 16%;
}
.gk-information strong:before {
   color: #d1d1d1;
   content: 'f';
   font-family: university-pixellove;
   font-size: 40px;
   font-weight: 300;
   left: 0;
   position: absolute;
   top: -5px;
}
.gk-information input[type="submit"] {
   background: #52b5fa;
   border: none;
}
.gk-information input[type="submit"]:active,
.gk-information input[type="submit"]:focus,
.gk-information input[type="submit"]:hover { background: #fa7252; }

The above code will adjust for the Contact Form 7 output.

Then please create a new form with the following structure:

Code: Select all

<div class="gk-information">
<strong>Get info based on<br /> your study lavel</strong> [text* your-name placeholder "Full name"][text* text-796 placeholder "Your education level"][email* your-email placeholder="Your e-mail"][submit "Request information"]
</div>

Value text-796 will probably change to other value - you have to create a new field for the education level - please look at the attachment new-field.

Then please modify the e-mails like in the attachment emails.

When you save your form you have to copy the form shortcode to the header bottom text widget. In my case it was:

Code: Select all

[contact-form-7 id="2336" title="Contact form 1"]

The last step are small changes in the mobile CSS.

desktop.small.css - please replace the following code:

Code: Select all

.gk-information > div > strong {
   width: 20%;
}
.gk-information > div > input {
   width: 18%;
}

to:

Code: Select all

.gk-information strong {
   width: 20%;
}
.gk-information span {
   width: 18%;
}

tablet.css please replace:

Code: Select all

.gk-information {
   padding: 12px 0;
}
.gk-information > div > strong {
   font-size: 11px;
   padding: 5px 10px 5px 50px;
}
.gk-information > div > input {
   margin-left: 0.5%;
}
.gk-information > div > input {
   width: 18%;
}
.gk-information > div > input[type="submit"] {
   width: 22.5%;
}

to:

Code: Select all

.gk-information {
   padding: 12px 0;
}
.gk-information strong {
   font-size: 11px;
   padding: 5px 10px 5px 50px;
}
.gk-information span {
   margin-left: 0.5%;
}
.gk-information span {
   width: 18%;
}
.gk-information input[type="submit"] {
   width: 22.5%;
}

small.tablet.css - please replace:

Code: Select all

.gk-information > div > strong {
   padding: 30px 0 30px 50px;
   width: 33.333333%;
}
.gk-information > div > strong:before {
   top: 20px;
}
.gk-information > div input {
   margin-bottom: 1%;
   margin-left: 1%;
   width: 32.333333%!important;
}

to:

Code: Select all

.gk-information strong {
   padding: 30px 0 30px 50px;
   width: 33.333333%;
}
.gk-information strong:before {
   top: 20px;
}
.gk-information span,
.gk-information > input {
   margin-bottom: 1%;
   margin-left: 1%;
   width: 32.333333%!important;
}

mobile.css please replace:

Code: Select all

.gk-information > div > strong {
   width: 100%;
}
.gk-information > div input {
   width: 99%!important;
}

to:

Code: Select all

.gk-information strong {
   width: 100%;
}
.gk-information input,
.gk-information span {
   width: 99%!important;
}

I have sent a message to this moderator - I hope that you will get your reply soon.

Hi,

How do you remove or change the "gk-icon-education" icon to the left of the form?

Thanks!

Al

This icon is defined as following code in the css/gk.stuff.css file:

Code: Select all

.gkInformation > div > strong:before {
   color: #d1d1d1;
   content: 'f';
   font-family: university-pixellove;
   font-size: 40px;
   font-weight: 300;
   left: 0;
   position: absolute;
   top: -5px;
}

Thanks. Excuse my ignorance - if I remove the entire code, it will remove the icon. Or do I just edit a part of it?

Thanks!

Al

By removing the mentioned code you will remove the whole icon, because the code creates a pseudo-element with the icon.

Hi,

Regarding this issue, I built a simple PHP script for sending the email. But I want to send the form via POST, and for some reason the form sends it via GET (and with no form data), regardless if I write "method='post'" on it.

I think some javascript is changing the submit event of the forms. Is there a way to change this behavior? Am I doing something wrong?

Thank you for your support!

@oliver_etchbarne - please provide an URL to your form.

Turns out in the production server the form works fine the problem seem to be in my dev server.

Nevermind. Thanks