pancakes

MicrostockGroup Sponsors


Author Topic: Looking for a simple contact form - any suggestions?  (Read 5871 times)

0 Members and 1 Guest are viewing this topic.

stockphoto-images.com

« on: August 26, 2013, 16:31 »
0
My motto is: "Less is more" - so I need something that doesn't overwhelm my visitors who want to contact me, offering a clean and simple contact form.

The one I'm using right now: http://stockphoto-images.com/contact/ won't let me edit the text field widths and the message area just looks so tiny.

I know I can dive into the code and fiddle with it but I usually just mess things up.

Does anyone have a recommendation what contact form plugin I could use that gives me these editing options?

Thanks in advance.


« Reply #1 on: August 26, 2013, 16:33 »
0
I use contact form 7 Wordpress plugin but haven't really looked at the code for it and mine is just as tiny.  Is that what you're using too?

ShazamImages

  • ShazamImages.com
« Reply #2 on: August 26, 2013, 16:33 »
0
Contact Form 7 along with Really Simple CAPTCHA

stockphoto-images.com

« Reply #3 on: August 26, 2013, 16:57 »
0
I'm using "Fast Secure Contact Form" right now and you can adjust more stuff in the Pro version... obviously.

I don't need fancy fields etc. just a little bit more formatting options would be nice.

ShazamImages' form is much bigger (wider message area) than Anita's. Is it easy to configure that?

I'd like to have the message field on the right of the name and email field - just to take advantage of the page width.

I'm just being picky I guess lol.

« Reply #4 on: August 26, 2013, 17:06 »
0
I'm nosing around in the plugin files haven't found where the fields live yet.  I'm downloading it to the computer so I can look around it more easily.

ShazamImages

  • ShazamImages.com
« Reply #5 on: August 26, 2013, 17:31 »
0
I'm using "Fast Secure Contact Form" right now and you can adjust more stuff in the Pro version... obviously.

I started with Fast Secure Contact Form but moved to Contact Form 7

ShazamImages' form is much bigger (wider message area) than Anita's. Is it easy to configure that?

I believe that it is, but it has been a while since I set it up.

I'd like to have the message field on the right of the name and email field - just to take advantage of the page width.

You should be able to do that relatively easily, since it uses a combination of HTML and shortcodes.

stockphoto-images.com

« Reply #6 on: August 26, 2013, 19:57 »
0
Ok, I'm getting there. I only need one hint to expand my message field width. First here is my contact form code:
Code: [Select]
<table style="width: 850px; height: 190px" border="1">
  <tr>
    <td valign="top" style="width: 220px"><table style="width: 220px" border="1">
  <tr>
    <td><p>Your Name (required)<br />
    [text* your-name] </p></td>
  </tr>
  <tr>
    <td><p>Your Email (required)<br />
    [email* your-email] </p></td>
  </tr>
  <tr>
    <td><p>Subject<br />
    [text your-subject] </p></td>
  </tr>
</table></td>
    <td valign="top" style="width: 630px"><p>Your Message<br />
    [textarea your-message x8]</p></td>
  </tr>
</table>
<p>[submit "Send"]</p>
Almost at the end of the code I tried to increase the width of the message field (40x8) - 40 characters wide and 8 rows of text. However this isn't working.

I was following what people wrote here:
http://wordpress.org/support/topic/plugin-contact-form-7-how-do-i-resize-the-tag-boxes
and
http://wordpress.org/support/topic/plugin-contact-form-7-change-width-of-a-form

The right cell that only contains the message field had plenty of space. I left the border size at "1" so you can see the size of the cell. I'd like to have the text box 2 to 3 times the width it is now.

Can anyone give me a hint what I'm doing wrong. I barely know what I'm doing in the first place but so far it was fun scrambling the code around to basically get this layout.

Oh and of course this is how it looks like now: http://stockphoto-images.com/contact/


Thanks in advance.

« Reply #7 on: August 26, 2013, 20:40 »
0
It might be that the table width is too small.  220px in line 3

Code: [Select]
<td valign="top" style="width: 220px"><table style="width: 220px" border="1">
Try changing the table style width and see if that works.

stockphoto-images.com

« Reply #8 on: August 26, 2013, 21:23 »
0
It might be that the table width is too small.  220px in line 3

Code: [Select]
<td valign="top" style="width: 220px"><table style="width: 220px" border="1">
Try changing the table style width and see if that works.
That value of 220px width belongs to the small table inside the big table. It just basically controls the size of the width of the first column.

The second column is supposed to be much wider and therefore provide space for the message field.

I hope this makes sense.

« Reply #9 on: August 26, 2013, 21:31 »
0
It does as I didn't see the short code brackets underneath.

I still haven't had a chance to look at it and I really wish there was a way to not mess with the original plugin code but doesn't look like there's a way around it.

The way my day is going right now I probably won't get to it until tomorrow...unless I wanna stay up really late :p

stockphoto-images.com

« Reply #10 on: August 26, 2013, 22:50 »
0
It does as I didn't see the short code brackets underneath.

I still haven't had a chance to look at it and I really wish there was a way to not mess with the original plugin code but doesn't look like there's a way around it.

The way my day is going right now I probably won't get to it until tomorrow...unless I wanna stay up really late :p
Don't knock yourself out. I took out the borders and it looks ok for now.

I may tinker with it tomorrow and see what happens.

Thanks for all your comments and help!

« Reply #11 on: August 26, 2013, 23:02 »
0
Oh I won't I already feel like I've been hit by a truck.  Just need a good nights sleep and then get a fresh pair of eyes on it when I get up.

