Contact Form Needed

My client needs a contact form to include...

Subject line, their name, company name, mailing address, email address, phone #, and Message

From what I read wpmu contact form plugin is limited in this respect but I stand corrected.

I know that many people use WP Contact Form 7 (I think it's called) but the issue seem to be it's not Responsive unless you style it.

Do you have any css suggestions I can use for this purpose and where do I add the css?

It's for the dcspecialevents.net website

Thanks

  • Nithin
    • Support Wizard

    Hi Dave,

    Do you have any css suggestions I can use for this purpose and where do I add the css?

    If I'm not mistaken, I don't see any contact form configured in your website using Contact Form 7 plugin, nor the plugin seems to be installed, if you could provide the exact page, we could provide the CSS to make it responsive.

    The default theme Contact Page is responsive, but if you are looking for a flexible contact form, contact form 7 plugin would be a better alternative. Please let me know if I have missed out anything.

    Please let us know once you apply the following changes, so that we could help get this sorted. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Dave
    • The Crimson Coder

    No I was asking prior to installing the plugin. Been years since I installed this plugin so not even sure exactly where to find it. I see many Contact Form 7 stuff on Wordpress. Can you provide a direct link?

    Thanks

  • Alex Stine
    • System Administrator

    Hello,
    Hope you are well.

    You can download Contact Form 7 from the below link.
    https://wordpress.org/plugins/contact-form-7/

    I would like to make a suggestion if you don't mind. :slight_smile: I really like the plugin Ninja Forms, it is responsive on my site and you can add all the fields you like. It needs very little customization with CSS if any.
    https://wordpress.org/plugins/ninja-forms/

    Hope this helps.

    Cheers,
    Alex :smiley:

  • Dave
    • The Crimson Coder

    Also do you recommend the recaptcha they suggest (used it before on another project) or maybe one from wpmu?

    I don't see form action for email. Did I miss something? I know I can search their website but it does make sense that it be in there.

    They do not even provide a preview page when you click their preview link.

  • Dave
    • The Crimson Coder

    I was able to find and edit the Email & Action section and I'm now setting that up. But if you can tell me if the recaptcha provided with Ninja Forms is best or if wpmu have one that will work better.

    I guess that would be all for now please let me know.

    Thanks

  • Alex Stine
    • System Administrator

    Hello,
    Hope you are well today.

    I would use the Ninja Forms Google reCaptcha because you know it will be compatible. At WPMU DEV, we do not actually have any plugins like this.

    If there is any styling help you need help with, please explain what you would like to modify and we can assist you further.

    Have a great day! Cheers,
    Alex :smiley:

  • Dave
    • The Crimson Coder

    The Ninja Form is not working. For days now I tested it and it persistently keep asking for email address when one is entered. I tried this several times and even deleted the email box and added it again, cleared all cookies, even tried a test with the email address removed, tried a different email address, etc. Still asking for email address.

    I contacted Ninja website but have not heard back from them.

    Can you please help me with this form? I thought it was going to be an easier process since you recommended them. I need all the easy I can get.

    I do not need any delays just want to quickly build this website. There are no high demands from this client. Already wasted way too much time with this portion of the website.

    Haven't even got to the reCaptcha yet.

    Thanks

  • Dave
    • The Crimson Coder

    Ok thanks i fixed it but it wasn't sending out any emails yesterday. I tried several times.

    Today I came back with NO changes made and for the first time it sent out just one email. I set the form to send me email when someone submit their info.

    I tried again and no emails came to me the second time.

    I also contacted Ninja Forms and they want to log in to take a look.

    Do you recommend using this plugin on the site before I let them in?
    https://premium.wpmudev.org/blog/limit-access-login-page/
    If so, please let me know how to configure it for this purpose.

    If not please advise on the best approach before I grant them access.

    Thanks

  • Alex Stine
    • System Administrator

    Hello,
    Hope you are well.

    All this .htaccess code would do is block all IP addresses accept the ones specified by you. This would not prevent users from taking certain actions on your site. I would however like to test this on your site myself, so could you please send the following details to me through our secure contact form?
    https://premium.wpmudev.org/contact/

    Select "I have a different question" from the "What would you like to talk to us about?" drop down. Please insure this is in the Subject field so it is assigned to me.
    Subject: "Attn: Alex Stine"

    In the message body, please include the following.
    1. Link back to this ticket.
    2. WordPress login URL.
    3. Admin account username and password.
    4. FTP host, port, username, and password. Also include if the connection is SFTP or FTP.
    OR
    5. cPanel URL, username, and password.

    Please update the ticket when the information has been sent. I will be more than happy to help you get this working.

    Cheers,
    Alex :smiley:

  • Alex Stine
    • System Administrator

    Hello,
    Hope you are well.

    I just completed my tests on your site, just so you know, here is what I did.
    1. Used support staff access, login URL in email was incorrect.
    2. Created a test user to see if it would email me a notification which it did.
    3. Deleted the test user.
    4. Added a new test email action with the from name and from address that was sent to me when I created the test account.
    5. Filled out the form. The email was received.
    6. I deleted my submission.
    7. I left the test action there, you need to modify it further, but it is sending emails. The exact name of the action is Tested by WPMUDEV.

    Just to note, I did test in the latest version of Firefox, Windows 7.

    Could you please check and confirm it is working now?

    Cheers,
    Alex :smiley:

  • Alex Stine
    • System Administrator

    Hello,
    Hope you are well.

    The URL you sent me in the submission through our contact form was incorrect and did not go to any website, I had to use support access to login.

    The address you listed in your last reply is the default email address your website was using to send mail, so I used that in the Email From and From Name fields to make sure mail would be delivered correctly.

    You can see this address and sender name in action if you create a new user account or fill out the reset password form.

    Hope this helps.

    Cheers,
    Alex :smiley:

  • Dave
    • The Crimson Coder

    I still really don't totally understand your reply but for now let me say that the form seems to be working.

    I also tried to find some info on how to style the form on this website as well as on Ninja website but either one helped. Ninja basically seem to be more interested in selling you their own custom css.

    All I need is a simple layout to pretty up the way the form looks now. Does not look professional at all.

    I also want to remove the "Fields marked with an * are required" line.

    Any tips on where to find some quick simple instructions that I can use to at least give it a nicer look?

  • Dave
    • The Crimson Coder

    Can you give me more details where to add the code you suggest?

    Am i dragging and dropping css elements to one of the upfront pages or onto the upfront script itself?

    Either way more specific instructions would be great. Where do I find that script exactly and exactly what section of the script do I add it to?

    I am also been careful not to add it to the wrong place then it breaks during an update or just placing it in the wrong place.

    Not understanding upfront is the baffling thing here. I will eventually get to the manual but my deadline is quickly approaching to finish this website.

    Thanks for your assistance

  • Dave
    • The Crimson Coder

    This was also attempted here (see image) after deleting the code from the other section in Upfront of course. Still the form disappeared.

    Let me be clear. After they did not work i went ahead and removed them so you won't see them there.

    Again, when i tried it they were done one at a time. Tried in Upfront, save, removed after it did not work and of course saved again.

    Tried in Wordpress, saved, removed after it did not work and of course saved again.

    So now everything is back to normal since they did not fix the problem.

  • Kasia Swiderska
    • Support nomad

    Hello Dave,

    Please don't change Upfront child style.css file - remove all the changes you made there. If you want to add new styles please do it in Upfront editor in Theme Settings -> Global styles CSS. Or use this small plugin https://wordpress.org/plugins/simple-custom-css/
    I tried to check your forms but looks like you removed form shortcode from the contact page - I'm not sure if you moved it to another page, can you point me to page where it is?

    Also if you are using google maps element - please add API key for maps in Admin Dashboard -> Upfront -> general

    Google made changes recently to Maps API and now they are requiring API Key

    kind regards,
    Kasia

  • Dave
    • The Crimson Coder

    If you want to add new styles please do it in Upfront editor in Theme Settings -> Global styles CSS. Or use this small plugin https://wordpress.org/plugins/simple-custom-css/

    Sorry but I need exact details to be sure. I did this in "Upfront/Theme Settings/Global Theme CSS" and added the entry I mentioned at the very top of that file and it did not work.

    I do not see

    Global styles CSS

    unless that is an old path that is now changed.

    Your codes

    `.ninja_forms_form_7_cont .ninja-forms-required-items {
    display: none;
    }

    were placed on the very first line there and I see it was put back exactly where i had it in the first place. Might have been me that left it there but either way that is where I had it to be clear.

    And as mentioned earlier all previous coding were already removed when I replied yesterday.

    >>I tried to check your forms but looks like you removed form shortcode from the contact page - I'm not sure if you moved it to another page, can you point me to page where it is? <<

    The only contact page I have is located here http://dcspecialevents.net/contact-us/

    >>Also if you are using google maps element - please add API key for maps in Admin Dashboard -> Upfront -> general<<

    Haven't got to that stage or even know if i will need it. Will check with the client on this first.

    >>I consulted with Alex and it seems to be that form should be on contact us page. There was no ninja form shortcode there so I added one and now its displays. Also checked if it works and you can see my email in submitted. <<

    I had left it there so not sure what happened after that. I will have to build the form all over again. Hopefully the bare bones form there now is all I need to start rebuilding.

    If you had sent an email via the form I did not receive it not even in junk folder.

    I am now waiting for any replies from any of you if needed before I finalize the form or any further suggestions. I then need to add the styling then I am done.

    Let me know please thanks

  • Alex Stine
    • System Administrator

    Hello Dave
    Hope you are well today!

    Let me try to answer your questions one by one.

    I do apologize, I gave you the wrong path above, I checked your site and the CSS is now in the correct place, right where you put it. :slight_smile:

    If you had sent an email just fyi I did not receive it not even in junk folder.

    You probably did not receive it because there are no email actions specified. Once you add an email action, it should work.

    I checked the form and the CSS code did appear to work, please see my screenshot.

    Please let me know if I can help you with anything else.

    Cheers,
    Alex :smiley:

  • Dave
    • The Crimson Coder

    If you don't mind please follow my message very carefully. I know I said much but I don't know how to make this any shorter.

    In this message I am referring to the form that was reinstalled by Kasia and the only form currently on the website. Seen here http://dcspecialevents.net/contact-us/

    If you are pressed for time maybe you can ignore the text between the lines as it may not even apply to the problem not sure.
    -------------------------------
    I added some new form fields and it so happens I was adding template form fields. I have no clue how to use that feature so I may have added them by mistake.

    I then viewed the form on the website and it so happens the required field that was removed in the css came right back. Not sure if that had anything to do with adding the template form fields.

    When I realized I had entered template form fields (something I wasn't aware I was doing) I went back and removed them all. All was removed except for the Submit Button.
    ------------------------------

    Then I added the fields back by using the "User Information" buttons instead. But I still see the required field on the form when I visit the website.

    I looked at the form in Wordpress Admin pages and I see [ninja_forms id=7] Sorry but I deleted it and think that's what it was but anyway it was replaced with [ninja_forms id=16] which is the current form shortcode. I also updated the short code in the css (Upfront/Theme Settings/Global Theme CSS to look like this.

    .ninja_forms_form_16_cont .ninja-forms-required-items {
    display: none;
    }

    Yes, I know it is now showing two forms on the website I am aware of that but it's not making any logical sense since I matched the form id in Worpress with the one in Upfront and what is actually showing in the ninja form editor.

    Why is it not working? It has to make logical sense for me to make it work and so far it is not. Again, all form ids match up correctly with their respective codes.

    I do not see any other form id anywhere that could be causing the problem sorry.

    Again,

    Fields marked with an * are required

    is still showing up and the form is now showing up twice on the website.

  • Alex Stine
    • System Administrator

    Hello Dave
    Hope you are well.

    First of all, I would like to say I am sorry for all the problems we have encountered so far.

    The required text is now hidden, there was a conflict between the Upfront CSS editor so I installed and placed the code in this plugin.
    https://wordpress.org/plugins/simple-custom-css/

    This is the current CSS.

    /*Remove required text from Ninja Forms form ID 16*/
    #ninja_forms_form_16_cont .ninja-forms-required-items{
    display: none;
    }

    At one point, there were 2 form shortcodes, Kasia Swiderska removed one of them from a text widget, now there is only the one form showing.

    Since this is a new form, you need to set up your emails and actions again. You can do this by going to Forms > Edit > Email &Actions.

    Hope this helps. Please let me know if I can help you in any further questions.

    Cheers,
    Alex :smiley:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.