I would like to create a custom form for my WordPress blog which takes the user's email address and then adds it to a database. I know how to write the form and script to achieve the data storage. I don't know how I would go about sticking it on WordPress blog though.
Are there any plugins for this type of thing, or is there a way I can manually add the form to the page?
It's basically a signup for notifications box.
Thanks.
You can just add it using the text widget if your theme is widget ready
Look under appearances>widgets
You can add html to text widget
If you are using more than html you'll run into problems with the widget. Upon which I'd recommend that you create a widget yourself.
Here is code for a blank plugin. Add/call your code in the "widget" function.
<?php
/*
Plugin Name: Blank Plugin
Plugin URI: http://www.example.com/plugins/blankPlugin/
Description: This is a plugin template
Author: Your Name
Version: 0.1
Author URI: http://www.example.com/about/
*/
class blankPlugin extends WP_Widget {
function blankPlugin() { // The widget construct. Initiating our plugin data.
$widgetData = array( 'classname' => 'blankPlugin', 'description' => __( "A blank plugin widget" ) );
$this->WP_Widget('blankPlugin', __('Blank Plugin'), $widgetData);
}
function widget($args, $instance) { // Displays the widget on the screen.
extract($args);
echo $before_widget;
echo $before_title . $instance['title'] . $after_title;
echo 'The amount is: '.$instance['amount'];
echo $after_widget;
}
function update($new_instance, $old_instance) { // Updates the settings.
return $new_instance;
}
function form($instance) { // The admin form.
$defaults = array( 'title' => 'Wichita', 'amount' => '45' );
$instance = wp_parse_args($instance, $defaults); ?>
<div id="blankPlugin-admin-panel">
<p>
<label for="<?php echo $this->get_field_id("title"); ?>">Widget title:</label>
<input type="text" class="widefat" name="<?php echo $this->get_field_name("title"); ?>" id="<?php echo $this->get_field_id("title"); ?>" value="<?php echo $instance["title"]; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id("amount"); ?>">An amount:</label>
<input type="text" class="widefat" name="<?php echo $this->get_field_name("amount"); ?>" id="<?php echo $this->get_field_id("amount"); ?>" value="<?php echo $instance["amount"]; ?>" />
</p>
</div>
<?php }
}
// Register the widget.
add_action('widgets_init', create_function('', 'return register_widget("blankPlugin");'));
?>
For more information... (see links at the bottom of the page as well)
http://codex.wordpress.org/Widgets_API#Developing_Widgets
you can use this wordpress plugin http://wordpress.org/extend/plugins/contact-form-7/
or can do on your own base.
you can create a template inside your theme folder like this:-
<?php
/*Template Name: some thing*/
//your dynamic stuff here
?>
and can assign this template to your static page which you can create from the admin panel of wordpress. whenever you hit the paramalink of this static page this file will be called.
thus you can handle the everything mail content etc.
Thanks.
Related
I have used the youtube video: (https://www.youtube.com/watch?v=OJdIUU1pjl4&t=1261s) to learn how to create my first custom widget. From here I have create a class with a front end display and a backend display (forms) I want to create a form to post the information, then gets saved to the database that later gets generated on the front end.
I have done this with an options page using update_option() and get_option() however, this would be a hard coded variable and since someone can use my widget in multiple places I would want each one to have a unique storage.
Here is currently what I have with php variables with no values because I am uncertain how to make my form post save the details to the database.
//Back-end display of widget
public function form($instance) {
?>
<form method="post">
<label for="inner-text">Inside Text</label>
<input name="inner-text" type="text">
<label for="bg-image">Background Image</label>
<input name="bg-image" type="image">
</form>
<?php
}
//front end display of widget
public function widget($args, $instance ) {
echo $args['before_widget'];
?>
//$bg_img & $inner_text are currently unassigned but would like to use the back end to assign them
<div class="bg-img" style="background: url('<?= $bg_img ?>');">
<div class="container">
<div class="inner-rectangle">
<?= $inner_text ?>
</div>
</div>
</div>
<?php
echo $args['after_widget'];
return;
}
The reason I have refrained from using get_option() is because it is a static variable and can't have a unique value for each widget.
Use get_field_name() & get_field_id() * $instances to display
//Back-end display of widget
public function form($instance) {
// DECLARE VARIABLES
$inner_text = '';
$widget_background = '';
if($instance) {
$inner_text = esc_textarea($instance['inner_text']);
$widget_background = esc_url($instance['widget_background']);
}
?>
<form method="post">
<label for="<?php echo $this->get_field_id('widget_background'); ?>"><?php _e('Widget Background URL', 'wp_widget_plugin'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('widget_background'); ?>" name="<?php echo $this->get_field_name('widget_background'); ?>" type="text" value="<?php echo $widget_background; ?>">
<label for="<?php echo $this->get_field_id('inner_text'); ?>"><?php _e('Inner text', 'wp_widget_plugin'); ?></label>
<textarea class="widefat" id="<?php echo $this->get_field_id('inner_text'); ?>" name="<?php echo $this->get_field_name('inner_text'); ?>" type="text" value=""><?php echo $inner_text; ?></textarea>
</form>
<?php
}
// AUTOMATICALLY UPDATE THE STORED FIELDS
function update($new_instance, $old_instance) {
$instance = $old_instance;
// Fields
$instance['inner_text'] = strip_tags($new_instance['inner_text']);
$instance['widget_background'] = strip_tags($new_instance['widget_background']);
return $instance;
}
//front end display of widget
public function widget($args, $instance ) {
echo $args['before_widget'];
?>
<div class="bg-img" style="background: url('<?= $instance['widget_background'] ?>');">
<div class="container">
<div class="inner-rectangle">
<?= $instance['inner_text']?>
</div>
</div>
</div>
<?php
echo $args['after_widget'];
return;
}
}
I read different articles, but they describe more other things. I do not want to make the wrong code with too much space. In the module there will be one single value that can be changed in the admin panel and other extraneous functions. How correctly to create a database for value of this window in a plugin?
I found the documentation, but I do not have enough experience to cut the excess, if it is.
My code /plugins/custom-counter/custom-counter.php
/*
Plugin Name: Custom Counter
Plugin URI: https://example.com
Description: This plugin adds counter.
Author: Kuznetsova Alexandra
Author URI: https://example.com
*/
// Hook for adding admin menus
add_action('admin_menu', 'custom_counter_menu');
// action function for above hook
function custom_counter_menu() {
// Add a submenu to Woocommerce menu:
add_submenu_page('woocommerce', 'Custom Counter', 'Custom Counter', 'administrator', 'custom-counter', 'custom_counter_page');
}
// custom_counter_page() displays the page content
function custom_counter_page() {
?>
<div class="wrap">
<h2>Custom Counter</h2>
<form method="post" action="options.php">
<?php settings_fields( 'baw-settings-group' ); ?>
<table class="form-table">
<tr valign="top">
<th scope="row">Total Counter</th>
<td><input type="text" name="custom-counter" value="..." /></td>
</tr>
</table>
<p class="submit">
<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
</p>
</form>
</div>
<?php }
Updated - As this is a unique value that will be updated multiple times, you can use the wp_options table with the following WordPress dedicated functions:
get_option($option); where $option is the name of option to retrieve
update_option($option, $new_value); where $option is the name of option and $new_value the new value to be updated.
The fact that options are cached is not a problem if you use some tricks as you will see below, to avoid this data to be cached.
So try the following code:
// Add a custom admin submenu to Woocommerce
add_action('admin_menu', 'custom_counter_menu');
function custom_counter_menu() {
add_submenu_page('woocommerce', 'Custom Counter', 'Custom Counter', 'administrator', 'custom-counter', 'custom_counter_page');
}
// Content for the custom Woocommerce admin submenu
function custom_counter_page() {
$option_name = 'wc-custom-counter' ;
if( isset($_POST[$option_name]) ){
$new_value = sanitize_text_field( $_POST[$option_name] );
if ( get_option( $option_name ) !== false ) {
update_option($option_name, $new_value );
} else {
add_option( $option_name, $new_value, null, 'no' );
}
}
$default = ''; // Set the default value
$value = get_option( $option_name ) ? get_option( $option_name ) : $default;
?>
<div class="wrap">
<h2><?php _e('Custom Counter'); ?></h2>
<form method="post" action="">
<?php settings_fields( 'baw-settings-group' ); ?>
<table class="form-table">
<tr valign="top">
<th scope="row"><?php _e('Total Counter'); ?></th>
<td><input type="text" name="<?php echo $option_name; ?>" value="<?php echo $value; ?>" /></td>
</tr>
</table>
<p class="submit">
<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
</p>
</form>
</div>
<?php
}
Code goes in function.php file of the active child theme (or active theme). tested and work.
If the option already exist, to avoid caching issue, you should need to delete it using:
delete_option('wc-custom-counter');
And adding it in your function.php file. Then browse any page of your web site and remove it.
If you only want to store one thing, like a setting, then you can use wp_options. You can then use WordPress functions to interact with the database instead of writing your own SQL.
I've added my HTML page as part of the admin wordpress (see screenshot)
And I'm trying to get it so on each submit button, if the record is successfully added to the database a pop up shows up saying "Success!" and then clear the form data without leaving the page. At the moment my current set up tries to load the external page instead of remaining on the page in the screenshot. Here's my HTML and PHP:
<form class="pure-form" name="addAthlete" action="submitForm.php" method="POST">
<fieldset class="pure-group">
<input type="text" class="pure-input-2" name="membershipID" placeholder="Membership ID">
<input type="text" class="pure-input-2" required="required" name="firstName" placeholder="First Name">
<input type="text" class="pure-input-2" required="required" name="surname" placeholder="Surname">
</fieldset>
<button name="submitAthlete" type="submit" class="pure-button pure-input-2 pure-button-primary">Submit</button>
</form>
<?php
function showSuccess() {
echo "Success! One record added.";
}
if (isset($_POST['submitAthlete'])) {
addAthlete();
}
function addAthlete() {
include 'addAthlete.php';
showSuccess();
}
?>
I'm assuming the problem lies with the fact that the echo "Success" is trying to echo on the submitForm.php page which is how I've written it. This is because of the way the page is embedded into wordpress, you can see this below:
add_action( 'admin_menu', 'db_menu' );
function db_menu() {
add_menu_page(
'Database Form', // page title
'Database Form', // menu title
'manage_options', // capability
'database-form', // menu slug
'wpse_91693_render' // callback function
);
}
function wpse_91693_render() {
global $title;
print '<div class="wrap">';
print "<h1>$title</h1>";
$file = plugin_dir_path( __FILE__ ) . "submitform.php";
if ( file_exists( $file ) )
require $file;
print '</div>';
}
How can I get a pop up or something to show up within this WordPress page on each submit?
Thanks!
When you submit a form, it posts data to a new webpage by loading it. In order to stay on the same page, the action should take you to that same page ( move your processing logic there aswell, checking for posted arguments ) or if you don't want to see a reload, use ajax instead.
I'm having what im sure is a simple issue but i can't manage to figure it out.
I'm coding a theme options page for my wordpress template and i've managed to get it where the values are saved and i can use them on the site but whenever i reload the theme options page all the form fields are blank and any previously applied settings are gone. My code is below.
<?php
//Theme Options Functionality is Below
if (get_option('pardue_theme_options')){
$theme_options = get_option('pardue_theme_options');
} else {
add_option('pardue_theme_options', array(
'sidebar2_on' => true,
'footer_text' => 'Made by William'
));
}
?>
<?php add_action('admin_menu', 'theme_page_add');
function theme_page_add() {
add_submenu_page('themes.php', 'Pardue Theme Options', 'Theme Options', 'administrator', 'themeoptions', 'theme_page_options');
}
function theme_page_options() {
global $theme_options;
$new_values = array(
'footer_text' => htmlentities($_POST['footer_text'], ENT_QUOTES),
);
update_option('pardue_theme_options', $new_values);
$theme_options = get_option('pardue_theme_options');
echo '<div class="wrap">';
echo '<h2>Theme Options</h2>';
?>
<form action="themes.php?page=themeoptions" method="post">
<label for="footer_text">Footer Text: </label><input name="footer_text" id="footer_text" value="<?php echo $theme_options['footer_text']; ?>" /> <br /> <br />
<label for="sidebar_checkbox">Sidebar 2 on: </label> <input name="sidebar_checkbox" id="sidebar_checkbox" value="on" type="checkbox" /> <br /> <br />
<input type="submit" value="Update Options" name="submit" />
</form>
<?php
echo '</div>';
}
?>
I found a good solution for coding my theme options. The plugin at the link below makes it very easy to code up theme options.
Link to plugin
Documentation is included when you activate the plugin.
I'm using this piece of code to add a form to a Wordpress taxonomy:
function albums_taxonomy_add_new_meta_field() {
// this will add the custom meta field to the add new term page
?>
<div class="form-field">
<label for="term_meta[custom_term_meta]"><?php _e( 'Example meta field', 'albums' ); ?></label>
<input type="text" name="term_meta[custom_term_meta]" id="term_meta[custom_term_meta]" value="">
<p class="description"><?php _e( 'Enter a value for this field','albums' ); ?></p>
</div>
<?php
}
add_action( 'albums_add_form_fields', 'albums_taxonomy_add_new_meta_field', 10, 2 );
The value is saving fine. However, how can I output on my template the value user filled out in the form ? What's the php function to use this value in front-end ?
Thanks.
Just taking a guess, on the page where the form is being redirected to try:
echo $_POST['term_meta']['custom_term_meta']