I want to show html form using shortcode. Here is my code:
add_shortcode('sms_order_form', 'sms_order_form_html');
function sms_order_form_html(){?>
'<form>
<div class="tooltip">
0<input type="range" id="range" value="0" min="0" max="100"/>100
<span class="tooltiptext">0</span>
</div>
</form>
<?php } ?>
But this doesn't print the form. but if I replace the HTML form by echo 'hello'; it prints hello. Is there any way to show any HTML using shortcode.
N.B.: shortcode is placed using elementor.
Shortcode should return a string:
<?php
add_shortcode( 'sms_order_form', 'sms_order_form_html' );
function sms_order_form_html() {
ob_start();
?>
<form>
<div class="tooltip">
0<input type="range" id="range" value="0" min="0" max="100"/>100
<span class="tooltiptext">0</span>
</div>
</form>
<?php
return ob_get_clean();
}
Shortcode functions need to return the output in form of a string as opposed to outputting HTML right away. You can use output buffering to return your code like so:
add_shortcode('sms_order_form', 'sms_order_form_html');
function sms_order_form_html() {
ob_start();
?>
<form>
<div class="tooltip">
0<input type="range" id="range" value="0" min="0" max="100"/>100
<span class="tooltiptext">0</span>
</div>
</form>
<?php
return ob_get_clean(); // clear the output buffer, and return as string
}
Related
I'm developing a plugin to wordpress using WordPress Plugin Boilerplate.
Therefore, I need to create a shortcode to show up my data in one page for the user.
Is it correct to concatenate the HTML as below?
function custom_shortcode( $atts ) {
// Attributes
$atts = shortcode_atts(
array(
'type' => 'type'
),
$atts
);
//get all entries (page 1 with 999999 entries per page should do it:)
$data = Data::get_entries( $atts['type']);
ob_start();
?>
<div class="row">
<header><h3>Expenses</h3></header>
<p>
<span class="cf-entries-header app-name">Expense Origin</span>
<span class="cf-entries-header page-name">Expense Value</span>
</p>
<?php
foreach ( (array)$data['entries'] as $entry ) {
echo '<p class="cf-entry">’ .
‘<span class="exp-origin">' . $entry['data']['origin'] . '</span>’ .
‘<span class="exp-value">' . $entry['data']['value'] . '</span>’;
};
?>
</div>
<?php
$output = ob_get_clean();
return $output;
};
}
add_shortcode( 'cf_app_entries', 'cf_app_entries' );
No this is not right way..
You can't echo all content in shortcode..
You need to bind all content (HTML) in one variable and return this variable
Example
function loginform() {
$html = '<form class="custom_login_form" rel="" method="POST" role="form" action="" autocomplete="off">
<div class="form-group">
<div class="input-container">
<input id="useremail" type="text" class="form-control input-field" name="email" placeholder="Email">
</div>
</div>
<div class="twice-box">
<div class="form-group">
<div class="input-container">
<input id="userpassword" type="password" class="form-control input-field" name="userpassword" placeholder="Password">
</div>
</div>
<div class="form-group text-center">
Login
</div>
</div>
</form>';
return $html;
}
add_shortcode('login-form', 'loginform');
Please check this ShortCode..
If any issue please let me know..
I will be happy to help you..
I'm making a plugin and I don't understand why my shortcode doesn't work if I insert into a woocommerce product page.
It does work if I add it elsewhere on another page, just not on product pages.
The shortcode is added very simply:
add_shortcode('testing', 'testingform');
function testingform() {
ob_start();
echo 'Width:<br>
<input type="text" name="width" id="width"><br>
Height:<br>
<input type="text" name="height" id="height"><br>
Scale:<br>
<input type="text" name="scale" id="scale"><br><br>
<input type="submit" name="submit" id="submitbtn"><br>
<button type="button" id="stripbtn">Show Strips</button>
<div class="wallpapercontainer">
<div class="holder">
<div class="wallpaper">
</div>
</div>
<div class="heightbar"></div>
<div class="widthbar"></div>
</div>';
$output = ob_get_contents();
ob_end_clean();
return $output;
}
I’ve got to get the below form code onto a single row like: http://snag.gy/k5yrv.jpg
<form method="GET" action="YOUR_JOBS_PAGE_URL">
<p>
<label for="keywords">Keywords</label>
<input type="text" id="search_keywords" name="search_keywords" />
</p>
<p>
<label for="keywords">Location</label>
<input type="text" id="search_location" name="search_location" />
</p>
<p>
<input type="submit" value="Search" />
</p>
</form>
I’m using Avada Theme Contact Form 7 and I need to create a form with multiple fields in one row will look like this. For example, this uses 3 column sections, one field per column:
div class="fusion-one-third one_third fusion-layout-column fusion-spacing-yes">Your Name (required) [text* your-name]</div>
<div class="fusion-one-third one_third fusion-layout-column fusion-spacing-yes">Your Message [textarea your-message]</div>
<div class="fusion-one-third one_third fusion-layout-column fusion-spacing-yes fusion-column-last">[submit "Send"]</div>
Any ideas?
Surely can you not just do:
<div class="fusion-one-third one_third fusion-layout-column fusion-spacing-yes">[text keywords placeholder "job title, keywords or company name"]</div>
<div class="fusion-one-third one_third fusion-layout-column fusion-spacing-yes">[text location placeholder "city, province or region"]</div>
<div class="fusion-one-third one_third fusion-layout-column fusion-spacing-yes fusion-column-last">[submit "Search"]</div>
Unless I'm misunderstanding your question completely?
Thanks for your help bluewhitew, but I don't think that would work. The full code is below. I missed something out because I don't want a 'Category' field, but I think I left out an important function. As clicking submit should take you to a job list page, with your selection listed.
<form method="GET" action="YOUR_JOBS_PAGE_URL">
<p>
<label for="keywords">Keywords</label>
<input type="text" id="search_keywords" name="search_keywords" />
</p>
<p>
<label for="keywords">Location</label>
<input type="text" id="search_location" name="search_location" />
</p>
<p>
<label for="search_category">Category</label>
<select id="search_category" name="search_category">
<?php foreach ( get_job_listing_categories() as $cat ) : ?>
<option value="<?php echo esc_attr( $cat->term_id ); ?>"><?php echo esc_html( $cat->name ); ?></option>
<?php endforeach; ?>
</select>
</p>
<p>
<input type="submit" value="Search" />
</p>
</form>
I have the following PHP code which is a template page for a wordpress site:
<?php
/*
Template Name: Calculator Form
*/
get_header(); ?>
<div id="content" class="grid_7 suffix_1 <?php echo of_get_option('blog_sidebar_pos') ?>">
<FORM action="<?php bloginfo('template_directory'); ?>/function.php" method="post">
<INPUT TYPE="text" NAME="inputbox" VALUE="" style="width:200px;" />
<INPUT TYPE="button" NAME="button" Value="Calculate" style="width:200px;" />
<INPUT TYPE="text" NAME="result" VALUE="" disabled style="width:200px;" />
</FORM>
</div><!--#content-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
For arguments sake, let's say that the function.php file looks like:
<?php
function calculate($value)
{
return $value / 1000;
}
calculate($_POST['inputbox']);
?>
I want to add the result of this function into the result field in the form.
I'm not sure if this is a WordPress thing. If I were doing this, I would avoid the functions.php and either use some Javascript to output the calculation or PHP within the template to display the result. Since you are leaning more toward PHP:
<?php
if( $_POST['submit'] ) :
$result = $_POST['inputbox'] / 1000;
else :
$result = "";
endif;
?>
<form action="<?php the_permalink(); ?>" method="post">
<input type="text" name="inputbox" value="" style="width:200px;" />
<input type="submit" name="submit" value="Calculate" style="width:200px;" />
<input type="text" name="result" value="" disabled style="width:200px;" />
<input type="text" name="result" value="<?php echo $result; ?>" disabled style="width:200px;" />
</form>
(Untested)
I'm trying to style some radio buttons that are in a list but when I declare input["type=radio"]{ border-style: none; } in the CSS file it does nothing.
Here is the code where the radio buttons are:
<?php echo $form['servico_id']; ?>.
The servico_id is a list with six radio buttons options from the form new.
Can you help me? I hope I've explained myself well.
Thank you
the form newSuccess:
<form action="<?php echo url_for('marcacao/'.($form->getObject()->isNew() ? 'create' : 'update').(!$form->getObject()->isNew() ? '?id='.$form->getObject()->getId() : '')) ?>" method="post" <?php $form->isMultipart() and print 'enctype="multipart/form-data" ' ?>>
<?php if (!$form->getObject()->isNew()): ?>
<input type="hidden" name="sf_method" value="put" />
<?php endif; ?>
<div id="sub-titulo">Dados Pessoais</div>
<div class="sombra">Nome
<?php echo $form['nome']; ?>
<?php echo $form['id']; ?>
<?php echo $form['_csrf_token']; ?>
</div>
<div class="sombra">E-mail
<?php echo $form['email']; ?>
</div>
<div class="sombra">Contacto
<?php echo $form['contacto']; ?>
</div>
<div id="sub-titulo">Preferência Horária</div>
<div class="sombra"> Dia<?php echo $form['dia']; ?> Hora<?php echo $form['hora']; ?></div>
<div id="sub-titulo">Serviços</div>
<?php echo $form['servico_id']; ?>
<input type="submit" name="submit" value="Marcar >"/>
</form>
</div>
It looks as though you are putting JQuery selector syntax in your css file. This is not
correct. Instead either tag your input type="radio" elements with a CSS class and style that class in your css file, or add a javascript block to style your elements using jQuery.
ie. CSS file:
input.radio {
background-color: blue; //style as you wish
}
ie. HTML:
<input type="radio" class="radio" /> Yes
<input type="radio" class="radio" /> No
Or the alternative way (using JQuery/Javascript):
<script type="text/javascript">
$(function() {
$("input:radio").css('background-color', 'blue);
});
</script>
You could handle it with symfony like this :
Give your radio input a css class within the symfony form configure() function
$this->widgetSchema["myradio"]->setAttribute("class" => "mySpecialRadio");
Put your styling in corresponding css file
/* If you use ul/li rendering of sfWidgetFormChoice */
li.mySpecialRadio {
color: red;
}
input[type="radio"].mySpecialRadio {
float: right;
}