« Reply #12 on: August 26, 2013, 23:40 »
0
Okay so here goes.

You don't need to edit the core contact form files.  You can control it within the child themes style.css file.

Code: [Select]
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

Adjust the width percentage as you like :)

« Reply #13 on: August 27, 2013, 01:34 »
0
I started with contact form 7 but found the messages very difficult to read.

Now using contact form with captcha by teqlog, nice layout when messages arrive

stockphoto-images.com

« Reply #14 on: August 27, 2013, 08:50 »
0
I started with contact form 7 but found the messages very difficult to read.

Now using contact form with captcha by teqlog, nice layout when messages arrive
Arrrrgh, don't tell me that now.

With the help of Anita I just finished the formatting for my form and thought I was happy.

I guess I will just leave it for now and try to decipher those ugly emails that I will get from visitors for the time being  :-\

stockphoto-images.com

« Reply #15 on: August 27, 2013, 08:51 »
0
Okay so here goes.

You don't need to edit the core contact form files.  You can control it within the child themes style.css file.

Code: [Select]
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

Adjust the width percentage as you like :)

I removed

Code: [Select]
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],

from your code so I could leave my code in there to maintain the message field on the right of the other fields.

Worked out good. I'm happy.

Thanks for your help!

stockphoto-images.com

« Reply #16 on: August 27, 2013, 11:13 »
0
I started with contact form 7 but found the messages very difficult to read.

Now using contact form with captcha by teqlog, nice layout when messages arrive
No idea if you were looking for HTML emails being sent to you but I just realized that the messages sent with "Contact Form 7" can be customized.

I added a few line breaks and added the IP address of the sender to the email as well.

It's all I need at the moment.

Just wanted to share.

« Reply #17 on: August 27, 2013, 11:32 »
0
Cool!  Glad you got it worked out :)

I too haven't looked into making them look better when they get into my inbox and I agree they are terribly hard to read.  Just have to find the file that controls it unless it can be styled with the css as well.

stockphoto-images.com

« Reply #18 on: August 27, 2013, 12:14 »
0
Cool!  Glad you got it worked out :)

I too haven't looked into making them look better when they get into my inbox and I agree they are terribly hard to read.  Just have to find the file that controls it unless it can be styled with the css as well.

It's really easy (after all, I could even figure it out...).

When you edit your contact form, you can add code to the "Form" with your variables to style the layout of the form like I did. It just works. I was surprised but that's really convenient.

This is my code for the form itself - feel free to use it yourself:

Code: [Select]
<table style="width: 850px; height: 190px" border="0">
  <tr>
    <td valign="top" style="width: 220px"><table style="width: 220px" border="0">
  <tr>
    <td><p>Your Name (required)<br />
    [text* your-name] </p></td>
  </tr>
  <tr>
    <td><p>Your Email (required)<br />
    [email* your-email] </p></td>
  </tr>
  <tr>
    <td><p>Subject<br />
    [text your-subject] </p></td>
  </tr>
</table></td>
    <td valign="top" style="width: 630px"><p>Your Message<br />
    [textarea your-message x8]</p></td>
  </tr>
</table>
<p>[submit "Send"]</p>

Of course I combined it with the CSS you provided me with:

Code: [Select]
.wpcf7 textarea
{
    background-color: #fff;
    color: #000;
    width: 100%;
}

Then, in order to format your email that's being sent to you, you can also use my code that looks like this.

Still being in the "Edit" section of your form, paste this into the big text field called "Message body:"

Code: [Select]
From: [your-name] <[your-email]><br>
IP address: [wpcf7.remote_ip]<br><br>

Subject: [your-subject]<br><br>

Message Body:
[your-message]<br><br>

--
Sent from http://your_website.com

That's it. I'm totally happy with the way it turned out. I don't need anything more fancy than that anyway.

Let me know if you want to give it a shot. It's not hard.
« Last Edit: August 27, 2013, 12:18 by stockphoto-images.com »

« Reply #19 on: August 27, 2013, 12:28 »
0
Okay I know where that's at when I was looking at the links you found yesterday.  Duh!  Don't know why I didn't think that using the html tags in the edit of the form would also influence the email that you receive.  I'd have thought that was in some included file somewhere that handled all of it.

I just tested it with what you showed me and it's a lot easier to read :)

Thanks!

stockphoto-images.com

« Reply #20 on: August 27, 2013, 12:29 »
0
Okay I know where that's at when I was looking at the links you found yesterday.  Duh!  Don't know why I didn't think that using the html tags in the edit of the form would also influence the email that you receive.  I'd have thought that was in some included file somewhere that handled all of it.

I just tested it with what you showed me and it's a lot easier to read :)

Thanks!
Awesome!  :D

« Reply #21 on: August 27, 2013, 12:49 »
0
Hee hee it provided me with enough distraction from the SEO part which I always look for because it's unbelievably booooooring!


 

Related Topics

  Subject / Started by Replies Last post
2 Replies
4643 Views
Last post April 17, 2013, 20:17
by cathyslife
12 Replies
3852 Views
Last post April 23, 2013, 20:34
by cathyslife
11 Replies
2508 Views
Last post June 16, 2013, 11:16
by alberto
0 Replies
1192 Views
Last post June 18, 2013, 16:06
by Leo Blanchette
2 Replies
2069 Views
Last post October 31, 2013, 02:49
by Anita Potter

Sponsors

Mega Bundle of 5,900+ Professional Lightroom Presets

Microstock Poll Results

Sponsors

3100 Posing Cards Bundle