Contact Form Slider Wordpress
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Looking for some assistance creating a form that will mimic the functionality in this particular theme. http://1.premiumdemos.launcheffectapp.com/#

I purchased the premium copy of Launch Effect, I just haven't found the best way to customize. I also need the form to send all of the information to an email address or another way to categorize the information. I would like the form to have the same elements that are in this example. What makes this challenging is the ability to upload photos with the resolution of 300 dpi for a call to artists.

http://www.scartshub.com/submit-a-story/

Any database/email type newsletter ideas are wanted and encourage.

Hi Alex, Yes – could you please help me integrate this with WordPress. and also appreciate any instruction you could provide – im interested in the methodology.
simpletwist almost 7 years ago
@simpletwist. Alright, would you like it as a plugin or as a custom page type in WordPress? Or would you like me to write a code block for you?
alex almost 7 years ago
Hi Alex – would be the easiest way to employ your solution. I think the custom page type may be the way to go but I imagine you would need access to my WordPress install – what is the best way to contact you or could you provide instructions in order to properly integrate your solution. Thank you for your time.
simpletwist almost 7 years ago
What do I do about the background URL?
simpletwist almost 7 years ago
@simpletwist, The image is base64 encoded, so there is no need to change the URL.
alex almost 7 years ago
got it. I know this is beyond the scope of what I initially asked for – but I was never able to get the form to appear in the contact slidedown. any suggestions on how I Replicate the current form CSS that drops down from the slider so that everything stays consistent?
simpletwist almost 7 years ago
@simpletwist, for the slideDown, all you have to do is wrap the <form> in a <div> and attach a button to toggle the slideDown/slideUp event.
alex almost 7 years ago
just one last question – is there a simple way to have the text that exist above the form elements to live inside the text fields until the user clicks?
simpletwist almost 7 years ago
@simpletwist, yes. Check this out.
alex almost 7 years ago
beautiful.
simpletwist almost 7 years ago
I'm going wrong somewhere with contact form 7 can you see my mistake in this particular form element? Your Name (required) [text* your-name onfocus="if (this.value == 'Your Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Your Name';}"]
simpletwist almost 7 years ago
@simpletwist sadly, I don't think that you are allowed to use javascript with Contact Form 7, so I devised this workaround, but your syntax for the form would have to change. Check this pastie out. For every new text input, I will set a unique ID and a default value and bind it to the function.
alex almost 7 years ago
no die. Although – I was able to get the contact form working with the HTML 5 code. Before I finally go – you have any recommendations on styling the buttons in this particular form. Thanks again for all your help. http://artbeyond.co/submissions/
simpletwist almost 7 years ago
@simpletwist, try these out.
alex almost 7 years ago
Strange – I'm using chrome and am having some problems with the way the text is displayed. Let me see if I can upload it screenshot. The submit button is over to the right and the text that exist within the larger message box is different than the text of the smaller form elements.
simpletwist almost 7 years ago
Strange – I'm using chrome and am having some problems with the way the text is displayed. Let me see if I can upload it screenshot. The submit button is over to the right and the text that exist within the larger message box is different than the text of the smaller form elements. http://wp.me/s2Or8p-ss
simpletwist almost 7 years ago
@simpletwist try adding this css. It turns out my CSS selectors were not specific enough and got canceled out.
alex almost 7 years ago
fantastic – thanks for all your assistance. Great end product!
simpletwist almost 7 years ago
@simpletwist, anytime! Sorry for taking so long and all this back-and-forth.
alex almost 7 years ago
@alex both issues
simpletwist almost 7 years ago
@simpletwist is it giving out any errors? Is it that you're receiving the email without the images?
alex almost 7 years ago
I receive "this file type not found" and also an email without any images. I added some additional elements before but this should not be related. First since I've added another category for age.
simpletwist almost 7 years ago
@alex any ideas on what steps to take next? Also, do you have recommendations on how to style the error reports on the submission form. I didn't think this would be as complex.
simpletwist almost 7 years ago
@simpletwist, I'm still looking into the problem. As for the error reports, I'm thinking of styling them the same way as the inputs but with a bright yellow (or red) border.
alex almost 7 years ago
@simpletwist, how big are the images you are trying to upload?
alex almost 7 years ago
200kb I was able to resolve the errors – but still no pictures attached. Any thoughts?
simpletwist almost 7 years ago
@simpletwist can you try putting [imageone] [imagetwo] [imagethree] inside the message body field? Sorry for making this more complicated that it should be...
alex almost 7 years ago
@alex It turns out that the email address that was listed – was not receiving the images. Is there any chance that you could style the error and validation messages for me? Thank you.
simpletwist almost 7 years ago
@simpletwist Alright, done! Here is a preview. Your code would look like this. Anything else you want me to help with?
alex almost 7 years ago
@alex perfect. It is working great. Couldn't be happier… Is there a way to stay connected for future projects?
simpletwist almost 7 years ago
@simpletwist My contact info should always be on my website so you can just drop by and shoot me an email.
alex almost 7 years ago
awarded to alex

