The Wordpress Contact Form 7 shortcode space before the id is causing 404 issues after the graphical editors truncate it - wordpress

I have encountered a strange hiccup with a Wordpress site that has a graphical editor requirement (Tatsu). It is 97% mature, and of course there is now a problem.
Contact Form 7 was used to create a simple form capable of accepting a file attachment. With the classic editor the form embeds and functions without issue. With Tatsu and a couple of other graphical editors the form works as embedded with their formatting and in all preview modes...until it is saved by the graphical editor. Then we see the 404 error for the form.
If I use a traditional wordpress form, the embed is successful in both traditional editors and the graphical editors. What I have found is the Contact Form 7 (form) has a space in the shortcode whereas the traditional Wordpress forms do not. Example. I can't use the traditional Wordpress form for the file upload form because it requires an expensive paid version to accept the file upload and that PRO version isn't in the budget.
It appears as though the graphical editors are truncating the form's shortcode leading to the 404.
I tried modifying the page's code and was moderately successful, until the required graphics-editor re-saves the page and chops off the form's shortcode. When the graphical editor sees the space in the shortcode, it appears to truncate the shortcode leading to the 404 error. I can switch back to the classic editor and see the modified shortcode--the truncation. With the classic editor I can correct it, but the formatting of the page is wonky until it is opened and re-saved by the graphical editor (Tatsu)...then the formatting is spot on but the form is broken.
-I tried the default wordpress form generator, but making the file upload happen required a costly PRO subscription.
I think I'm searching for the wrong thing based on buzzword mismatches. I've looked for how to alias a shortcode (I was thinking I could create a different form shortcode without a space and point to the Contact Form 7 shortcode with a space), but most information I find in that approach is lower-level concerning form fields.
A more direct approach--I thought about modifying the shortcode, but can't find where the auto-generated form shortcodes are stored to attempt modification for the subject form's shortcode.
A more aggressive approach--I tried a do_shortcode php approach, but it did not work.
For grins I tried %20 in the shortcode reference, but met the same demise...404. Suggestions to get past the hump are appreciated.

I worked with this in several combinations through the day. I really dislike what some of these editors are doing to conform to their own style, but I understand.
The solution I found--there is another editor called PageSlayer. Unlike the Classic editor, it allowed me to edit the html and save it precisely, preserving the style of the graphical interface. This isn't a good solution because when anyone else goes into the graphical interface (Tatsu) to edit something they will lose the form...but it looks right and plays right this moment.
I have sent a request to support Contact Forms 7 to Tatsu. Thanks for the time!

Related

Why can't I enter text into my input field?

Built a form using Contact Form 7 and Oxygen (a wordpress builder), all fields behave as expected apart from the part where the user enters card details.
See live page here > https://adeeba.com.au/checkout/
Struggling to copy in code as it was built using plugins, hoping someone can use the inspect tool to suss out what's going on.

How to make form like example

there is this site https://www.delinski.at/ and it has a nice form where you can pick some values from dropdowns like Date, Number of Persons etc., and then submit the form. It redirects and I see the values on the redirected page link as parameters (if I have changed the defaults).
I searched for and tried several Form Plugins which all do not seem to work - most recent one (Form Maker) lets me design the form as I want but at the end I realized when I click on Submit, the values are not transfered to the target page (confirmed by Form Maker Support as work as intended). It's confusing because actually that should be a basic funciontality of a HTML form, right?
So I want to know if there are plugins where I can get a similar look&feel like the example given above.
That site is a Static Site Generated framework not WordPress. That site would also be very expensive to build cause that is all coded, and very well:)
You are not actually seeing a form there at all that is just how PHP natively uses the URL to navigate via a button.
Almost all the form plug ins for WP use the database write now and do not pass the parameters of the entered form as a php _ POST with a redirect.
I kind of think what you really are looking for is a faceted search feature
One of the best that comes to my mind is https://facetwp.com/demo/cars/?_vehicle_type=truck
Notice the car icons those are actually search buttons:) Of course you will have to build a template to do that neat stuff on the SSG site you linked but...
here is a really informative write upon how it works to get started.

Get rid of visual composer tags when sharing a wordpress page

I have created some pages in wordpress using Visual Composer Plugin. When I try to share those pages on social media sites it shows the visual composer tags as well. Is there any way to get rid of these tags ?
The tags come like
MY PAGE TITLE
[vc_row type=
my page text
The Visual Composer tags are simply arbitrary bits of text that the VS framework picks up and via JavaScript converts into the visual layout that you see.
To demonstrate this edit a page and click the 'Classic Mode' button and this will show you the 'real' content / markup of your page. As a result when sharing the page via social media that network looks for key info to grab for your page to then display.
All the major networks have some form of metadata that they look for first. They use these special tags to see what content you want them to use for your site. If these tags aren't present on your site, they will simply grab content from the page markup. Hence, the Visual Composer tags get picked up.
So, what you need to do is make your site use the necessary metadata / tags for each of the networks, and then populate these fields without these Vis Composer tags.
The easiest way to do this is to use an existing plugin which takes care of this for you. You typically find this in any decent SEO software. You'll in 99.9% of cases want an SEO plugin for WordPress anyway.
By far the most popular and in my experience the best SEO plugin is Yoast SEO. It's a free plugin which not only gives great easy to use SEO tools, it also allows you to set custom description fields for pages/ posts. This means that you can remove the VC tags, and so they will no longer show up on Search Engines and Social Networks. Plus depending on which version you use, you can also customise things on a per social network basis.
Facebook and Twitter etc all use heavy caching against shared content. So, if a page is shared and then edited, the same content will still be shared for a period of time. They don't actually grab live copies every time a page is shared. This can make it a little difficult when developing this side of your site.
Luckily, there is a tool to help with Facebook and here's the one for Twitter.

Searching for a specific string in TinyMCE

I'm creating a short-code generator for the WordPress Add/Edit Post/Page screen.
I want to make sure that there does not exist more than one short-code in the same post/page. So I added an onclick function for the button so that whether there already exist a short-code, could be checked.
How do I go on doing this?
I searched around the TinyMCE API and the closest I got was the tinymce.Formatter.match method. But there's no example on this page. I don't really think that this has anything to do with the content search anyway.
Another way would be to simply use the getContent method and run javascript code against it. But I guess this wouldn't be the best option if there's something built-in for this already.
I do not know exactly what you mean by the term "short-code".
But i guess it is a string you can find using getContent-Method.
There are several other ways to search the editor content.
Since tinymce editor is rendered inside an iframe and is indeed real html code you can use all regular DOM-Methods of your browser. There are even some additional DOM-Methods provided in tiny_mce/classes/dom/DOMUtils.js.

Drupal: specify the search engine description summary from back-end?

Is there any way to write in the Drupal back-end the text to display in the search engine summaries?
Currently, the beginning of my home page (usually menus...) is displayed. I would like to add a description instead.
Thanks
Google uses the metatag "description" when is it is available, instead of the content on the page.
There are a few modules that will help you create them:
nodewords
and
Integrated Metatags
Are the most popular. Using one of these modules will most likely be easier than hiding text with css, and from what I understand google ignores hidden text at least part of the time.
you can see this in action at our site
www.industrytrader.com
Here is a google search showing the how the custom descriptions show up.
You can't do this in the backend.
You should be able to this with regular Drupal theming. How depends on which search tool you use.

Resources