-
Posts
-
I’m using Contact Form 7 and I really want to create a form that looks like your form from your Shop Demo:
http://goo.gl/sjdozuI’ve tried finding something either on your support forums and online but nothing that would get everything on one line. Any chance you gurus can help a lady out? I want it EXACTLY like yours. Single row, 3 Fields, white border, transparent, etc.
Hey!
Thank you for using Enfold.
You can actually use the theme’s layout shortcodes inside the plugin’s form builder in order to create such layout. Example:
[av_one_third first min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='']CF7 FORM HERE[/av_one_third] [av_one_third min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='']CF7 FORM HERE[/av_one_third] [av_one_third min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='']CF7 FORM HERE[/av_one_third]Replace the “CF7 FORM HERE” with the actual CF7 form shortcode.
Regards,
IsmaelIsmael,
I’m going to need a little more hand holding than that. Do I copy all of that into a text box on the page I want to add the sign up? Or just 1 line of it? And do I need to set up my CF7 Form in any particular way? I added a text box to my page I want this sign up form to be on. I pasted in your short code above & replaced the CF7 Form Here with the CF7 form short code from one of the CF7 forms I created with the fields “Name”, “Email”, “Subscribe”. This is what I got: http://goo.gl/0DIo83
The submit/Subscribe still drops to the next line. I want everything all on the same row. So clearly something isn’t working.Hey!
You need to use the column shortcode in the CF7 form editor. The “CF7 Form Here” text is the placeholder for the CF7 FORM FIELDS shortcode. Example:
[av_one_third first min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='']<p>Your Name (required)<br /> [text* your-name] </p>[/av_one_third] [av_one_third min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='']<p>Your Email (required)<br /> [email* your-email] </p>[/av_one_third] [av_one_third min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='']<p>Subject<br /> [text your-subject] </p>[/av_one_third]Cheers!
IsmaelThis is so confusing!!!! The new code above doesn’t look right. How do I use your example above with the code you provided previously? In the new code, you aren’t using the same field names as the Kriesi Shop Demo newsletter sign up form. The Demo shows: NAME, EMAIL, SUBSCRIBE (aka submit button). Again, I want my newsletter sign up form to look EXACTLY like your Shop Demo newsletter sign up. Your code above you have “[text your-subject]”. The Demo uses “Subscribe”. You don’t even show a “Submit” in that code. So I’m not thinking this code will work.
Finally, the Demo form is on top of an image – where are the instructions for that? Is that a color block on the page I want this to show? Do I then place a text box in the color block and then paste the CF7 shortcode into that?
If you have time, I would really appreciate it if Support could just mock this up for me with the login info I provided. That way it’s done correctly. And we’re not going back and forth. I really need this ASAP.
Thanks!
Hi!
We can surely help you add a subscribe form exactly like the shop page demo. Please let us know where do you want to add the form on your website? On the homepage below “WHAT OTHERS SAY ABOUT US” section?
Once we add the form you can easily link a subscription service like mailchimp to make it fully functional.
Regards,
VinayVinay to the rescue! Thank you!! I have a draft of a page titled Newsletters. I plan to display all our previously emailed newsletters and would like the newsletter sign up on this page to start. Once it’s been designed correctly – I may add it to other pages. Feel free to add different elements/media to make it look just like the Shop Demo newsletter sign up.
Truly appreciate this!! LMK if you need anything further from me to get started!
Hi!
Sorry for the delay. I will setup a demo page for you and post a screenshot later today.
Regards,
VinayHi!
If you goto Newsletters page you will find the text box widget in which i have added the shortcode you can easily change the background image to your liking or move it anywhere you like using the advance layout builder and add other elements to the page.
Cheers!
VinayVinay you’re awesome!!! That looks great! Looking at the page where you have the newsletter sign up, I don’t see a widget. I see a text box with all the debug code (I assume you copied and pasted this from the Shop Demo? Please correct me if I am wrong).
And I don’t see the Contact Form 7 form you created as a shortcode ([contact-form-7 id=”5691″ title=”Kriesi Code Simple Newsletter Sign up”]). How is it working exactly? I definitely need this to go through CF7 as we use Act-On for our marketing automation (similar to MailChimp).
Please advise.
Hi!
Yes you are correct the debug code you are ref to is a shortcode from shop demo. Enfold offers custom styled newsletter it’s css styles are already built into the enfold theme. To edit the newsletter form text you need to change it inside the short code.
As i understand you want to include a newsletter subscription form from Act-On.
Once you register with Act-On you will get a code which you can paste in a text box and use it or as widgets. This is a standard code they provide and it will have to be custom styled to suit your website. You don’t need enfold contact form 7 for this and Act on will not be compatible with it. Act-on probably has their own wordpress plugin which you can install and use it in the widget area.
Best regards,
VinayVinay,
Act-On integrates with CF7 forms NOT Enfold forms unfortunately. I wish they had a plugin for WordPress but they do not. Currently I have to create 2 forms: 1 in CF7 and a mirror form in Act-On. If you look at my other CF7 forms you will see under the tab in any CF7 form “Additional Settings” this is where I insert the code from Act-On & change the form ID. Each Act-On form has a unique ID.I really need a CF7 form created so that I can apply the updated form information under CF7 Additional Settings. Is it not possible to achieve the same look as the shop demo form with a CF7 form? I’ve scoured the interwebs in hopes of finding the correct CF7 instructions for setting this up but my Submit button always drops to the next line.
@Andy, I’ve already exhausted that route but all the code given still bumps the submit button to the next line, applies the labels to the top and not inside the fields and I can’t get the subscribe button to be clear like in the shop demo. Oddly enough, it often comes back to the theme so hence me reaching out to Kriesi. Especially since I’m requesting it to look very much like your shop demo newsletter sign up. BTW, Kriesi has been kind to help in the past with CF7 so I wouldn’t ask if I didn’t think you geniuses would help. Let me know if this is no longer the case!
Hi!
As far as i know you cannot integrate Act-on with CF7. This customization will take a lot of time and effort you can probably hire a freelancer to do this job.
If you have any other questions we are more than happy to help you.
Cheers!
Vinay@Vinay –
Act-On does integrate with Contact Form 7. It’s in their documentation. All of my CF7 forms are currently integrated with Act-On forms. I don’t need help with that. I am asking if there is a way to get a CF7 form to look EXACTLY like the Shop Demo Newsletter Sign Up form you show – all inline with submit/subscribe button on the same line. With fields styles showing outlined with white border, 0% fill box & field label inside the box. So when I add this CF7 form shortcode to color block with an image, it shows up just like your form. I have to assume it’s possible with the right code inside CF7 and/or CSS added to my Quick CSS box. Thanks!Hi!
Please integrate the act-on form with the CF7 on a test page and let us know. We will take a look at it and if it is not too much of customization work we will gladly help you achieve the same look and feel.
Regards,
VinayVinay,
I don’t understand your request. Act-On has nothing to do with the formatting. I have a CF7 form called Newsletter Sign Up_Simple_Kriesi. It’s “integrated” with an Act-On form. My request is to get CF7 Newsletter Sign Up_Simple_Kriesi form to look just like the Kriesi Shop Demo newsletter sign up. As for placing it on a test page, it’s on the draft called Newsletters. Kriesi Support is welcome to both of these. I got it all in line but the labels are on top in black text – not inside the input boxes, the boxes are outlined in a thin black line vs. the white like your form and the submit button is the default (red/opaque).Again just need the code, correct tags and/or CSS to get this CF7 form to look as much like the Kriesi Shop Demo newsletter sign up if at all possible.
Hey!
Earlier I did setup the demo of the signup form for you like the shop demo as you requested we cannot integrate it to your Act-on script as it requires a lot of customization work . You need to hire a freelancer to do this.
Cheers!
Vinay@Vinay, I’m sorry. I guess I don’t understand what Act-On has to do with the formatting. Let’s forget about Act-On for a moment. I’m going back to my original question:
Can Contact Form 7 be formatted/coded so that it looks just like the Shop Demo Newsletter sign up?
When I looked through your Shop Demo sign up on my test page, I could NOT find anywhere in that code on the test page where you referenced a specific Contact Form 7 form ( example: [contact-form-7 id=”5711″ title=”Newsletter Sign Up_Simple_Kriesi”]). It looked like you just copied verbatim what was in your Demo which I assumed used the default Enfold Form element. Is this correct? I’m a novice when it comes to html/coding so maybe I missed something. If CF7 forms cannot be manipulated to look just like the Shop Demo signup, then I totally understand and I apologize for wasting your time.
Hi!
“Can Contact Form 7 be formatted/coded so that it looks just like the Shop Demo Newsletter sign up?”
Yes :)
Best regards,
Vinay@Vinay Thank you! This looks really good but it doesn’t look like you are using a Contact Form 7 form. It looks like you used an Enfold Contact Form Element: http://goo.gl/WBvXc3
I’m asking for a Contact Form 7 form NOT an Enfold Contact Form. Contact Form 7 is one of the Plugins Kriesi recommends per the Recommended Plugins post under the Support Forum.
You can locate Contact Form 7 Forms on my WP dashboard here: http://goo.gl/ySibzM
Here’s a screen shot of the various forms I already have in Contact Form 7: http://goo.gl/HWNvcO
You will see that it creates a shortcode which can be placed on any page. This is what I need.A little further, and this screen shot shows inside one of the forms: http://goo.gl/G9ywRu
CF7 uses mail tags, classes, html, etc. which is way over my head. This is what I was hoping to get help with.Here’s an example of a page where I’m using a Contact Form 7 form. The shortcode is placed inside of a Text Box Element: http://goo.gl/9rxOnD
Here’s the live page: https://onesourcebackground.com/contact-us/If you are using a CF7 form, can you tell me which form you are using based on the “id=” from the shortcode? Because I do not see it.
Sorry for being such a bother. Please let me know if you have any questions.
Hi!
Enfold contact form element uses contact form 7 plugin to handle the e-mails but it is fully integrated and you don’t get the same control as you do in cf7 plugin.
We can help you apply the same styles to a contact form created with CF7 plugin please see the link in private message.
Not at all you are not bothering we are here to help you… and you are most welcome :)
we are following up with this issue please let us know if it worked for you.
Cheers!
Vinay@Vinay that’s exactly what I needed!! Thank you!
Not sure how you did it. Did you have to apply some css?
Is there anyway to get the labels “Your Name (required) and Your Email (required)” inside the boxes vs. on top?
Secondly, when entering information inside the box, is there anyway to get the text to be white as well? It’s currently showing black.BTW, nice profile pic! ;)
Hi!
We have updated the form except to display the labels inside the input fields as it requires a lot of customization with javascript.
Contact form 7 plugin outputs a html form and it is wrapped in a ID and styled using the custom css.
#shop-style-cf7 .wpcf7 input { color:#FFF!important; } #shop-style-cf7 .wpcf7 p { color: white; clear: none !important; float: left; width: 30%; margin-right: 3%; } #shop-style-cf7 .wpcf7-form p:last-child { margin-right: 0%!important; } #shop-style-cf7 .wpcf7 input[type='submit'] { margin-top: 20px; background:transparent!important; border: 2px solid white!important; width: 100%; padding:13px 0; }Thanks you for the compliment i updated a recent one :)
Please let me know if there is anything else I can help you with…
Best regards,
Vinay@Vinay – Thank you! Bummer about the input fields. But I’ll take what I can get!
I think you can close this ticket/thread!
Hi Vinay,
Can I ask you to do the same thing for me? As you might know from this thread I’m forced to use CF7, but I’m not entirely sure to implement this. I will put the login in the private section. Can you prepare one form for me so I can work out the rest?
Thanks!
DanielHi!
@jend_onesource I will keep this ticket open in case we find a easy solution for the input fields i will update the same here.
@strila please open a new ticket so we can help you without getting the issues mixed up.Regards,
Vinay
- You must be logged in to reply to this topic.