Crowdsource coding tasks.

1 Solution

Winning solution

The script is basically a HTML form with an upload feature which will send an email with the form data to your email. I chose to write it as a simple HTML/PHP file because it is easy to integrate into both WordPress and as a standalone script.

How to Use

  1. Download the files from here
  2. Unzip and upload to your webserver
  3. Change the $YOUR_EMAIL, $SUBJECT, $CALLBACK variables in lines 3-5 in the email.php file to your preferences

Notes

There is no validation for the form so people can basically send whatever they want. I'm using some code from this site.

If you need help setting this up/integrating it into WP please ask.

Plugin Install

So, I found this really awesome plugin that does what my script does, but better. To set it up, just follow my instructions below.

  1. Download the package.
  2. Unzip the package and upload the contact-form-7 folder to the /wp-content/plugins/ folder.
  3. Go to your Plugins section in your admin login.
  4. Click Activate under the plugin titled Contact Form 7
  5. Navigate to the Contact section in your dashboard
  6. Hover over Contact form 1
  7. Click Edit
  8. Copy and paste the code from here to the textarea titled Form
  9. Copy and paste the code from here into the large textarea under Mail
  10. Scroll up to the top of the page, follow the directions, and hit Save
How do I include it in the jquery togggledown?
simpletwist almost 7 years ago
@simpletwist, where do you want the toggledown?
alex almost 7 years ago
http://artbeyond.co/call-to-artists/ on the toggle down – the contact form does not display. Any thoughts?
simpletwist almost 7 years ago
@simpletwist I'm not exactly what is wrong, it works for me when I put it as a page. Page text -> output. And it shouldn't matter if you have jQuery .slideToggle() or not...
alex almost 7 years ago
I'm boggled. Any thoughts on next steps> http://artbeyond.co/
simpletwist almost 7 years ago
@simpletwist o.O That is odd. Let me see if I can fix that.
alex almost 7 years ago
@alex... any thoughts?
simpletwist almost 7 years ago
@simpletwist, still looking into it. I'm thinking it is that particular theme that is causing this problem. If I can't find a solution, I will just write a static HTML form for you.
alex almost 7 years ago
@simpletwist, I can't seem to find out why it isn't working. Can you use custom HTML on the post/page? Because if you can, I can write an HTML form to use in place of the plugin. I'm so sorry for all this trouble and waiting, I never expected it to be this complicated to get a form up on a WP installation.
alex almost 7 years ago
@Alex not a problem. I just need to figure out why the contact form is not working. I've used is that your plug-in before without any problems. I can try using a custom HTML on the slide down menu. Also, regarding styling how could I lifted the CSS office of the form that originally wanted to emulate?
simpletwist almost 7 years ago
@simpletwist, a two things: a) I didn't write the script, someone else wrote it (I wish I wrote it :/). b) I'm currently writing up a HTML form and making it look like the form on the site you wanted, but I have a question, do you want the CSS to be embedded or saved as a separate file?
alex almost 7 years ago
a separate file would be great. I restyled the site. The contact form will work within a page but not within the slider. Yes – the CSS would be great to add a bit more class.
simpletwist almost 7 years ago
@simpletwist. Just add this css file into the page(s) where you have forms you want to style.
alex almost 7 years ago
@alex Still no luck getting everything to line up properly. The form works fine – but some of the CSS needs some additional tweaking. Any thoughts on how to add or attacked some of the form elements that are falling out of place?
simpletwist almost 7 years ago
@simpletwist, I'm using chrome right now and the forms are lining up properly, can I ask what browser you are using?
alex almost 7 years ago
your new CSS really worked well – but for some reason it's not working anymore. Unfortunately – after lunch tomorrow, any quick fixes?
simpletwist almost 7 years ago
@simpletwist, Is the CSS even there? I can't find the CSS attached anywhere (or maybe I'm not looking hard enough).
alex almost 7 years ago
You're right – I updated the theme and stripped the CSS. I thought the same thing – thanks for the confirmation.
simpletwist almost 7 years ago
;( Hey Alex – unfortunately, the image will not upload. Any ideas on why?
simpletwist almost 7 years ago
@simpletwist, is the form not accepting uploads? or is it not sending to you? or both?
alex almost 7 years ago