I'm new to wordpress and I am using Contact Form 7 for a form on the website. At the bottom of the form, I've added recaptcha and then the send button. I want to add a SPACE between the end of recaptcha and the form.
What code should I add there?
The code looks like this.
[recaptcha]
[submit "Send"]
And the screenshot looks like this.
Thanks in advance!
As Fralec_ pointed out, you can use a line break <br /> between the shortcodes to nudge the "Send" button down:
[recaptcha]
<br />
[submit "Send"]
Alternatively, if you want more control over the spacing, I would suggest wrapping the "Send" button inside a <div> with inline styling applied to it (change the 20px value accordingly), like this:
[recaptcha]
<div style="margin-top: 20px;">
[submit "Send"]
</div>
Resources
CSS Margins
You can try this:
[recaptcha]<br/>
[submit "Send"]
Related
I have an HTML form I'm custom coding that integrates with a drip (email platform) form. And I'm trying to get it to show a "success" message (e.g. "thank you for signing up to our newsletter".
What would be the best/cleanest way be to adapt the HTML to allow that message after a submit action?
Here's my code so far:
<form class="subscribe-form" form action="https://www.getdrip.com/forms/0123456789/submissions" method="post" data-drip-embedded-form="0123456789">
<div style="width:25vw">
<input class="subscribe-form__input" type="email" id="drip-email" name="fields[email]" placeholder="Email" value="" >
</div>
<button class="subscribe-form__submit" type="submit" data-drip-attribute="sign-up-button">Sign Up</button>
</form>
Thanks!
Start off by creating the message and styling it properly. Maybe something like this...
<form class="subscribe-form" form action="https://www.getdrip.com/forms/0123456789/submissions" method="post" data-drip-embedded-form="0123456789">
<div style="width:25vw">
<input class="subscribe-form__input" type="email" id="drip-email" name="fields[email]" placeholder="Email" value="" >
</div>
<button class="subscribe-form__submit" type="submit" data-drip-attribute="sign-up-button">Sign Up</button>
</form>
<p class="subscribe-form__thanks">Thanks for subscribing!</p>
You could even wrap the thank you in a div if you would like and add a "thumbs up" icon to fill the space.
Once you're happy with your design, add this to you CSS (if you're using SASS/SCSS, you can add it nested within the element):
hide {
display: none;
}
and add that class to your "Thank You" message, like this:
<p class="subscribe-form__thanks hide">Thanks for subscribing!</p>
Now that that's all set up, you simply need to use JavaScript to remove the hide class from the "Thank You" message, and add it to the form, which will reveal the message and hide the form.
I'll use JQuery for brevity, but Vanilla JS will work great too!
$(".subscribe-form__submit").onClick(()=>{
$(".subscribe-form").addClass("hide");
$(".subscribe-form__thanks").removeClass("show");
});
That should all be working as desired - the form should disappear and the message should appear! The animation could be a little jarring, so have a play around with fading then hiding, and matching the height of the two divs to avoid the page having to change size.
This will hide the form, even if the fields are incorrect/incomplete, so you could look into validate.js to improve your usability if you're interested.
NOTE: This method of using the onClick() JQuery selector doesn't guarantee that the user is actually subscribed to the mailing list - your Drip API request could be incorrect, or their API could fail/be offline.
You can look into the Drip API's callback function (https://developer.drip.com/) if you're interested in making sure the user is properly subscribed, however there's no guarantee they will reply in a timely fashion, and so you'd most likely be over complicating things.
Hope this helped!!
I put a check box on the input function to make a secret comment on one post and put a secret comment function.
The first post was applied without any problem, but the problem is that when I put a secret comment on the second post and click on the check box, the first check box is selected. If you click on the check box of the third post, the check box of the first post is selected. And I think it's a check box problem, but how do we solve this problem?
I didn't seem to explain well, so I brought it to the picture to see what my post looked like....;D
https://imgur.com/dCgA1Z7
<form action="#">
<p class="secretWrap">
<label for="secret">
<input type="checkbox" id="secret" class="checkbox" name="secret" />
<span>SECRET</span>
</label>
</p>
</form>
https://jsfiddle.net/4wd56t7a/
It's because you're using the same 'id' and 'for' attributes on both of your checkboxes. They need to be unique or else you're associating that label with the first instance of the id.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
When i add bootstrap button class, like..
[submit class:btn btn-main btn-lg "Send"]
on browser i see it show only one class add.
<input class="wpcf7-form-control wpcf7-submit btn" >
I need others 2 class add also Help Me..
If I remember correctly, you need to add the class attribute to each one.
Try this instead:
[submit class:btn class:btn-main class:btn-lg "Send"]
Also CF7 used to have bug: if you put "class:" after "Send" nothing is added.
Have also just discovered if you put classes after a placeholder it doesn't work for some reason but putting it before does:
[text* your-name class:ast-col-xs-12 class:ast-col-sm-12 class:ast-col-md-6 class:ast-col-lg-6 placeholder "e.g. Joe Bloggs"]
I am using alfresco community 5.0.d
I want to remove google username field from the user profile.
So far,
I found the file that handles this form, userprofile.get.html.ftl and userprofile.get.js. Now as I comment out the div tag for google username field in userprofile.get.html.ftl then the whole form is getting hidden without any error on console.
Form is coming blank as shown in screenshot below.
Any idea how to remove?
Thanks.
I added hidden class to the div to hide them instead of removing it,as it is not displaying any of the form fields as you mentioned.
<#if profile.googleUsername?? && profile.googleUsername?length!=0>
<div class="row hidden">
<span class="fieldlabelright">${msg("label.googleusername")}:</span>
<span class="fieldvalue">${profile.googleUsername?html}</span>
</div>
</#if>
And for the Edit fields,
<div class="row hidden">
<span class="label"><label for="${el}-input-googleusername">${msg("label.googleusername")}:</label></span>
<span><input type="text" maxlength="256" size="30" id="${el}-input-googleusername" value="" <#immutablefield field="googleusername" /> /></span>
</div>
And it is working fine.
I found the reason for form not being displayed was that I was just removing the div tags but not the dom.get method for those fields.
Files to be modified:
profile.js
userprofile.get.html.ftl
Solution:
Remove the dom.get for the fields that you want to remove from
profile.js.
Remove the div tags of those fields from the
userprofile.get.html.ftl.
Restart the tomcat
Voilaaaa !!!
Fixed and Done.
Facing a strange problem with aria-live="polite", if the loaded content has form controls, like radio buttons or checkbox.
NVDA just reads the text of radio buttons, but doesn't announce anything about which one is selected or checked.
<a aria-label="Click Me" href="#">Click Me</a>
<div id="myForm" aria-live="polite"></div>
Here is the plunker.
Sorry you haven't gotten a good answer yet. Welcome to the world of accessibility.
Your issue isn't with aria-live=“polite” -- it's just the way that NVDA works. So I guess the good news is you did it right. For the following example I changed the default option to "Two Day" so I could confirm what was being read wasn't just the first option.
With your code, I hear:
Click me link
I then press SPACE to activate the link, and I hear:
Choose a shipping method:
Overnight
Two day <-- You want this to say "selected/checked/etc"
Ground
If I tab into the group, I hear:
Choose a shipping method:
radio button not checked Two day
To get your desired behavior I updated your HTML to generate an invisible <span> that contains the text Default is "Two day". Now what I hear is:
Click me link
I then press SPACE to activate the link, and I hear:
Choose a shipping method default is Two Day:
Overnight
Two day
Ground
This is what it looks like (Note the span inside the legend):
<fieldset role="radiogroup" aria-labelledby="shipMethod" id="myFieldSet">
<legend id="shipMethod">Choose a shipping method<span style="display:none;"> Default is "Two day"</span>:</legend>
<input name="shipping" id="overnight" type="radio" value="overnight">
<label for="overnight">Overnight</label>
<br>
<input name="shipping" id="twoday" type="radio" value="twoday" checked="checked">
<label for="twoday">Two day</label>
<br>
<input name="shipping" id="ground" type="radio" value="ground">
<label for="ground">Ground</label>
</fieldset>
You can also get a similar affect by messing around with changing the control focus, but that's a bit un-cool to the user with a screen reader.
This isn't hard to implement and in a way is a kind of elegant in that the users that need the extra help get it without changing it for other users.