Creating a simple e-mail sign-up form in Artisteer...


Author Message
Dave

Posted: 7/17/2014
Quote message 

Would someone enlighten me as to how I can create an e-mail sign-up form, within Artisteer, that is situated in the footer of my design?

Something simple, such as this...

http://www.reebok.com/
 
techtom

Posted: 7/17/2014
Quote message 

Many people use the contact 7 plugin for forms. It has a widget you can add to your footer once you create your form.
 
Dave

Posted: 7/18/2014
Quote message 

What I would like to achieve, is a single field where the user can input their e-mail address, then click the button beside it, resulting in the text on the button to change to "Thank you!", and to be greyed out, so they can't click it again. Then I would like their submitted e-mail address to be e-mailed to my e-mail address, with a specific subject line, such as "New subscriber".

Is this something that could be done with a simple PHP code that is linked to the input field and button on my site?
 
techtom

Posted: 7/18/2014
Quote message 

Dave,

you could just create some php to handle this without a plugin. You would also need some javascript to handle the text change and disabling of the form I would think.

I would google php email form processing to get the code for it. You may want to include a validation as well. If you can't find one let me know I can check.
 
Dave

Posted: 7/19/2014
Quote message 

Are there any free online wizards you'd recommend that could take me through the process of setting up an e-mail form processor? I've only found various paid-for options, and PHP / Javascript is NOT my strong point.
 
Dave

Posted: 7/19/2014
Quote message 

If it's easier, I could use Contact Form 7, but can you use your own button style, place the button where you want, and things like that?
 
Dave

Posted: 7/19/2014
Quote message 

OK, so I've installed Contact Form 7, and have placed the PHP code in the sidebar-footer.php file, so it's where I want it to be. However, I have a few questions...

1) How do I adjust the field length? Nothing seems to affect its size. I'm guessing it's being overridden somewhere -- perhaps in the CSS -- but don't remember setting a specific field length in my template, as I'd want any field I insert to be of a custom length, depending where it is on my site.

2) How do I place the button next to the field, as opposed to the button being below it?

3) How do I get the button to use the button style of my template?
 
Dave

Posted: 7/19/2014
Quote message 

I've managed to get the form to use the button style of my template, by adding
class:art-button
to the "submit" tag within the "Form" section of Contact > Contact Forms > Contact form 1.

Now all I need to do is figure out how to adjust the field length, and get the submission button to be situated next to it...
 
Dave

Posted: 7/19/2014
Quote message 

Also, I've noticed that e-mail submissions are not reaching my inbox -- they're not being filtered into the spam folder, either -- despite the resultant message saying "Your message was sent successfully.". I've heard this is a frequent problem with this particular plugin, but haven't found any solutions...
 
Dave

Posted: 7/20/2014
Quote message 

After further research, I think the problem may be with GoDaddy, who I'm using as my hosting provider. I found these two articles on the subject...

http://support.godaddy.com/help/article/8960/sending-form-mail-with-cpanel-and-plesk-shared-hosting?locale=en

http://php.net/manual/en/function.mail.php

But I'm afraid the latter flies straight over my head. :-)
 
Dave

Posted: 7/20/2014
Quote message 

OK, so if I click "Use HTML content type" within the mail section of Contact > Contact Forms > Contact form 1, I receive an e-mail from my website. If left unchecked, no e-mails will be received. However, what I don't receive in the e-mail is the e-mail address that is submitted from the form.

Does anyone know what I might be doing wrong here? In the mean time, I'll see if I can find any solutions...
 
Dave

Posted: 7/20/2014
Quote message 

I've tried adding other fields to the form, to see if it was just a problem with the [email] tag, but it's still not submitting any of the information put into the fields. All I get is the default message body...

From: [your-name] <[your-email]>
Subject: [your-subject]

Message Body:
[your-message]

I must be doing something wrong here.
 
Dave

Posted: 7/20/2014
Quote message 

Just as I thought; I was doing something wrong. :)

You need to add the tags you use in your "Form" to the "Message body".

For example, if you have [email email-482] in your "Form", you need to add [email-482] into the "Message Body", and then the e-mail address that is submitted from the e-mail field of the form on your website will be e-mailed to you.

Alright, onto the next issue; altering the length of the e-mail field...
 
Dave

Posted: 7/20/2014
Quote message 

I'm not having much luck with changing the width of the field, or centralizing the form, so here are a couple questions for whoever may be reading...

1) How do I adjust the width of CF7's input field on its own, without having to edit any of the plugin's source files, and without affecting the width of every input field?

FYI; the width of
input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea
is currently 100% in style.css.

2) How do I centralize the input field and submission button together -- so that they are next to each other -- whilst keeping the placeholder text in the input field aligned to the left? Currently, it looks as if the input field and submission button are aligned to the left.
 
Dave

Posted: 7/20/2014
Quote message 

Also, just a thought, but would it be possible to use the input field and submission button I originally implemented in my Artisteer WP template -- it had no e-mail functionality coded into it -- and somehow link it to CF7? That way, everything would look and be aligned how I want...
 
Dave

Posted: 7/21/2014
Quote message 

OK, so adding the following code to style.css allows me to specify the width of CF7's input field...

.wpcf7 input[type="email"],

.wpcf7 textarea
{
width: ???px;
}


... without affecting the width of input fields that have nothing to do with CF7.

However, aligning the form is proving to be tricky.

If I wrap...

<?php echo do_shortcode( '[contact-form-7 id="1234" title="Contact form 1"]' ); ?>


... in...

<div class="aligncenter"></div>


... it appears to move the alignment more *towards* the center, but it's not lining up exactly with other centralized items -- almost as if there is something preventing it, like padding on one side. But, on initial inspection, I can't find any...

:*)
 
Dave

Posted: 7/21/2014
Quote message 

Also, the code...

<div class="aligncenter"></div>


... seems to introduce a space below the form. If I remove the div alignment code, the space goes away -- Any suggestions?

Looking at my Artisteer template, the centralized alignment of the field input and submission button appears to be the same as it is on the live website, so it could be an issue with Artisteer instead -- I'll look into it.
 
ishtiaq

Posted: 11/4/2014
Quote message 

good